I’ve been programming professionally since I was 15 years old. This summer marked my 27th year in software development (you do the math 😊). I started my mobile career the day the iOS SDK was released for the iPhone 3G in 2008. I’ve seen a lot of trends come and go.
Flutter is one of the most exciting things to happen in mobile. I’ve worked with every cross-platform framework and Flutter is the best solution by far. Judging by the speed of adoption, I think it’s safe to say that a lot of other developers agree.
It’s also important to note that Flutter really solidifies cross platform as a methodology. Android dominates the mobile OS market worldwide. To see Google investing in Flutter shows how important developer productivity has become.
What Is Flutter?
Flutter is Google’s cross platform development framework. It allows developers to create iOS and Android apps from one codebase while maintaining native performance.
Many cross-platform tools let you centralize code but this convenience comes at the expense of performance and a degraded UI experience. Instead of being a wrapper on top of native UI components (like React Native and Xamarin), Flutter draws the UI natively. Flutter maintains the native experience and feel of the app, and you don’t have to worry about performance on any platform.
Here are a few key concepts:
- it’s an open-source, cross-platform toolkit
- apps are written in the Dart programming language
- it has its own graphics engine (Skia)
- it supports three platforms officially: iOS, Android, and web (in beta)
- unofficially – it also supports desktop
A Brief History Of Flutter
Initially, Flutter was known as “Sky” and only supported the Android platform. Sky was publicly announced in 2015 at the Dart developer summit.
Google then announced Flutter preview release 2 at the Google Developer days in Shanghai and subsequently at Google I/O. Finally, Google announced the first stable release at the Flutter Live conference in London in December 2018.
Recently at the, Mobile World Conference in Barcelona, Google announced Flutter 1.2 with some new features and Dart Developer tools.
Widgets: Flutter Building Blocks
In Flutter, you define your user interface using widgets. In fact, everything in Flutter is a widget. Your application itself is a widget made up of several sub-widgets. Widgets are used for — but not limited to:
- Creating rows
- Creating columns
- Styling elements
The beauty of Flutter is that most of the widgets you’ll ever need have already been built for you. Therefore, you most likely won’t need to write them from scratch.
Here are a few of the widgets you’ll likely use in your apps:
This is used to define an application that uses material design. Using
MaterialApp enables you to:
- Define the primary color used in the entire application
- Define the accent color used in the entire application
- Define your application theme details, such as text style, text color, fonts, etc.
Theme.of(context).accentColor Theme.of(context).primaryColor Text("Some Text", style: Theme.of(context).textTheme.title, )
MaterialApp also provides is route implementation. You can define the route names in your screens and declare them in your main Dart file. They’re defined as shown below and are referred to as the routes table.
/ route defines the home of your application. When declared, the
Homeproperty shouldn’t be defined on MaterialApp. You’re also able to define the route to navigate to in case of an unknown route using
Defining the route in your screens’ Dart files is done by creating a static constant:
static const routeName = '/your_route_name';
Scaffold enables you to implement the basic visual layout of your apps. It makes it seamless for you to add an
snackbar, and a bottom navigation — just to mention a few.
Note that you can use your theme to define the background of your
body is used to define the widget tree that will form the body of the screen.
This is an invisible widget that enables you to react to user gestures, such as taps, drags, double-tap, long press, and vertical drag, just to mention a few.
As seen in the example above, a
Container has been used to wrap the text. A
Container is quite handy when you’d like to declare attributes such as padding and decoration.
If you’re only interested in defining padding, you should use the
paddingwidget instead. In this case, a
BoxDecoration has been defined, enabling us to set the color of the shadow as well as the border-radius.
ListView widget is used when you want to create a scrollable list of items. It also provides a
builder class in the event of an infinite list or a very long list.
In Flutter you’ll need to manage the state of a widget as well as the state of the entire application. Widget states can be managed using the
Statefulwidget. Where state management isn’t needed, a
Stateless widget is used instead.
In the beginning, you might have noticed the use of
ChangeNotifierProvider. This is a functionality offered by the
Providerpackage and is used to manage the application-wide state…mostly. This is especially useful when managing data. When the data changes, all the widgets that were listening to this provider will be updated. Since state management with the
Provider package can be a full article by itself, we’ll leave it there for now.
Plugins and Packages
Pub.dev provides a rich pool of packages to aide in your Flutter development. Some of my favorites include:
- Shared Preferences that allow you to persist data in device storage.
- Provider, for state management.
- Flutter Launcher Icons that you can use to generate icons when you’re ready to publish your app.
- The intl package for dealing with internationalization, date, and number formatting.
Flutter Vs Other Cross-Platform Frameworks
Google recently revealed to VentureBeat that “nearly half a million developers” now use Flutter every month. And 2 million developers have used Flutter since version 1.0 was released in December 2018.
Google also broke down the share of Flutter developers: 35% work for a startup, 26% are enterprise developers, 19% are self-employed, and 7% work for design agencies. The company added that “Flutter usage is growing fast among enterprise customers in particular” and that large companies specifically appreciate the ability to build “highly branded experiences that support multiple platforms.”
Flutter has seen incredible adoption since release. Just last week, Flutter surpassed 100K stars on Github, surpassing React Native as the most popular open source mobile app framework.
Who Is Using Flutter?
Some of the largest brands in the world have already adopted Flutter for production use, including Groupon, Capital One, and BMW.
Alibaba, the world’s biggest online commerce company, used Flutter to create an app experience for iOS and Android on their Xianyu app, which has 50M+ downloads:
Dream 11 is a sports fantasy platform in India that lets users play fantasy Cricket, Football, NBA, Hockey, kabaddi, and basketball.
The UI of the app is a result of the easily customizable widgets provided by Flutter. The widgets are based on material design and most of them are adjustable so you can utilize the same widget for Android and iOS.
Hamilton is the official app for the hit American Broadway musical, showcasing everything related to Hamilton. The app provides all the latest updates about Hamilton, videos, bits of information, daily trivia, fun stickers for chat, access to merchandise and also gives access to its lottery section for its three cities and tour locations.
Why Flutter Is The Future
With Flutter, the possibilities are practically endless. Even complex apps can be created with ease. If you develop mobile apps and have yet to give Flutter a try, I highly recommend you do as I’m sure you’ll fall in love with it as well.
The typical pitfalls I’ve encountered in other cross platform frameworks don’t exist in Flutter. The developer experience is great, and very productive thanks to Hot Reload. Performance and app size make native comparisons a non-issue.
With technical considerations satisfied, it’s important to state how passionate the Flutter community is. In addition, Google has committed to the project via support and a clear roadmap.
In my opinion, Flutter is the safest bet for the future of cross platform mobile development.