16th Feb 2024
u/monzim
Explore using Mason brick to structure Flutter projects—install Mason CLI, Flutter project, and A-project Mason bricks. Create a streamlined project with Riverpod, go_router, Google Fonts, and a custom theme. Dive into your next Flutter project effortlessly.
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, 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.
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.
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
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.
Flutter's organized project structure simplifies maintenance and upgrades. Key folders include:
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!