v1.1 📱 — Building cross-platform apps with Flutter
This was originally posted as a newsletter under Since Last Commit
Introduction
Welcome to Since Last Commit, a newsletter that explores mobile development, release engineering and anything/everything related to Software Engineering.
As always, the goal of this newsletter is to share new discoveries and learn how we can become better developers.
Today’s topic is building cross-platform applications with Flutter. Recently, the Flutter team hosted their Flutter Day, a 24-hour educational event, along with their global Flutter Hackathon. Fortunately, I had the opportunity to virtually attend both. So stay tuned!
Cool Reads
Tip: Here I share my favourite quote of the week
“Make it work, make it right, make it fast.” — Kent Beck
Flutter
As described on flutter.dev, Flutter is a UI toolkit for building applications on Android, iOS and Web from a single codebase. To develop on Flutter, you will be required to use Dart as the programming language. Despite having a single codebase, Flutter provides support for building applications specifically for that platform. For instance, your application can be programmed to extend the Material style for Android and Cupertino style for iOS. As a result, your users would not have to compromise on that native feel while using your applications.
Why does it matter
Choosing the right piece of technology depends on the problem you are trying to solve. There could be multiple reasons why you would want to use a cross-platform solution over the native implementation. Such as:
- one codebase for both Android and iOS apps
- great for testing out a M-V-P quickly
- easy to learn and build beautiful UI
Development
To start building with Flutter, you will need one of two IDEs: Android Studio or Visual Studio Code. Both IDEs will allow you to install the Flutter plugin along with Dart. With the Flutter SDK, you can use the Flutter CLI to determine whether your development environment has the required dependencies to develop both the Android and iOS projects. The Flutter CLI is a helpful tool that can help you create, build and test your project.
One interesting fact about developing Flutter projects is that you get access to hot reload. Hot reload is a process such that changing the source code will update the UI instantly on your simulator or physical device without requiring the need of recompilation. This is a huge time-saver as applications do not need to be recompiled for most use cases. Although there are some conditions where hot reload may not work. But the joy of having direct feedback when you change a colour or text just feels great.
The Flutter documentation states that the UI is made of many widgets. A widget describes how a view should look like given their current configuration or state. Examples of basic widgets are Text, Stack and Container. These widgets are a subclass of either a StatelessWidget or StatefulWidget. If the UI is dynamically changing, such as updating a list, then the class has to extend the StatefulWidget. Having a state tells Flutter when to refresh the screen to show the updated content.
Flutter Day
Flutter Day was a 24-hour event which included three livestream sessions with the members from the Flutter community. To learn more about the livestream, you can visit their playlist on YouTube.
Flutter Hackathon
In my opinion, the Flutter Hack20 hackathon was a great motivation for me to learn Flutter. My experience at the virtual hackathon and the large community of Flutter developers was very positive. Throughout the 48-hours hackathon, there were livestreams from experts showcasing their work and answering questions. On top of that, there was a Slack workspace dedicated for this hackathon to interact and engage with other developers around the globe. The themes of this year’s hackathon was Saving the Planet and Retro/Cyberpunk Future. For my project, I wanted to develop something that I could use personally and at the same time learn how to develop a Flutter application. Therefore, If you’re interested in checking out my project, you can find my project on GitHub.
Tips and Tricks
If you’re interested in Flutter, I have shared some resources to help you get started:
- CodeLabs
- Flutter Day Streams
- Flutter Documentation
Conclusion
Thank you once again for taking the time out to read this newsletter. If you haven’t already, feel free to subscribe and reach out to me on twitter (@asadmansr) if you have any questions.
Keep hacking on!
