Intuitive Flutter Codebase

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?
• What is VsCode?
• Installing Dart Extension
• Create a New Flutter App
• Structuring the Folders
• Importance of Using this Approach

✨ What is Flutter?

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, to know more about Flutter.

🎆 What is VsCode?

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Click here, to know more about VsCode.

😎 Installing Dart Extension

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.

🎈 Create a New Flutter App

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

🎇 Structuring the Folders

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

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

...


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.
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.
Providers

If you are using the flutter provider package, this would 

enable you split your provider helpers.
Screens

This literally means the pages of your application.
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.
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.
Enums

In flutter/dart, enums, would help you establish small set of 

predefined set of values that will be used across the 

application logic.
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.
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

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 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.