Intuitive Flutter Codebase
Tags: flutter, mobile, beginners, dart
Published: 2021-10-20 00:13:26

    I'd have to first of all start by saying, there's no perfect 
    approach to having the best Flutter codebase. Phew!!!, with that 
    out of the way, here's a less complicated and easy to use approach 
    to structuring your Flutter Codebase.

## Table Of Contents
  * [What is Flutter?](#flutter)
  * [What is VsCode?](#vscode)
  * [Installing Dart Extension](#extension)
  * [Create a New Flutter App](#app)
  * [Structuring the Folders](#folder)
  * [Importance of Using this Approach](#approach)

## ✨ What is Flutter? <a name="flutter"></a>

 Flutter is Google's UI toolkit for building beautiful, natively compiled applications for mobile, web, desktop, and embedded devices from a single codebase. [Click here](https://flutter.dev/), to know more about Flutter.
   


## 🎆 What is VsCode? <a name="vscode"></a>

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. [Click here](https://code.visualstudio.com/), to know more about VsCode.


## 😎 Installing Dart Extension <a name="extension"></a>

Before getting started with Fluuter in VsCode, you would have to first of all install the Dart extension, which will allow you work with Flutter seamlessly in your VsCode. To do so, follow the below instructions, and also use the Image below as a guide.
###

    ...
    1. In your VsCode, click on the 'double-file-like' icon, to 
       reveal your side bar.
    2. Select the 'Square-like' icon, that has it's first quadrant 
       apart to open your 'Extension market' or click 'Ctrl+shift+X'.
    3. On the search bar, enter Dart, select the first extension that 
       pops up, and install.
    4. Since I have already installed mine, it's showing 'Uninstall',       
       but yours (if you haven't installed it yet), will have the 
       'install' text instead.

![VsCode Image Guide On the installations](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c56wh0lz1hr93o7b0ntg.PNG)

## 🎈 Create a New Flutter App <a name="app"></a>

    Visit the Flutter official page, to learn how to create a new 
    application, as that is not our major concern in this article.

![A GIF file of excitment](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uf80fem0y1v9bbx58522.gif)

## 🎇 Structuring the Folders <a name="folder"></a>

Having created the project, you'd be greeted with the usual 'starter app' flutter provides. This would serve as a boilerplate. Congratulations on that.

![Structuring the Flutter Codebase](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3y71u11df7iwxzbynwjb.PNG)

From the above image, you'd noticed I numbered the structures. Those numbers corresponds to these below explanations

    ...
    1. Components
       This is found at the level of the main.dart file, which 
       provides necessary re-usable components that should be 
       universally available anywhere in the application, e.g, the 
       likes of action button, etc.

    2. Model
       This controls the structure of data you wish to use. For 
       instance, say you want to create a blog post, the title, name 
       of author, content, created_at, updated_at, etc, would form 
       the model of the blog.dart class.

    3. Providers
       If you are using the flutter provider package, this would 
       enable you split your provider helpers.


    4. Screens
       This literally means the pages of your application.


    5. Home_screen
       Lifting just the 'home_screen' as an example, it's cleaner to 
       have a folder of each screen/page you wish to implement, this 
       gives you the access to have other elements within the 
       home_screen file.


    6. Components
       This components, does the same this as the No.1, but it's 
       access is only limited to the particular screen you're working 
       on. You could see the 'body.dart', which would literally 
       contain the body of the scaffold in the home_screen.dart.

    7. Enums
       In flutter/dart, enums, would help you establish small set of 
       predefined set of values that will be used across the 
       application logic.

    8. SizeConfig
       This comes in handy, when you wish to outline sets of 
       functions, that would help calculate and return, on the fly, 
       the width and height of the device you're currently working 
       on.

    9. Theme
       This works like the themeData in the scaffold. Here you get to 
       declare some variables and User Interface settings. Some call 
       it constants.


## 🎉 Importance of Using this Approach <a name="approach"></a>

Like I earlier stated, there's no perfect way to structure your codebase, but try as much as possible to split your codes into an organized component. That way, one can easily understand your code, and would only make reference to the section at a time to fully grasp what you are writing on.

I actually stumbled upon this pattern after months of having my codebase look messy, and coming from Vue.js, my codebase is a lot cleaner than what I had in Flutter.

But after watching [Abu Anwar](https://github.com/abuanwar072) speed codes, I fell inlove with this approach, and decided to write an article on it. Please do well to check out his Repository, you'd definately learn more.