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.
Core Technologies
Flutterâs core technologies are Dartâ a programming language developed by Googleâand Skia â a 2D graphics rendering library. The language has been optimized for building user interfaces. This makes it a good fit for the Flutter framework. The language is fairly easy to pick up, especially if you have a background in JavaScript and object-oriented programming.
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:
MaterialApp
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.
The / 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 onUnknownRoute.
Defining the route in your screensâ Dart files is done by creating a static constant:
static const routeName = '/your_route_name';
Scaffold
Scaffold enables you to implement the basic visual layout of your apps. It makes it seamless for you to add an appBar, a snackbar, and a bottom navigation â just to mention a few.
Note that you can use your theme to define the background of your appBar. body is used to define the widget tree that will form the body of the screen.
GestureDetector
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.
Container
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
The 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.
State Management
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.
Leave a Reply