Self-Reflection (Building Whatsapp UI using Flutter)

On 9^th October 2020 at 3.00pm until 5.00pm, my friends and I were joining an online workshop named Building Whatsapp UI using Flutter workshop. It was a new and great experience to participate in this workshop as I do not know anything about flutter framework. This is my first time hearing about this flutter framework. As a student of Software Engineering course, I realize that this is the opportunity for me to gain new knowledge and new skill that related to my field of study. I really hope that this new skill can help me to increase my job opportunity as it is hard to find jobs based on what we interested into. The Building Whatsapp User Interface (Whatsapp UI) using Flutter workshop were organized by Developer Student Club (DSC UTM).

The moderator of the workshop was the head of development of DSC UTM named Loh. This workshop has lasted for 2 hours using Youtube Live platform. Youtube Live is very helpful as it will automatically record the live streaming video. So, the participants can refer to the youtube video in the future to revise what are the things that has been discussed. Before the youtube live session started, the participants were gathered in a Whatsapp group to facilitate the dissemination of information and the organizer shared the link for the installation of the flutter in the Whatsapp group. So, the participants can install the flutter framework before the live session started. There are four topics that has been covered in this workshop which were who is DSC UTM, what is flutter, material design and widgets and also the tutorial on building the Whatsapp UI using Flutter. In this report, I will included what I got from the workshop and I will also include all the graduate attributes that I have gained throughout this workshop. The graduate attributes that I have gained are thinking skills and adaptability skills.

Subas Samynathan, the vice president of technical developer students club was the speaker for this topic. He was explaining on who is DSC UTM what are things that DSC UTM do. DSC is the acronym of Developer Student Club meanwhile UTM is the acronym of Universiti Teknologi Malaysia. DSC UTM is a university based community group for students. Students from all undergraduate or postgraduate programs with an interest in growing as a developer are welcome to this club. The students who joing the club can grow their knowledge in a peer-to-peer learning environment. There will be a group learning session where students will share ideas and find the solutions for community-based problems and the local problems together. The objectives of this club are to learn, teach and give back to community by doing projects or joining competitions. The vision of the club is to create impact to the community.  DSC UTM were conducting workshops, tech talks, CSR projects and hackathons throughout the year. DSC UTM are mainly supported by Google.

For this session, the speaker was Yasser Ehab which is the head of department of android development and also a third year student in UTM. He was explaining on the workshop’s objectives. The objectives of this Building Whatsapp UI using Flutter workshop are get to know more about Flutter technology, know the uses of Flutter, know what is the material design how material design relate to Flutter, gain basic knowledge aout how Flutter works, able to make a simple project using Flutter which is the Whatsapp UI and know how to continue learning Flutter. He was also explaining about what is flutter. Flutter is one of the Google’s technologies for building mobile applications. Flutter is also a simple toolkit that allows developers to design interfaces for all sort of screen sizes and devices. So, developers can just produce an application that can be used in iOS and Android by using this Flutter.

Flutter comes with all sort of pre-built widgets that make it easy to lay out the application. From the Flutter website, Flutter is an open source User Interface (UI) Sotware Development Kit (SDK) created by Google. Open source means that developer can access the code base behind flutter technology. Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web and desktops from a single codebase. It is used to develop applications for android, iOS, the web and more. Flutter’s initial release was on May 2017. By that time, the programming language that it use was Dart. There were many applications that were built with Flutter. For example, the Google Ads, Singapore Bus Tracker (Maps and Navigation), Birch finance (credit card reward application), Alibaba.com (e-commerce application) and Reflectly (lifestyle application). Just for extra information, Flutter toolkit is free to develop the applications but developers need to pay for around 25 dollars for the developer account if the developers want to deploy the applications to the Google Play Store and the payment is a one-time payment. But for App Store, the payment is 100 dollars and it is paid yearly.

In Flutter, Material is a design system created by Google to help developers to build the high quality of user interfaces for Android application, iOS application, Flutter and the web. Developers can use this material design by Google without having any knowledge in designing. By using the material design for flutter, developers can get access to the pre-made widgets that follow the material designs.

Everything in flutter is a widget. Flutter widgets were built using a modern framework that takes inspiration from React. Widgets described as what their view should look like given their current configuration and state. When a widget’s state changes, the widget rebuilds its description, which the framework diffs against the previous description in order to determine the minimal changes needed in the underlying render tree to transition from one state to the next.. Widgets are the building blocks that construct the application. Widgets included text widget, row widget, column widget, container widget and more. In Flutter, there are broadly two types of widgets which are stateless widgets and stateful widgets. There are many common widgets used in most of the applications which were apps widget (example: MaterialApp which is a widget that give developers to access a lot of components or widgets by Google), convenience widgets (Scaffold, NavigationBar and AppBar), layout widgets (Column, Row and ListView), text widgets (Text and RichText), button widgets (IconButton, RaisedButton and FloatingActionButton), graphic widgets (Image and Icon) and more.

Throughout this workshop, I have developed the thinking skills. This workshop needs me to think more innovatively. The explanation of the Flutter and the implementation were very good and easy to understand. Then, I need to be focus in order to follow the instructions given by the instructor. The tutorial is easy to follow as the instructor deliver the instructions clearly and smoothly. Next, after the tutorial ended I need to think for creative and innovative ideas to produce creative user interface for my own application projects. I need to think outside of the box too in order to produce an application that different from other people.

As a student of software engineering course, I need to adapt more with new software, new applications and also new technologies. I know that this Flutter framework will give advantages for me in the real world as I am in this technological field. I am very sure that I could accept and adapt in this new technologies just like this Flutter framework. I think I could implement this flutter to my projects in the future as it is a good option to start and develop an application. For me, it will be advantages for me if I had learned many skills and adapt with the new technologies as it will help me to survive in the occupational world.

From this workshop, I have got to learn new method to develop an application and also got to build user interface (UI) of the Whatsapp application. This experience has increased my innovative skill. This experiences also has increased my thinking skills and adaptability skills. By implementing this knowledge to the real world project, I am sure that the process would be easier. Furthermore, the participants of this workshop will get e-certificate as well. I hope that the e-certificate will also can help me in the future.

            To be conclude, I am glad to find about this workshop early as I can prepare myself by installing the flutter framework before the live session started. This is a very interesting workshop that I have joined so far. I have gained new knowledge that can improve my skill in developing an application. I really hope that this new skill can be an advantage for me as a developer in the future. As for improvement for the next workshop, the organizers should provide explanation or notes on what will be discussed before the session started as it will increase the understanding of the participants. But, overall the workshops are running smoothly and fine. The explanation from the instructors were also satisfying and understandable. Other than that, I would like to participate in workshops like this in future too if I have the chances.