How to Setup Folder Structure in Flutter

Basics, Flutter Login App

In this flutter tutorial, we will learn how to set up a folder structure in a flutter, where to put assets of our flutter project & how to create a flutter package that can be reused in any other flutter app.

Prerequisite

This is the 2nd tutorial of our Flutter Login App Series. The next tutorial is about how to set up a theme in a flutter.

Most of the time we start creating apps without even thinking about folder structures. But along the way, we start realizing that finding some file in the messy structure becomes hectic.

When building large Flutter apps, one of the first things we should decide is how to structure our project.

This ensures that the entire team can follow a clear convention and add features in a consistent manner.

Watch Youtube tutorial

 

Types of Folder Structures in Flutter

Flutter is a flexible platform, as it does not restrict its users to design folder in a specific way, whereas, it allow us to design a folder or project structure that suit our requirements, flexibility and need.

In flutter, we can adopt any folder structure we like and can also use MVC, MVVM combined with the folder structures defined below.

As there is no specific structure in flutter so in general, flutter community adopts 2 types of flutter structures:-

  1. Feature First
  2. Layer First

Lets talk about each of them in detail.

1. Layer based Flutter Structure

To keep things simple, suppose we have only two features in the app.

If we adopt the layer-first approach, our project structure may look like this: 

Flutter Project Structure Feature-first or Layer-first

2. Features based Flutter Structure

The feature-first approach demands that we create a new folder for every new feature that we add to our app. And inside that folder, we can add the layers themselves as sub-folders.

Using the same example as above, we would organize our project like this:

 

Flutter Project Structure Feature-first or Layer-first

How to create a Custom Package in Flutter

While creating flutter apps, there are many features that need to be reused over and over again in other systems.

Specially, if you are working in a software house, or in some company where you don’t want to redo the development, we can create Packages in flutter.

Flutter packages can be created any where in the project structure but the recommended location to create a flutter package is under root folder or we can create folder called packages and in it we can create our packages.

Package that we will create in flutter app series will be auth_repository.

To create a package in flutter, follow the following steps:-

  1. Open terminal
  2. Terminal should point out to your location where you want to create your package
  3. Write the command flutter create –template package package_name
flutter create --template package auth_repository

CODING with T

🚀 Supercharge your Flutter skills! Subscribe to my YouTube channel now for mind-blowing coding insights, expert tips, and exclusive content. Don’t miss out!

23 - Product Detail Screen, How to create Products Details Screen in Flutter. Flutter eCommerce app UI Design

Source code

COURSES

Flutter E Commerce App Modern and latest
Flutter Login App UI Source Code - Flutter Complete App - Flutter App Design - Flutter App 2023 - Complete Flutter App 2023
Learn flutter from scratch in 4 hours - Flutter Crash Course - Coding with T

Learn Flutter

1.2 # How to install flutter on android studio 2022 - Flutter Basic Crash Course
2.2 - Add Image in Flutter - Assets Network- Flutter Basic Crash Course 2022

flutter Design

How to create a Custom Shape in Flutter. Flutter E Commerce app Design. Ecommerce app design Flutter. Flutter clippath tutorial
How to create a Custom Appbar in flutter. Custom Appbar Design. Flutter App Design
16 - Product Card and Grid Layout, How to create a Grid View in Flutter. How to add Products in GridView Layout. Flutter eCommerce app UI Design
Bottom Navigation bar in Flutter. Flutter Material 3 bottom navigation bar. How to design background color of Flutter bottom navigation bar. Flutter ecommerce app design
23 - Product Detail Screen, How to create Products Details Screen in Flutter. Flutter eCommerce app UI Design

Flutter Backend

33 - How to Setup Firebase - Firebase Basics - Flutter Firebase - Flutter ecommerce app with firebase as backend
38 - How to Sign-in with Google in flutter Firebase, Firebase Basics, Flutter Firebase, Flutter ecommerce app with firebase as backend
40 - Flutter Firebase CRUD,  Firebase Basics, Flutter Firebase, Flutter ecommerce app with firebase as backend
Access Admin Panel, Premium Tutorials, Live Chat, 50% off Codes, and More on Patreon!
This is default text for notification bar