10 Flutter tips — Part 10/10

It’s been a long time since the 9th part came out, but it’s finally here:

The 10th and last part of this series is now here.

This is a special part, because we’re not only looking at packages or something, but also VSCode extensions, GitHub repositories (and of course some packages). So, exactly the same as in the first part (we’re getting a bit nostalgic again xD).

So, let’s get started!

Awesome Flutter Snippets

This extension is here to provide you with a lot of very useful Flutter snippets. There are exactly 40 snippets with functions like initState or dispose in them, but also widgets like Listview.builder (listViewB), GridView.count (gridViewC) or AnimatedBuilder (animatedBldr).

To see the full list, you can read the overview of this extension.

Fast Dart

Well, Flutter Snippets are very cool, but since we are actually programming the whole thing in Dart, we also need Dart Snippets. For this there is the rather unknown extension Fast Dart. You can find 20 snippets there, among others tc (try-catch block), ie (If-Else) or just cls (Class).

Flutter Color

This extension is very helpful and I use it several times a day. It detects in your code where you enter a color code and then shows you to the left of it what that color looks like. But that’s not all. If you then click on the box, you get a color picker with which you can select a color, which is then automatically written into the code.

Flutter Tips and Tricks

This repository is a collection of hundreds of Flutter Tips, which are all explained. You will learn there so many new widgets or you will learn how to check if a website is up or down.

Flutter Course Resources

Another repository on GitHub will teach you all the important things you need to learn in Flutter. You’ll build tons of apps there, learn about StateManagement and much more.

Highly recommended and I will definitely use this repository myself to continue learning things.

Paddinger

Everyone knows it. This widget needs a padding, and this, and this. It goes on and on like this, and the code doesn’t look pretty. But what if there is a package where you define your paddings once and then you wrap your child with a widget without writing EdgeInsets.all(8.0) every time?

Well, this exists and it’s called paddinger. It’s a bit more complicated to set up, but if you look at the docs it’s just as easy as any other package.

Instead of writing:

you can just write:

Flutter Auto Form

Well, the normal form system of Flutter is, if we are honest, very complicated. You have to write a lot of boilerplaid code and for me it’s always a task I like to put off. But, that has changed since I started using flutter_auto_form. This package is a super easy to use form system, no controller or anything. The great thing is that it makes it possible for you to automatically jump to the next field without calling that field specifically.

Now you can just use the whole thing in your widget tree like this:

Now it looks like this:

Simple Animations

Animations are something that many people hate to implement, because it’s very complicated to create them. But luckily there is simple_animations, a package that allows you to have a great choice of animations very easily to implement and you can even create your own animations. You just need to understand the package once and you can create the best animations.

This is a very simple example, but you can create much more with the package:

Supabase

Now, this tip is a very personal tip, so one person may like it and another may not. But I personally like it.

Supabase is an OpenSource alternative to Firebase, with which you have functions like databases, SQL, Authentication and much more. For authentication it even offers more external OAuth providers than Firebase.

Other disadvantages are that it doesn’t have something like Analytics or Functions, but for that you can run Supabase on your own server with Docker and Supabase is for example not allowed to delete your project without reason.

I personally use it in many small apps, but in apps where I also need Functions, I unfortunately have to resort to the more complicated provider Firebase (by complicated I mean that Supabase is easier to implement in Flutter code).

Flutter toast

The very last tip in this series is about a toast 🍞.

Okay, that was just a joke, of course. fluttertoast is a toast library that supports two types of toast messages. One requires a BuildContext and one does not.

We’ll look at the one that doesn’t require a BuildContext below:

Now this is a very simple example. You can also create custom toasts, which might look like this:

Conclusion

Now the very last part of this series is over and I am sad about it. I had a lot of fun writing these 10 articles and your feedback motivated me a lot, be it via Discord or Medium. Thank you very much!