Internet Explorer browsers are not fully supported

Step Up Your Flutter Skills - 8 Best Practices

Mad Duck Team

8 min readFeb 18, 2022.

It’s time to take a deep dive into what makes Flutter so great. This awesome framework makes it easy to build, test, and deploy beautiful mobile, web, desktop, and embedded apps from a single codebase. It can transform the app development process altogether and you'll love it from your first line of code. That’s why Flutter is one of the core tools we use for mobile development here at Mad Duck Code, and we wanted to shed some light on its best practices.

A laptope with some Flutter code on the screen.


As always, let’s start with the basics.

What is Flutter?


Flutter is a free and open-source framework made by Google and mainly used to create native mobile applications for both Android and iOS from a single codebase. This means that building any apps on these two platforms is much simpler than it used to be. And it also fully supports Linux, Windows, macOS, and other output targets — making cross-platform development a breeze.


The framework consists of both an SDK (called Dart) and the widget-based UI library. The latter contains reusable UI elements like sliders, text boxes, and buttons. It’s not OEM reliant and uses its own high-performance rendering engine to draw widgets in lieu of WebView or OEM standards.


All in all, the development is quick, simple, and allows for great flexibility when it comes to design. It’s no wonder Flutter quickly became the most popular cross-platform mobile framework, overtaking React Native.

What is Flutter Used for and Why?


Flutter can be used to build practically anything. The development is fast and intuitive. Its Hot Reloading feature supports making changes on the fly, while ahead-of-time compilation ensures a quick and seamless launch. The fact that cross-platform apps share a majority of code is a major selling point, as it allows for quick and seamless updates. In addition, the UI is gorgeous and provides almost a native feeling.


Since it’s a feature-rich and easy-to-use framework, it’s been used to develop some very popular apps. It’s no surprise that Google used its own framework to develop its apps like Google Ads, but other companies are following suit. BMW, eBay, Tencent, and many others are also using Flutter.


It’s been used to make the popular wellness app Reflectly, Xianyu retail platform, Pairing the dating app, and many more; the full list would probably double the word count of this article. Pretty impressive for a framework that exists for less than five years.

Mobile with a Flutter sign and logos of apps made in Flutter.

Linting and Code Analysis


If you want to ensure your code is error-free (or at least minimize the number of errors), Linting is a must, as it can help you identify all kinds of issues with your code. Using a linting tool can make your life so much easier. It analyzes source code and can flag bugs, style and programming errors, and even suspicious constructs. You can find various lint rules and explanations here and use them to keep your code clean and consistent. This allows you to focus on big-picture and important issues instead of getting bogged down with minor style errors.


It’s also a good idea to use linting early in order to catch all possible issues on time. Setting up the lint package is incredibly easy; all you have to do is:


  • Add the package to your pubspec.yaml file.
  • Create an analysis_options.yaml file.
  • Add the include line described in the package.

And you’re good to go!

Write Cleaner Code with the Spread Operator


The Spread operator is an incredibly useful feature that came along with Flutter 2.3. It’s great when you need conditional UI widgets, especially when they’re nested.


It uses three dots notations (...) and can be used to extend the elements of a Collection by appending, concatenating, or nesting other elements within them.


If we combine two lists like that:

List<int> list1 = [1, 2, 3];
  List<int> list2 = [4, 5];
  List<int> result = [...list1, ...list2];
  print(result);

The output will look like this:

[0, 1, 2, 3, 4, 5]

Use Scaffold Widget to Build all the Basic Elements of an App


With Scaffold Widget, you can implement the basic material design visual layout structure. With it, you have access to an AppBar, Body, Floating Action Bar, Bottom Navigation Bar, and Persistent Footer buttons. When you combine all of these elements, you get everything you need to build and craft a functional and eye-catching user interface.


You can use Scaffold Widget to create default styles for all the above-mentioned elements and it’s mainly responsible for creating a base to the app screen on which the child widgets hold on and render on the screen.

Use Safe Area to Take Care of the Phone Notch


You’ve spent a lot of time on the UI ensuring the user experience is excellent and that they get to see every bit of your content… but then it gets cut off by the phone’s notch! It’s a horrible feeling, but fortunately, you can deal with it by using the SafeArea widget. It will prevent the phone’s hardware and software solutions from encroaching on your app’s UI, ensuring a smoother experience.

Person holding a glowing bulb

Improve Productivity with Flutter Snippet


With Flutter code snippets, you can easily create commonly used Flutter classes and methods. In fact, making custom snippets for tasks you do repeatedly can save you a lot of time as you won’t have to write boilerplate code from scratch every time. Alternatively, you can use pre-built code-snippets from a variety of online sources. Just add Flutter Snippet to your preferred IDE and you’re good to go.

Use Anonymous Functions as Arguments


In Dart, you can pass functions as arguments to other functions. Anonymous functions don’t need a name and can be used directly. Here’s an example of an anonymous function in Dart where we try to get a cube for every item on a list by passing an anonymous cube function to a built-in method forEach.

main() {
 var list = [1,2,3];
 list.forEach((item) {
  print(item*item*item);
 });
}

Set the Background Image to Your Container


In case you didn’t know it already, using a Stack to set a background image for a Container isn’t the ideal solution. You can use decoration:

Container(
  width: double.maxFinite,
  height: double.maxFinite,
  decoration: BoxDecoration(   
    image: DecorationImage(
      image: NetworkImage('https://bit.ly/2oqNqj9'),
    ),
  ),
  child: Center(
    child: Text(
      'Flutter.dev',
      style: TextStyle(color: Colors.red),
    ),
  ),
),

You can swap in any image you want and can also use the box decoration properties to establish borders.

Stay Informed


If you can’t figure something out, don’t be afraid to ask. Flutter communities are very active, and you should have no trouble finding someone who has had a similar issue or can help you figure out a solution to your problem. Stack Overflow is a go-to destination, but if you can’t find what you’re looking for, you can always turn to the Flutter Google Group.


Alternatively, there are plenty of informative YouTube channels that cover Flutter coding in easily digestible segments. Flutter Explained and Johannes Milke are just some of them, and there are many general coding channels that devote videos to working with Flutter.


If you want an in-depth examination of Flutter and Dart, Dart in Action is an excellent eBook suitable for all skill levels.


Finally, our blog also contains a tutorial about implementing Scroll Offset in the Chat Component, and we’re likely to add more useful hacks as time goes on, so stay tuned!

Guy looking at a monitor with some code on it.

Wrapping Up


Flutter is amazing when it comes to developing attractive and eye-catching applications for mobile devices from a single codebase. And you can use the same codebase for websites - Flutter supports building applications for Windows, Linux, and Mac.


That’s why any developer worth their salt should strive to up their game with Flutter. It’s not that difficult to learn, and it offers a lot for the time invested.