Imagine you have published an Android app, and it’s growing day by day. The pressure for launching the iOS version is increasing. Some users are also asking for a lite web version of the app. Time is pressing, but you don’t have a budget to hire a developer, neither the time to learn a completely new language, much less make a production-ready launch.
This is where cross-platform app development comes into the picture. Cross-platform app development helps you build an app for different platforms from the same codebase. The code used to publish the Android app can be deployed on iOS, the web, or a desktop program with little change. This completely eliminates the need to maintain a different codebase as well. Isn’t that really great?
There are a number of cross-platform app development tools or frameworks available in the market such as Flutter, React Native, PhoneGap, Ionic, Xamarin. Each one is having its own pros and cons. In this article, we will learn about Flutter, its benefits, and disadvantages.
What is Flutter?
Flutter is a UI toolkit made by Google for developing cross-platform apps. Flutter supports Android, iOS, Windows, Linux, and Mac. It’s a free and open-source toolkit to build visually appealing apps.
Flutter was released in May 2017 and it is one of the fastest-growing repo on GitHub. Flutter 2.0 was released on March 2021 bringing in a significant upgrade to the framework.
Why should you try Flutter?
In one of the Semaphore Uncut episodes, Eric Seidel, Team Leader for the Flutter team at Google, explained why everyone should try out it:
“ If you haven’t tried Flutter, it’s worth a couple of hours on a weekend. Maybe you don’t have a use for it, but I believe that we have successfully pushed development forward. Cross-platform correctly gets a terrible rap. I think that we have tried to right many of those sins and make multi-platform development a lot better.”
Eric Seidel, co-creator of Flutter and Team Leader for the Flutter team at Google
How Flutter works
As you can see in the figure below, Flutter asks the platform for the canvas to draw the UI and access device resources such as bluetooth, audio, or touchscreen.
Unlike other cross-platform frameworks, there isn’t any kind of bridge converting Flutter widgets into the native components, which would impact performance negatively. In Flutter, the framework takes all the responsibility of drawing pixels directly on the screen. This makes the app super fast and responsive. You can think of Flutter as a lightweight 2D game engine.
Writing your first Flutter app
Flutter uses Dart for writing the code, a modern, easy-to-learn language. According to Eric Seidel, its creator, “Dart is fantastically easy to learn. It’s an intentionally small language. It has few pieces in it to try and make it easy to learn, easy to use.”
Dart uses different compilers for development, production, native, and web development. The native developer compiler has two modes:
- Just-in-time (JIT): provides a faster development cycle, needed for quick iteration.
- Ahead-of-time (AOT): compiles Dart to native ARM or x64 machine code when you are ready to publish the app. This makes the app super performant.
The frameworks features two compilers for web:
- dartdevc: allows you to run the app in a chrome browser.
- dart2js: generates production-ready code to be deployed.
Flutter’s compiler design is intentional. This is how Eric explains it: “ Dart has many modes. For mobile development there’s either a JIT that runs on the phone or the ahead of time compile to just build a normal ARM binary. On the web side you can build ahead of time, with whole program optimization, or compile into a single .js file for when you want to deploy.”
Here is the minimal code to run your first Flutter app:
// starter_app.dart import 'package:flutter/material.dart'; void main() { runApp( MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors._teal_, visualDensity: VisualDensity._adaptivePlatformDensity_, ), home: Scaffold( appBar: AppBar( title: Text('Starter App'), ), body: Center( child: Text('Hello World'), ), ), ), ); }Everything in the above code is a widget. A widget declares how a UI should look. Let’s see what each part does:
- runApp(): accepts any widget and makes it a root of the app.
- MaterialApp(): used to incorporate some of the widgets that are required for a fully-fledged material app. It’s optional but nice to have.
- Scaffold(): this widget sets the basic layout for material design. It is used to show other widgets such as AppBar, BottomNavigation, etc.
- AppBar(): used to display app bar.
- Center(): centers the widget.
- Text(): renders a string.
The below image will make things more clear.
You can run the app by simply hitting the play button on your preferred IDE or via the flutter run command in the terminal.
Here is how to app looks on Android, iOS and on the web.
Note: The UI in Flutter is written in a declarative style which is inspired by React. Meaning UI is aware of what to display at any point in time based on its state.
Benefits of using Flutter
Whether you are developing an enterprise application or just a prototype, there are tons of benefits to using Flutter.
Less development time
Everyone wants to develop high-quality apps as quickly as possible. Flutter enables faster app development using its hot reload and hot restart features. Both of these help to see changes instantly so that one can quickly iterate the design while working.
Hot reload provides a sub-second time between when you save the code and when the change appears on the same screen that you were. Even if it is 30 pages into the navigation of your app. Hot reload came out of co-experimentation with lots of engineers at Google, all of who cared about just making developers happy and productive and get home on time.
In the below image you can see Flutter’s hot reload in action.
Less code, fewer bugs
The UI written in Dart is declarative and requires fewer lines of code compared to other native development frameworks. The end result of this is fewer bugs. For instance, you only need a few lines to show an infinite scrollable list:
// Showing infinite list final items = List.generate(10000, (i) => "Item $i"); ListView.builder( itemCount: items.length, itemBuilder: (context, index) { return ListTile( title: Text('${items[index]}'), ); }, )Rich UI library
Flutter comes with a rich set of pre-built widgets that really boost development speeds. It offers most of the material design and Cupertino components out of the box. Flutter flexibility is unrivaled in terms of customizing the existing widgets. That means when it comes to painting pixels on the UI, imagination is the limit.
Flutter is extensible
If can’t find the widget or plugin you need in pub.dev, you can simply create your own platform channel in native code and access it via dart code.
Excellent IDE support
One of the best things about Flutter is that you don’t have to leave your IDE if you are an Android developer. Flutter works nicely with Android Studio. But if you are coming from another technical background, fear not, Flutter has got you covered, it works with VS code as well.
Ready for the web and desktop
On March 3, 2021, during the Flutter engage online event, version 2.0 was released with stable support for web and desktop app development. Despite having started as a mobile-first platform, the desktop is still a first-class citizen in the Flutter ecosystem. So much that many parts of Ubuntu are being rewritten with the framework.
When asked about his journey, Eric explains that “we started with mobile and then built something that was portable enough. The Linux part sort of took off, and Canonical took notice, and they have been slowly working over it in the last few years, teaching a mobile-first framework what a mouse and a keyboard is and helping us to bridge that gap.”
Flutter has great community support
People in the community are always ready to help each other. If you are stuck you can always connect with people on Slack, Reddit and Discord.
Flutter is battle-tested
The Flutter team takes testing seriously: “when we release Flutter to the outside world, we develop everything in GitHub, but we take that master branch, and we check it out, and then we deploy it inside Google. To get all the way through Google, it has to pass through hundreds of thousands of tests before it even becomes a dev channel.”
Flutter can be integrated into existing apps
If you don’t want to rewrite your full app using Flutter, you can still integrate few screens into your existing native Android or iOS app. People use Flutter for just part of the screen, or you can even use it just for a button. You can replace complex code with Flutter code piecemeal. This eliminates the amount of work to develop the screen for any one of the devices.
When it might not be the right choice
- Although stable support for the web is available, it’s still not ready for static content websites.
- For developing web applications, the plugin ecosystem may not have the required plugins available yet.
- Flutter is not yet officially available for developing smartwatches app or Android/Apple TV app.
Success stories
Google itself has started rewriting its apps in Flutter. And a lot of other companies have found it worth investing in Flutter.
The Reflectly app was originally written in React Native, and now they have moved to Flutter. Currently, there are more than 1 million users have downloaded the app. You can find many more apps made with Flutter here.
Learning resources
The best place to get started with Flutter is its official page. I would recommend investing time in reading the details of each section to solidify the base for the future of app development.
Here are the other resources that you can use to increase your knowledge.
Articles
- Flutter community on Medium.
- Check out ResoCoder Flutter guides.
- Code With Andrea specializes on Flutter tutorials.
- FilledStacks offers videos and tutorials for mobile development.
Videos
- Flutter Channel on YouTube
- Tadas Pedra talks about Flutter and code fundamentals.
- Fireship offers high-intensity code tutorials.
- SuperDeclarative Channels covers Flutter extensively.
More
- Awesome Flutter on GitHub
Conclusion
In this blog post, we learned Flutter is, how to write your first app, and how it can change the way we develop the applications of the future.
Interested in mobile development? Read these next:
- Android Continuous Integration and Deployment Tutorial
- Learn how Semaphore can help you build Android and iOS apps with lightning-fast CI/CD.
- What Is React Native?
- iOS CI/CD: Continuous Integration and Continuous Delivery Explained
- Build, Test, & Deploy an iOS App with CI/CD
Originally published at https://semaphoreci.com on May 12, 2021.
