Flutter is an open-source UI software development kit developed by Google. Flutter 3 is the updated version that allows you to build, among other things, apps for iOS and Android. Flutter uses widgets to help you build your UI. Let’s dive into ways that can help you build better apps with Flutter.
- Be aware of the concept of constraints in Flutter
The rule for the Flutter layout is: Constraints go down, sizes go up, and the parent sets the position. A constraint has a set of four doubles which are the following: a minimum and maximum height and a minimum and maximum width. A widget derives its constraints from its parent, which then passes them to its children one by one, which then informs the widget of its size.
The constraints can also be different for each child. After the children are positioned by the widget on the x and y-axis. The final step is that the widget passes its size to the parent.
Remember that child widget constraints are always defined by those of its parent and cannot be defined on their own.
- Keep Build Functions Pure
Get rid of any operation that may affect the rebuild performance. The reason for this is that certain external factors can trigger a new widget build and cause problems. Some of these factors include parent widgets recreating their child, screen resizing, etc.
- Use Operators Smartly
Use the various operators to reduce the number of codes needed. The Spread operator, for example, takes a collection, like a list, and passes it to the encompassing collection. The Cascade operator allows for a sequence of operations to be used on the same object. Null aware and Null safe operators allow the code to either avoid being run or running your code even if a variable has a null value. It comes in handy to check Null values in conditional expressions.
- Use streams only when necessary
Streams should be used only when one wants to handle multiple asynchronous events if one wants to avoid poor memory and CPU usage. Use ChangeNotifier instead to provide a reactive UI. Another way to manner to provide a change to your app state is the use of the Flutter Bloc library. Resources are available there to help you build powerful and reactive apps.
- Use raw strings
The use of raw strings to escape special characters like the backslash.
- Setup automated tests
Set up automated tests for important elements such as widgets and unit tests. Unit tests allow for the testing of a single method, function, or class. Widget tests allow for the testing of a single widget to ensure that the widget’s UI is looking and interacting as it is expected to. Unit and widget tests are both quicker and less expensive than integration tests. Changes can be tested automatically with continuous integration services.
- Prefer relative imports to absolute imports
To avoid confusion and simplify things, it is best to import libraries using relative paths to our package lib directory as they are shorter. This also ensures consistency.
- Replace Container with SizedBox
SizedBox is a simple built-in widget that has a specific size. As such, it uses fewer parameters than Container. Using SizedBox instead of Container can simplify things in case you need a placeholder. SizedBox being a const constructor allows the compiler to create slightly more efficient code. Also noteworthy is that parameters can be null for the SizedBox.
- Use the const keyword as much as possible
The const keyword indicates to the compiler a variable that will never change in the lifecycle of the code. For example, we can create one widget or variable and add the const keyword in front of it. This prevents the creation of multiple copies of the widget in the memory or makes it easier to reference the convenient object. The benefits of using the const keyword add up, especially if the app is large enough. This also leads to an increase in performance and improvement in hot reload functionality.
- Use log instead of print for debugging
This will simplify the output and help with debugging. The debugPrint function prints the whole list of log data errors, while some of them might be missing with the print function. This can happen when working on Android. Another more elegant way is to import dart: developer and use the log function. Logging information can make it easier to spot and understand errors.
Follow the style guide for Dart
Ensuring style consistency will improve the quality of the code and facilitate teamwork among developers. Use the available guides to help you with naming Boolean properties and variables for example.
For example, a line should be approximately 80 characters in length. Use dedicated APIs whenever there is a reason, even if general APIs are preferred. Divide the larger functions or widgets into multiple smaller functions or widgets. It is also better to use a widget class in place of the function returning the widget.
Leave comments in the code if it is not obvious. You can also define constants for magic numbers, so other people know their meaning. Another thing is to divide your constants into logical sections by using multiple classes to define them.
Another important thing is to delete code that is not required and not merely comment it out. And finally, use the code linter to ensure the code is readable and error-free.