BloilerplateProject - A boilerplate project created in flutter using MobX and Provider

Overview

Boilerplate Project

A boilerplate project created in flutter using MobX and Provider. Boilerplate supports both web and mobile, clone the appropriate branches mentioned below:

Getting Started

The Boilerplate contains the minimal implementation required to create a new library or project. The repository code is preloaded with some basic components like basic app architecture, app theme, constants and required dependencies to create a new project. By using boiler plate code as standard initializer, we can have same patterns in all the projects that will inherit it. This will also help in reducing setup & development time by allowing you to use same code pattern and avoid re-writing from scratch.

How to Use

Step 1:

Download or clone this repo by using the link below:

https://github.com/zubairehman/flutter-boilerplate-project.git

Step 2:

Go to project root and execute the following command in console to get the required dependencies:

flutter pub get 

Step 3:

This project uses inject library that works with code generation, execute the following command to generate files:

flutter packages pub run build_runner build --delete-conflicting-outputs

or watch command in order to keep the source code synced automatically:

flutter packages pub run build_runner watch

Hide Generated Files

In-order to hide generated files, navigate to Android Studio -> Preferences -> Editor -> File Types and paste the below lines under ignore files and folders section:

*.inject.summary;*.inject.dart;*.g.dart;

In Visual Studio Code, navigate to Preferences -> Settings and search for Files:Exclude. Add the following patterns:

