Build A Well-structured Flutter App With Mason Brick

Introduction

Building a well-organized Flutter app is crucial for efficient development and maintenance. This blog explores the utilization of Mason brick to structure Flutter projects. We will cover the installation of Mason CLI and the Flutter project and A-project Mason bricks. These bricks set up a project with a solid structure, incorporating Riverpod, go_router, Google Fonts, and a custom theme, facilitating a smooth start for your next Flutter endeavor.

Flutter and Mason CLI

Flutter, an open-source UI software development kit, excels in crafting high-performance, high-fidelity apps for both iOS and Android. Mason CLI, a handy tool for Flutter projects, aids in creating new projects and installing dependencies seamlessly.

Getting Started with Mason CLI

Before diving into Flutter project creation with Mason CLI, ensure Dart is installed on your machine. If not, download it from dart.dev.

Install the Mason CLI using the following command:

dart pub global activate mason_cli

Next, install the necessary Mason bricks globally:

# Install flutter_project brick
mason add -g flutter_project
 
# Install a_page brick
mason add -g a_page

Now, create a new Flutter project:

flutter create project_name

Navigate to the project directory and run the Flutter Project brick:

mason make flutter_project

Answer a few questions prompted by the script, such as Material 3 usage, light and dark theme colors, and brick override confirmation.

Project Structure

After confirmation, the script enhances your project by adding Flutter Riverpod, Google Fonts, and Go Router packages. The resulting project structure is well-organized, featuring:

lib
    ├── data
    │   ├── model
    │   │   └── model.dart
    │   └── service
    │       └── service.dart
    ├── global
    │   ├── global.dart
    │   ├── theme
    │   │   ├── custom_theme_data.dart
    │   │   ├── dark_theme.dart
    │   │   ├── light_theme.dart
    │   │   ├── theme.dart
    │   │   └── theme_helper_service.dart
    │   └── widget
    │       └── widget.dart
    ├── main.dart
    ├── page
    │   ├── error
    │   │   └── error_page.dart
    │   └── home
    │       ├── controller
    │       │   └── home_controller.dart
    │       ├── home_page.dart
    │       ├── home_provider.dart
    │       ├── section
    │       │   └── home_section.dart
    │       └── widget
    │           └── home_widget.dart
    ├── provider
    │   ├── provider.dart
    │   └── provider_logger.dart
    └── routes
        ├── app_router.dart
        └── router_provider.dart

To complete the setup, install the Flutter Riverpod package:

flutter pub add flutter_riverpod google_fonts go_router

Adding New Page

To add a new page, use the following command:

mason make a_page

Provide the new page name when prompted. The brick creates the following file structure in the lib/page/ directory:

page
└── pageName
    ├── controller
    │   └──pageName_controller.dart
    │
    ├── section
    │   └── pageName_section.dart
    │
    ├──widget
    │   └──pageName_widget.dart
    │
    ├── pageName_page.dart
    │
    └── pageName_provider.dart

A TODO file in the new page directory guides you in adding the new page to

lib/routes/app_router.dart

After hot restarting the app, you can navigate to the new page using the go_router by accessing the route using the router name.

Project Structure Analytics

Flutter's organized project structure simplifies maintenance and upgrades. Key folders include:

• lib: Source code for the application.
• data: Data-related classes and files.
  • model: Data models used in the application.
  • service: Service classes handling data.
• global: Global classes and files used throughout the application.
  • theme: Different themes used in the application.
  • widget: Widgets used in the application.
• main.dart: Main file starting the application.
• page: Different pages in the application.
  • controller: Controllers used in the application.
  • section: Sections used in the application.
  • widget: Widgets used for the pages.
  • provider: Providers used in the application.
• routes: Routing classes and files used in the application.

By following these steps, you've established a Flutter project using the Mason CLI and the Flutter Riverpod package. The combination of Mason CLI and Bricks streamlines the creation of a standard project structure for Flutter projects, saving time and effort. Happy coding!