10 Flutter Tips I Learned After 3 Years of Flutter Development

Here are some of the tips and tricks I discovered over my three years of making Flutter applications and content. I am positive that they will improve your workflow if you don't already know about them.

You can follow me on twitter: @robertbrunhage This article was originally posted at robertbrunhage.com

1. Use a Lot of Packages

This may seem counterintuitive, but for a lot of people, just being done with a project is the first step so that you get actual users testing out your application. Over time, when the application is published and you are getting feedback, that is when you should look over the packages and replace them with your own code to have more control.

You can find all the packages over at Pub.dev.

2. Utilize Snippets

A while back, I only used the provided snippets for things like StatelessWidget, but when you actually make custom snippets for tasks you do over and over again, you will save a ton of time! I will show an example of snippets. These originally came from FilledStacks and I have been using them ever since!

If you are using VSCode, you can just hit F1, search for "Snippets," and you should find the "Configure user snippets." Add a file to your liking and the snippet code of your choice. Below is my testing snippet:

{
  "Main Test Suite Setup": {
        "prefix": "testm",
        "body": [
            "import 'package:flutter_test/flutter_test.dart';",
            "",
            "void main() {",
            " group('${1:${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/g}} -', (){",
            "",
            " });",
            "}"
        ],
        "description": "Main Test Suite Setup"
    },
    "Test Group Setup": {
        "prefix": "testg",
        "description": "Creates a Test group with a test",
        "body": [
            "group('${1} -', () {",
            " test('${2}', () {",
            "",
            " });",
            "});",
        ]
    },
    "Single Test Setup": {
        "prefix": "tests",
        "description": "Creates a single test",
        "body": [
            " test('${1}', () {",
            "",
            " });",
        ]
    },
}

3. Use Linting Early

There are a bunch of different ways to set up linting, but I would just recommend setting up the lint package, which is super easy!

Add the package to your pubspec.yaml file.
Create a analysis_options.yaml file.
Add the include line described in the package.
Profit?

4. Use the Tooling

You probably already do this, but it will make it easier to follow the next tip. By using the tooling, you will simplify a lot in your life. Extract Widget is probably my favorite - and for good reason.

5. Multiple Private Widgets

Now this one can be controversial, but my approach for keeping code clean and easy to navigate is very simple. Let's say we have a big widget with a lot of nesting. Well, go ahead and try to take a piece out of that by using Extract Widget. Make it private by prefixing with an underscore as well as a good name. What you have done now is effectively just moved the code below the public version of that widget and everything has just become a lot easier to read and change. You don't need to try to figure out what that specific Container is for, as it now has a good name!

6. App Icon and Splash Screen

These two packages are huge time-savers for your projects: Flutter launcher icons and Flutter Native Splash. I recommend checking them out. They have great documentation on how to get started, which has saved an incredible amount of time.

7. Null Aware Operators

There are a bunch of different null aware operators such as ??, ??=, and more. Learning them will not only make your code cleaner and easier now, but it will also simplify a lot when null safety becomes stable in Flutter.

8. Reuse x.of(context)

As you know, when you want to use theming in Flutter, you need to write things like Theme.of(context).textTheme.bodyText1. That is fine, but if you have to do it multiple times in the same widget, I recommend moving it to the top of the build method. You can do that easily by just copying the line I wrote and putting it in a variable like this: final theme = Theme.of(context).textTheme. Now every time you need the theme, you would just write theme.bodyText1 in your widget.

9. debugPrint

Sometimes we just need more information when we are debugging - especially for network requests. So instead of using a normal print(myNetworkData), you can use debugPrint(myNetworkData). This will yield a lot more metadata for you in case you need it!

If you know about the SOLID principles, then this may already sound very familiar. Well, that is because it is. With "single-responsibility," we mean that a widget is only supposed to do one thing. Do not make mega widgets that do a bunch of different things. For example, if you noticed that you have a widget containing other widgets that make up your custom button, break that out! Extract it and make it its own separate widget. This will make it a lot more manageable and you will now know that that specific widget's only rule is to serve and handle that button.

Conclusion The ten tips in this article are taken from my YouTube video in which I share what I have learned from my experience developing apps in Flutter. Thanks for reading!