**/*.inject.summary
**/*.inject.dart
**/*.g.dart

Boilerplate Features:

  • Splash
  • Login
  • Home
  • Routing
  • Theme
  • Dio
  • Database
  • MobX (to connect the reactive data of your application with the UI)
  • Provider (State Management)
  • Encryption
  • Validation
  • Code Generation
  • User Notifications
  • Logging
  • Dependency Injection
  • Dark Theme Support (new)
  • Multilingual Support (new)
  • Provider example (new)

Up-Coming Features:

  • Connectivity Support
  • Background Fetch Support

Libraries & Tools Used

Folder Structure

Here is the core folder structure which flutter provides.

flutter-app/
|- android
|- build
|- ios
|- lib
|- test

Here is the folder structure we have been using in this project

lib/
|- constants/
|- data/
|- stores/
|- ui/
|- utils/
|- widgets/
|- main.dart
|- routes.dart

Now, lets dive into the lib folder which has the main code for the application.

1- constants - All the application level constants are defined in this directory with-in their respective files. This directory contains the constants for `theme`, `dimentions`, `api endpoints`, `preferences` and `strings`.
2- data - Contains the data layer of your project, includes directories for local, network and shared pref/cache.
3- stores - Contains store(s) for state-management of your application, to connect the reactive data of your application with the UI. 
4- ui — Contains all the ui of your project, contains sub directory for each screen.
5- util — Contains the utilities/common functions of your application.
6- widgets — Contains the common widgets for your applications. For example, Button, TextField etc.
7- routes.dart — This file contains all the routes for your application.
8- main.dart - This is the starting point of the application. All the application level configurations are defined in this file i.e, theme, routes, title, orientation etc.

Constants

This directory contains all the application level constants. A separate file is created for each type as shown in example below:

constants/
|- app_theme.dart
|- dimens.dart
|- endpoints.dart
|- preferences.dart
|- strings.dart

Data

All the business logic of your application will go into this directory, it represents the data layer of your application. It is sub-divided into three directories local, network and sharedperf, each containing the domain specific logic. Since each layer exists independently, that makes it easier to unit test. The communication between UI and data layer is handled by using central repository.

data/
|- local/
    |- constants/
    |- datasources/
    |- app_database.dart
   
|- network/
    |- constants/
    |- exceptions/
    |- rest_client.dart
    
|- sharedpref
    |- constants/
    |- shared_preference_helper.dart
    
|- repository.dart

Stores

The store is where all your application state lives in flutter. The Store is basically a widget that stands at the top of the widget tree and passes it's data down using special methods. In-case of multiple stores, a separate folder for each store is created as shown in the example below:

stores/
|- login/
    |- login_store.dart
    |- form_validator.dart

UI

This directory contains all the ui of your application. Each screen is located in a separate folder making it easy to combine group of files related to that particular screen. All the screen specific widgets will be placed in widgets directory as shown in the example below:

ui/
|- login
   |- login_screen.dart
   |- widgets
      |- login_form.dart
      |- login_button.dart

Utils

Contains the common file(s) and utilities used in a project. The folder structure is as follows:

utils/
|- encryption
   |- xxtea.dart
|- date
  |- date_time.dart

Widgets

Contains the common widgets that are shared across multiple screens. For example, Button, TextField etc.

widgets/
|- app_icon_widget.dart
|- empty_app_bar.dart
|- progress_indicator.dart

Routes

This file contains all the routes for your application.

import 'package:flutter/material.dart';

import 'ui/home/home.dart';
import 'ui/login/login.dart';
import 'ui/splash/splash.dart';

class Routes {
  Routes._();

  //static variables
  static const String splash = '/splash';
  static const String login = '/login';
  static const String home = '/home';

  static final routes = <String, WidgetBuilder>{
    splash: (BuildContext context) => SplashScreen(),
    login: (BuildContext context) => LoginScreen(),
    home: (BuildContext context) => HomeScreen(),
  };
}

Main

This is the starting point of the application. All the application level configurations are defined in this file i.e, theme, routes, title, orientation etc.

import 'package:boilerplate/routes.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

import 'constants/app_theme.dart';
import 'constants/strings.dart';
import 'ui/splash/splash.dart';

void main() {
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.portraitUp,
    DeviceOrientation.portraitDown,
    DeviceOrientation.landscapeRight,
    DeviceOrientation.landscapeLeft,
  ]).then((_) {
    runApp(MyApp());
  });
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: Strings.appName,
      theme: themeData,
      routes: Routes.routes,
      home: SplashScreen(),
    );
  }
}

Wiki

Checkout wiki for more info

Conclusion

I will be happy to answer any questions that you may have on this approach, and if you want to lend a hand with the boilerplate then please feel free to submit an issue and/or pull request 🙂

Again to note, this is example can appear as over-architectured for what it is - but it is an example only. If you liked my work, don’t forget to star the repo to show your support.

You might also like...

Flutter ui boilerplate is easiest way to create new flutter project with clean code and well organized file folder.

Flutter ui boilerplate is easiest way to create new flutter project with clean code and well organized file folder.

Flutter UI Boilerplate "Sharing for fun" Flutter ui boilerplate is easiest way to create new flutter project with clean code and well organized file f

Dec 1, 2022

A flutter boilerplate project containing bloc, pedantic, hive, easy_translations and more!

A flutter boilerplate project containing bloc, pedantic, hive, easy_translations and more!

Flutter Production Boilerplate A flutter project containing bloc, flutter_lints, hive, easy_translations and more! This repository is the starting poi

Dec 26, 2022

A Boilerplate Project which adopts the concept of Clean Architecture and Modularization.

A Boilerplate Project which adopts the concept of Clean Architecture and Modularization.

Flutter-Works Boilerplate Table Of Content Overview Getting Started Requirement Setup Setup Firebase Android IOS Change Package Name Running/Debugger

Aug 28, 2022

A basic boilerplate template for starting a Flutter GetX project. GetX, Dio, MVVM, get CLI, Localization, Pagination etc are implemented.

A basic boilerplate template for starting a Flutter GetX project. GetX, Dio, MVVM, get CLI, Localization, Pagination etc are implemented.

Flutter GetX Template (GetX, Dio, MVVM) This Flutter Template using GetX package for State management, routing and Dependency Injection (bindings). We

Jan 9, 2023

Flutter starter project - boilerPlate for Clean Architecture with Domain-Driven-Design with commonly used dependencies

flutter_starter_project A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you

Jan 2, 2022

Relógio Pomodoro desenvolvido em Flutter utilizando reatividade como MOBX

pomodoro A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if this

Nov 24, 2021

A starter example of a Flutter + Mobx + Notifications

A starter example of a Flutter + Mobx + Notifications

flutter-example A starter example of a Flutter + Mobx + Firebase Nofitications Before Debug $ flutter packages pub run build_runner watch --delete-con

Feb 3, 2021

Projeto utilizado para estudo do Slidy, Flutter Modular, Mobx e novos conceitos de UI, desenvolvido com base em curso online.

my_workout A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if th

Sep 9, 2022

A powerful state machine for MobX management, that can be used in almost any application state.

A powerful state machine for MobX management, which can be used in almost any application state. It has 3 states - loading, success, error - and is pe

Oct 31, 2022
Owner
null
A boilerplate project created in flutter using MobX and Provider

Boilerplate Project A boilerplate project created in flutter using MobX and Provider. Boilerplate supports both web and mobile, clone the appropriate

Mohamed Ziada 1 Jan 20, 2022
A boilerplate project created in flutter using MobX and Provider.

Boilerplate Project A boilerplate project created in flutter using MobX and Provider. Boilerplate supports both web and mobile, clone the appropriate

Zubair Rehman 1.9k Jan 8, 2023
Neha Tanwar 4 Feb 2, 2022
Yugioh Cards Sample App using MobX, Provider, and Chopper

Yugioh Cards Sample App All data are collected from https://db.ygoprodeck.com/api-guide/. I apply MobX as state management for this app. At this time,

Fikri Razzaq 31 Dec 29, 2022
Note provider - Note App using Provider state management, Sqflite and Localization for two language Arabic and English.

note_provider Sqflite with provider statemanagement Getting Started This project is a starting point for a Flutter application. A few resources to get

Mohanned Anwar 0 Jan 1, 2022
Dusyeri provider task - Dusyeri provider task built using flutter

Düşyeri Provider Task https://github.com/alper-mf/dusyeri_provider_task/blob/7d1

null 1 May 9, 2022
In this project, I performed a RESTful API operation with MobX.

In this project, I performed a RESTful API operation with MobX. When we click on one of the listed users, the post information of that user is display

Dilber KILIÇ 11 Sep 7, 2022
A boilerplate project for Flutter using RiverPod, Dio, auto_route

Flutter Boilerplate A boilerplate project for Flutter using RiverPod, Dio, auto_route, Freezed and generated with very_good_cli. This is a very simple

Gildo Jr 9 Dec 9, 2022
Pomodoro-app - Application of a pomodoro clock with Flutter using Mobx as state management

Pomodoro App Tecnologias | Como executar | Licença Demo ✨ Tecnologias Esse proje

Dhiana Pereira 4 Oct 21, 2022
Flutter table with dio and provider - A flutter Application created for Portfolio Page

My LinkedIn https://www.linkedin.com/in/marcelo-augusto-a60b6821a/ Intro This is

Marcelo Augusto 1 Jan 18, 2022