Introduction

Well, recently I wrote about 5 mistakes that every new Flutter developer must avoid. Looks like a lot of people related to that post so I decided to add 5 More mistakes that probably every new Flutter developer makes.

If you have stumbled upon this article before making any of the mistakes then congratulations! Read this article and try to avoid these habits in your Flutter development journey.

Mistake 1

Not learning from in-built documentation. This is probably one of the biggest mistakes people make. Not only beginners, but even people who have a fair amount of experience don't read the in-built documentation.

What I mean by in-built documentation is that Flutter has created documentation inside the Dart code of a widget. For example, look at the image below.

If you hover on the ListTile and tap Ctrl+B, you will be taken to its source code. There, you will see tons of comments explaining what each line does. You will find this for every Widget available. If you are stuck somewhere, READ the internal docs first and then search for answers on Stackoverflow.

Mistake 2

Using Listviews over Listview. builder. Well, this is a mistake that newbies make. Even I used to do this until I got the hang of builders.

Don't do something like this

// A code to render 5 containers in a list
ListView(
                  children: [
                    Container(
                      color: Colors.red,
                    ),
                    Container(
                      color: Colors.red,
                    ),
                    Container(
                      color: Colors.red,
                    ),
                    Container(
                      color: Colors.red,
                    ),
                    Container(
                      color: Colors.red,
                    )
                  ],
                )

Instead, do this

// A code to render 5 containers in a list
ListView.builder(
                    itemCount: 5,   // tells how many items should we have in the list
                    itemBuilder: (context, index) {
                 // return whatever widget you want to return.
                      return Container(
                        color: Colors.red,
                      );
                    },
                )

See the difference in the neatness and efficiency of the code?. The index variable is used to track the widget number. For example, if there are 5 items, then index = 0 will represent the first item, and so on...

Mistake 3

Overusing packages. Erm, if you have read the first part of this series then there I said that you must use packages wherever you can but I also said that use it where it saves a good amount of time and code.

Do not use packages to edit your snack bars and stuff like that. You can do it on your own by just adding 5-7 lines of code. Understand the trade-off. Adding 5-7 lines of code will only take seconds or probably a minute or two. You don't need to add packages and increase the app size for that. You have to use packages where it will take probably a good amount of time or thinking to implement the feature. Like building a GPS feature from scratch.

Mistake 4

Hard coding styles in your text. This is also a mistake that even the intermediate folks make. This is not exactly a mistake but a bad coding practice I would say.

Whenever you are using a style attribute in your text, do not do this.

const Text(
 "Log In with Magic Link",
  style: TextStyle(
  color: Colors.white,
  fontSize: 18,
  fontWeight: FontWeight.bold),
),

Instead, do this. This makes your text-style reusable and makes the code clean and efficient

// Create a variable above your Build method
TextStyle s1 =  const TextStyle(
color: Colors.white,
fontSize: 18,
fontWeight: FontWeight.bold,);

// Then do this
child: Text("Log In with Magic Link", style: s1),

Mistake 5

Not using linting. Well, beginners don't even know what linting is, so let me explain.

Linting is the process of checking the source code for Programmatic as well as Stylistic errors and unformatted code. You can find the current rules in the analysis_option.yaml file. This file is present in your root directory. It is advised to use this package for the best linting environment. You can read the documentation and configure it in your project. It is super easy to follow and configure.

Bonus Tip

If you are guilty of doing these mistakes then you are on the right track, my friend. Almost everyone makes such mistakes in the beginning and the rest of them read such articles beforehand. I have probably made almost all the 10 mistakes in my Flutter journey.

Conclusion

With this, we conclude our article on the 5 mistakes every new Flutter developer must avoid. If you liked the article, then do share it with other friends and drop me a follow.

Keep following CSwithIyush for tutorials, tips/tricks on Flutter and DSA.