4 Quick Tips to Set Up Your New Flutter Project for Success

File → New → New Flutter Project.

Awesome feeling, right? A fresh start, a new adventure — oh the excitement!

But wait a minute…

Will you group files by features or architecture layers? Will you use build-in solution for navigation, or pick a 3rd party package? Which Flutter version will you use? You should answer all of these questions, and many more, before writing the first line of dart code.

As a Toptal mobile apps engineer & entrepreneur, this is how I set up every new Flutter project I start.

1. Upgrade Flutter, IDE, and Plugins

Before creating a new Flutter project, make sure your Flutter, IDE, and plugins are up to date.

Imagine trying to build Burj Khalifa with the tools from the stone age. A bit silly, right? Well, so is building mobile apps with outdated Flutter & tools version.

1. Run flutter upgrade to upgrade Flutter. This will update dart as well.

2. Update your IDE - Android Studio, VS Code or vim (who uses vim?!)

3. Update IDE plugins for Flutter & dart

Now you’re ready for the next step.

2. Pick a Folder Structure

What is the best folder structure?

“I know - it’s grouping by features”, a Flutter developer shouts. “Nonsense, you should group by architecture layers”, another one screams. “You are both wrong! Flat hierarchy is the way to go”, a masochist shouts.

The funny thing is — they are all right.

The best folder structure is the one that works for you. Just pick one and stick with it. For me, that’s grouping by features, then by layers.

Here’s an example:

/user/ui/page/user_page.dart
/user/ui/widget/user_card.dart
/user/model/user.dart
/user/repository/user_repository.dart
...
/auth/bloc/auth_cubit.dart

And these are the inner folders I use:

1. model - Plain old dart object

2. bloc - Business logic. Your UI layer should communicate only with this layer.

3. repository - Abstract API layer that the bloc layer communicates with. For simple projects, it can contain the implementation. For complex scenarios, it delegates implementation to provider

4. provider - Low level implementation logic. This is where you would put database calls.

5. ui - I divide UI folder into these subfolders: page, dialog, widget.

Bonus points if you figured out the state management package I’m using.

3. Pick a State Management Strategy

Just use flutter_bloc.

Yes, riverpod is getting popular. And while you can probably get away with using provider, GetX, Redux, or even StatefulWidget — this is why I think flutter_bloc is the one package to rule them all.

1. Bloc has amazing documentation.

2. Bloc has 2 state management classes to choose from: Cubit (for smaller projects, and a great starting point) and Bloc (for more demanding ones).

3. Accessing a bloc requires BuildContext. This forces you to separate layers, as you' can’t access a bloc globally, like some other packages let you.

4. Blocs and cubits are reactive. You can listen to them, and they’ll call your build method on state change. To rebuild only in certain scenarios, consider using context.select<Bloc, Result>.

5. Bloc is mature.

Just give flutter_bloc a try. You’ll be amazed!

4. Use the Linter

Flutter’s default linter is useful.

It can catch code smells, errors, and potential crashes as you write them. If you see a wiggly line with a warning message below your code — don’t ignore it.

There will be an explanation message, a potential solution, and a link to read more in the documentation. Thank you very much!

Here are 3 commands I use to check my code right before creating a pull request.

1. flutter analyze - This will check your code using linter.

2. flutter format -o none --set-exit-if-changed lib - Use this command to check your code formatting. It will not make any changes.

3. flutter format lib - Format your code so that it meets Flutter standards.

5. BONUS: Generate App Icons

So many sizes. So many formats.

Luckily, a Googler made Icon Kitchen for us, which can be used to generate icons for Android, iOS, web — and more! And best of all, the tool is completely free.

No more wasted hours.

And just like that, your new Flutter project is set up for success.

Now it’s time to write some code.

---

Want me to launch your MVP in 4 weeks? Apply here

Otherwise,

You can find me on Linkedin or Twitter, if you'd like to follow my journey. To get an alert when I write something new, click the Subscribe button.