6 Tips for Your Next Flutter Project
With more companies shifting towards cross-platform development, Flutter is inevitably on its way to becoming the most preferred cross-platform technology. Most of the Flutter updates include improved platform compatibilities which contribute to its growth.
Flutter is an open-source UI software development kit created by Google. It is used to develop cross platform applications for Android, iOS, Linux, macOS, Windows, Google Fuchsia, and the web from a single codebase.
If you’re new to Flutter, follow the instructions in this link to complete installation and to get started with Flutter.
If you have just started with Flutter or built applications in Flutter, then these tips will surely help you at some point, maybe in your next project. Feel free to share your tips in the comments.
1. Build apps that are less package dependent
Do not rely heavily on packages as they can deprecate certain features leaving you with additional work to create a fix.
Although it depends on the complexity of the feature, certain packages like adding animation to containers can be avoided as this can be something you can code from scratch. This will let you to have more control over the widget allows you to make changes to it easily.
Regularly update the pubspec.yaml file, remove packages that have been added earlier but are not used in the project anymore.
2. Customize repeating widgets
Widgets that keep repeating in the project can be extracted into a separate widget and used in multiple places. This avoids re-writing the same widget and saves time and effort.
Let us take an example of a screen with 4 buttons. Instead of writing the button code with onPress, colour, and other properties 4 times, I will extract the button into a separate widget and then pass these variable properties.
The CommonButton widget is called 4 times, and every time it is called, onPress, colour and text properties are passed. Let us now look at the code for CommonButton widget:
The variables will be different every time the CommonButton is called, and this is how we can reuse the CommonButton widget multiple times in the project.
3. Use log() over print()
Flutter 2.5 and above comes with the flutter_lints package, a package that identifies possible problems in your dart source code.
Every time you use print(), it shows a warning that reads “Avoid ‘print’ calls in production code”. The package flags it as a warning because print logs in release builds might log sensitive information. In order to avoid this, use log(), dart’s built-in function, which helps in finding errors in the code, checks for performance issues, coding styles, and formatting.
4. Stateless or Hooks over Stateful widget
Stateful widgets cause more load on the application compared to Stateless and Hook widgets as they are involved in rebuilding the widget.
Avoid using Stateful widgets as much as possible. If you are new to Flutter Hooks, I have written an article where I explain how to use Hook widgets over Stateful widgets.
5. Common file for constants
A common file to place all constants, such as Colours, Asset strings, Decorations, TextStyles can make the entire process of designing smooth.
Here is an example of a constants file,
Now throughout the program, you don’t need to define a constant every single time. Define it once in constants.dart file and use it in multiple places. You can reuse the constants file for multiple projects.
6. SizedBox widget for no widget
Use SizedBox with 0 height to hide a widget.
In the below code, I only want to show the text widget when showButton property is true, otherwise a SizedBox widget with height 0 will be drawn, in short, nothing will be shown in UI if showButton is false.
Another approach to show/hide widgets is using Visibility() widget.
Following Text widget will only be shown if index is 0 (visible is true), otherwise, the Text widget becomes invisible (visible is false).
Do you have a tip that you want to share? Feel free to leave them in the comments and share as much if you found it helpful!
