Are you starting a new Flutter project? Basic things that you should know.
A few things that you should know before you start coding a new project in the Flutter framework.
If you have decided to use Flutter as a framework for your new project, there are some things that you should know before you start coding. You will probably have many questions like:
- what design patterns to use
- what CI/CD is supported by Flutter
- what are the “must-have packages”
- what IDEA to use
- is there Lint support
- what design and animations to consider
- what about testing
I will try to give you hints on these questions so that you can examine more on these topics.
Publisher words
The purpose of this article is to summarize the things that you should know before starting a Flutter project. This article will not teach you how to use all the things that are listed above, there are numerous articles and tutorials on the web that you can use for that purpose. All my tips are based on the experience of utilizing two Flutter production applications, which I wished I had known before starting my first project.
If you already have a project, but you wonder how your code can look cleaner, feel free to read my article on that topic. It’s very important that others understand what are you writing!
Pick IDE
Keywords: #AndroidStudio #VisualStudioCode #Xcode
It’s difficult to address this topic because it’s down to personal preference, however, Android Studio/IntelliJ and Visual Studio Code are the recommended IDE by the Flutter team. For both of them, you will need to add a Flutter and dart plugin. In any case, if you are planning to build the iOS application, you will require an Xcode to set up a couple of things.
My personal choice would be the Android studio since it has more features; it’s a more common solution for Android development and also has a better UI organization of running emulators.
State management
Keywords: #BLoC #Provider #Redux #MobX
One of the first things that you could ask yourself is which Design Pattern should you use for your state management? The answer to this question could be somewhat problematic because the Flutter team (Google) has had different opinions in the past. First, they endorsed the usage of BLoC which then turned out to be excessively complicated for smaller projects, and then started to recommend the usage of Provider.
I have used both patterns, and I think that a combination of them can be a good idea for a project that has a mid-range complexity. For our two production apps, our team has decided to use a combination of Redux and Epics, which I would strongly recommend for mid-range to more complex projects.
Why I would continue with Redux on future projects:
- It’s widely used on web projects (more developers are familiar with it)
- It’s very good to use for global state management — transferring data between different screens, one place of truth
- Writing unit tests is much easier
The conclusion is that you should pick the design pattern based on the needs of your project, so it would be useful to read some of the articles on this topic. You can start with recommendations from the Flutter team.
I use redux. It gets the job done for all cases, shared data for multiple widgets or backend data (with the help of middlewares), but the advantage is one uses one framework instead of combining multiple frameworks. I think the less dependencies, the better.
Redux, but I feel like that would be overkill for a simple app. I’d prefer BLoC or even just Provider for a simple app
— @flagellant on /r/FlutterDev
If you are interested in how to implement redux, I will drive you by examples inside this article:
Libraries (plugins and packages)
Keywords: #connection #stateManagement #database #fonts #reactiveProgramming
I would like to point out, that these libraries are my “must-have” choices when starting a new project. Perhaps other devs will have different alternatives, so please feel free to add more suggestions in the comment section for developers that are green in the world of Fluttering.
- http package — HTTP calls
- retrofit — based on https://square.github.io/retrofit/
- cached_network_image — if you need a handler for images
- path_provider — access to locations on the filesystem
- firebase libraries — firebase related plugins and packages
- state management — BLoC, provider, flutter_redux, redux_epics
- rxdart — adds additional capabilities to Dart Streams and StreamControllers
- json_annotation — creates code for JSON serialization and de-serialization
- shared_preferences — wraps NSUserDefaults and SharedPreferences and if you are developing for web app also please consider using shared_preferences_web
- sqflite — SQLite plugin for Flutter, but I would also recommend moor && moor_ffi
- google_fonts — 977 fonts (and their variants) from fonts.google.com in your Flutter app
Note
In the Flutter framework for libraries, you can use plugins or packages. You are probably wondering what the difference is. In one sentence, the plugin will give you the possibility to use native platform API’s, while the package is entirely written in Dart.
Tip: If you cannot find a satisfying package on https://pub.dev/ consider writing your own.
Continuous integration and delivery
Keywords: #CI/CD #codemagic #jenkins #docker #bitrise #gitlab
There are a couple of providers or approaches to resolve the question of CI/CD. The first to appear on the market was codemagic.io. It’s a perfect solution because you can set up deployments of applications on the web, Play Store, or App Store. The only downside is that you will get only 500 build minutes free every month, with the possibility to buy more minutes. Other solutions can be GitLab CI/CD with Fastlane integration for iOS (in this case you need to have a macOS machine which will be used as a runner), or custom docker+jenkins+bitrise solution. For the Flutter team recommendation, please visit this link.
Design
Keywords: #widget #animations #material #cupertino
By default, as you most likely know, the Flutter framework uses Material or Cupertino design for their widgets. However, since every widget is nearly pixel adaptable, designers get the opportunity to express their creativity. This is exceedingly excellent because your app can still look like Material/Cupertino but slightly different from every app that’s on App Store/Play Store. Flutter also allows you to use Material Theming to make your app look great and different.
I’m incredibly excited to welcome Flutter into the official set of Material Design Components as a full fledged peer to our Android, iOS and Web offerings. Flutter’s philosophy of flexible and adaptable widgets is a great fit for Material Theming, and Flutter’s ability for real time UI iteration is a game changer in the way we polish and refine designs.
by Matías Duarte, VP, Material Design At Google’s I/0 2018
In case you are worried about how you will handle different designs for different platforms, check this code!
if (Platform.isAndroid) {
// Android-specific code
} else if (Platform.isIOS || Platform.isMacOS) {
// iOS or MacOs code
} else if (Platform.isLinux || Platform.isWindows) {
// Desktop platforms code
} else {
// It's a web!!!
}Isn’t Flutter amazing?
Animations
Pretty much every widget inside the Flutter framework can be animated if you wrap it with the AnimatedBuilder widget. On the other hand, there are already a lot of widgets that have all the logic for animations. You will only need to change its properties such as size, color, or edges, and they will do their job pretty well. A list of animated widgets is accessible here, or you can watch it here.
BUT, if you have a super cool designer, or if you are one of them, check out Flare. Flare allows you to design, animate, and immediately integrate your assets into any platform.
Linter
Keywords: #linter #staticAnalysis
As you may have noticed, the Flutter and Dart team try to cover everything! You just need to create analysis_options.yaml in the root of your project and set your rules based on this list.
Testing
Keywords: #unitTest #integrationTest #uiTest #goldenTest
YES, Flutter SDK contains APIs for unit and integration tests. As you may know, there are a few different tests in the Flutter framework: unit, widget, integration testing, and gold tests. Unit and integration tests are pretty clear and they are similar to other UI frameworks, so I will skip them for now (if you are interested, please find more information in these docs). The main thing I would advise you is to keep your function small, unit-testable like in every other language/framework.
Widget testing is essentially known as element testing in other UI frameworks, where you can test a particular widget in your project.
The goal of widget tests is to verify that the widget’s UI looks and interacts as expected.
What are the golden tests? A special unit test that compares your widget with an image file and expects that it looks the same. Golden files are image files that were created from a manually verified widget.
And finally, yes, you can mock the classes, methods, and API’s functions with the help of awesome mockito, mock_web_server plugins.
Useful links
Here is a list of links that may help you:
- https://pub.dev/ — a place for plugins & libraries
- Flutter YT channel — love the widget of the week and boring show
- Tensor programming — dart series, flutter tuts
- https://codemagic.io/start/ — CI/CD for Flutter projects
- https://rive.app/ — animation tools
Conclusion
As you can see, Flutter has most features like all other UI frameworks and considerably more. Your efficiency will increase on account of hot reload and your application will surely look excellent and more animated. Be cautious of how you structure your code, include a lot of tests, and happy coding!
If you think that something is missing in this article, or if you have a different opinion, please leave a comment!
Projects
As I wrote in the text, our team has already developed a production app, so if you want to see how a production app made in Flutter looks like, scan the QR link or visit Google Play or App Store pages.
