Image for post
Image for post

Flutter: Code Organization

There is a recommended, revised edition to this which you can read here, or continue with this one.

Conner Aldrich
May 4, 2019 · 2 min read

My biggest problem when getting into Flutter development was figuring out how to manage my code. Native Android development splits UI code and Logic code between XML files and Java (or Kotlin) files respectively, but with Flutter it can all become a jumbled mess if you’re not careful. After working with Flutter for more than a year, this has been written as a simple guide to architecting your app in the best way possible for future refactoring and readability.

The main.dart

The foundation of any Flutter app, the main.dart file, should hold very little code and only serve as an overview to an app.

The widget being run by runApp should be a StatelessWidget, and the itself should be no more complicated than a simple MaterialApp wrapped in the necessary BLoC providers.

The MaterialApp itself should have no heavy code in it, instead pulling the Theme and the widget screens from other files.

SubFolders

  • The theme folder just contains a style.dart with my app theme which I access in the main.dart file
  • The services folder holds some web APIs and native interaction code
  • The components folder has custom widgets which are used in multiple different screens
  • The models folder contains files each with a custom class of an object widely used throughout the app
  • The blocs and blocprovs folders are both pretty straightforward, with each holding a file with a BLoC and a BLoC Provider in it respectively (I used this and this video to learn how to structure the files).
  • The screens folder holds many different folders, each of which corresponds to a different screen of the app. Each screen folder holds two things: a primary screen file which serves to organize each component, and a “components” folder which holds each component in its own separate file. Any piece of a screen more complicated then a few widgets should be its own component.

More Reading

After many projects of less than ideal code organization, I came up with this organization which I will be using for all of my future apps, and I suggest for you to do so as well. An example of this can be found here.

Also, if you don’t want this setup to be your default, you can learn how to make it or something else your default app template here.

Flutter Community

Articles and Stories from the Flutter Community

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store