Getting Started with Google Flutter
Guide to the fastest growing framework
Creating a great backend is a difficult thing. But most of the developers choose to work on backend if given choice. Why? Because, frontend development has challenges, none of which can be left unchecked.
First and the biggest one is number of platforms available for frontend. Superficially, they are four: android, iOS, linux and web. But that doesn’t end here. There are many screen variants in android and web. Next big issue is code base. The official language for android native development is Java (It can be done with C/C++ also. But not much recommended.), Objective-C or Swift for iOS and JavaScript for web (Well, linux has no such reservations). Thus, we have to maintain at least three code bases, if we want to address all three platforms.
All of these development issues greatly affect initial deployment times and update deployment times. How do we address these issues? Google Flutter comes for our help :)
Flutter was launched in 2017 with main purpose ‘Single codebase for all platforms’. Flutter uses dart programming language. It uses a powerful dart engine written in C++ which allows JIT (Just In Time) compilation, which means that the changes can be compiled while program is in execution stage. With the JIT compilation support, flutter supports stateful hot reload.
Dart platform libraries and flutter design library form the backbone of flutter app development. Dart libraries handle things like several data structures, I/O, conversions and rendering. Flutter design library has two sets of UI widgets: Material Design which implements Google’s material design and Cupertino widgets which implement iOS design guidelines. But let’s not dive deep into the ‘framework technicals’, but focus on what does it offer to devs like you and me and how to get started with flutter :)
First and foremost, one must understand the basics of dart language, which include:
- Variables (Basic like Integer, String etc. to advanced ones like Uint8List)
- Conditionals, Loop structures, Error handling
- Functions (Simple and asynchronous)
- Classes
- In-built data structures (List, Hashmap etc.)
- File I/O
Everything in flutter is a widget.
Arguably, this sentence is the core of development paradigm of flutter. Flutter provides mainly two types of widgets: Stateful and Stateless. Stateful widgets are those which contain ‘values closely tied to the UI’, that is, the change in these values must trigger change in UI. For example, let’s see flutter’s default example app:
In this app, when you tap the floating action button in the bottom-right corner, the value at the center of the UI increases by 1. To achieve this, the class handling the screen is inherited from StatefulWidget class, which re-renders UI/part of UI when values associated with it change (here the value of counter).
On the other hand, if we need to implement a UI component which doesn’t require UI update, we can inherit handler class from StatelessWidget class. For example, if we fetch information of a book from Google Books API, the values displayed in UI will never change, thus we can use StatelessWidget to display this information.
Within the handler classes, we can define methods to be executed automatically or on some user interaction. For example, we can create signin() function within class to be executed when user taps a button.
Flutter is arguably the fastest growing community. Flutter developers across the world keep contributing to flutter by developing dart packages. Packages are simply dart programs designed to perform particular functionality. For example, sqflite is a dart package for interacting with a local SQLite database. A package may implement a flutter widget also. Animated text kit is one such package which simplifies complex text decorations and animations.
To use a package, we can simply search for it on pub.dev and follow simple instructions up there. Packages play important role while using third-party services like firebase. Packages are important while implementing some native functionalities like SharedPreferences. It is possible to implement these even without packages, but the task is tedious as one has to create platform specific codes from scratch in respective languages.
Even with packages at our disposal, we might face a situation where we strictly need platform specific code. Probably we are doing something so unique that nobody has thought of before ;)
In that case, flutter provides MethodChannel which allows native development for platform specific functionalities. (If you have networks background, you can see MethodChannel as a TCP socket between the flutter engine and the native platform, working on request-response model) The benefit is that we need not repeat complete code for UI across the platforms. We can use same flutter code for UI and write only functionality in the native language.
Here is a roadmap to mastering flutter:
With these steps followed, you can achieve proficiency in flutter in almost no time. By proficiency, I mean the confidence that ‘I can build anything in this framework’ not that ‘I know everything about this framework’.
I hope you enjoyed this article and it added some value to you. For any questions and/or suggestions feel free to comment below.
Happy ‘flutter’ing and stay Safe! 😀
