Welcome to the world of Flutter, where creating cross-platform applications is a breeze with the right tools. This blog will walk you through how to utilize a Boilerplate Project built on Flutter using MobX and Provider, tailor-made to help you get a jump start on your mobile or web applications.

Getting Started

This Boilerplate contains the core structure and minimal implementation required for developing a new library or project. It comes equipped with essential components such as app architecture, themes, constants, and necessary dependencies. By leveraging this boilerplate, you can save time and maintain a standardized code pattern across various projects.

How to Use the Boilerplate

Follow these simple steps to get started with the Flutter Boilerplate Project:

• Step 1: Download or clone the repository using the link below: github.com/zubairehman/flutter-boilerplate-project.git
• Step 2: Navigate to the project root directory and execute the following command in the console to get the required dependencies: flutter pub get
• Step 3: This project employs an 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, use the watch command to keep the source code synced automatically:

  flutter packages pub run build_runner watch

Hiding Generated Files

To keep your project tidy by hiding generated files, follow these instructions based on your IDE:

• In Android Studio:
  1. Go to Preferences > Editor > File Types.
  2. Paste the following lines under the ignore files and folders section:

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

• In Visual Studio Code:
  1. Navigate to Preferences > Settings and search for Files: Exclude.
  2. Add the following patterns:

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

Boilerplate Features

This boilerplate comes with a variety of features to kickstart your project:

• Splash Screen
• Login Functionality
• Home Screen
• Routing
• Theme Customization
• Dio (for HTTP requests)
• Database integration
• MobX for reactive state management
• Provider for state management
• Data Encryption
• Validation mechanisms
• Code Generation
• User Notifications
• Logging
• Dependency Injection
• Dark Theme Support (new)
• Multilingual Support (new)
• Provider Example (new)

Upcoming Features

• Connectivity Support
• Background Fetch Support

Understanding the Code Structure

Think of the Boilerplate Project as a blueprint for a house. Just as a blueprint outlines where to place walls, doors, and windows, the Boilerplate gives you a structured layout for your Flutter application. The code consists of well-defined sections such as:

• Constants: This is where you define all your important variables like themes and API endpoints.
• Data: Enclosed within this section lies the logic of your application, managing how data is stored, retrieved, and communicated between the different layers.
• Stores: This acts as the backbone of the application, where your app’s state is kept and shared across different components.
• UI: This part houses all the visual structure of your app, separated into various screen directories.
• Utils and Widgets: Here, you’ll find common functions and components that make your coding life easier, such as reusable buttons and text fields.
• Routes: This file organizes all the navigation pathways of your app.
• Main: The central hub where all the application-level configurations are laid out.

Troubleshooting

If you encounter issues during setup or while utilizing the boilerplate, consider the following troubleshooting steps:

• Ensure that you have Flutter installed correctly on your machine. Run flutter doctor to check for any existing issues.
• Verify that all dependencies are correctly fetched by checking the console for any error messages after executing flutter pub get.
• If file generation fails with build_runner, ensure you have added the necessary configuration and that your development environment is set up appropriately.
• If problems persist, refer to the wiki for further insights.
• For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

Conclusion

Getting started with the Flutter Boilerplate Project simplifies the development of your applications. It offers a robust structure and essential features that can significantly reduce your setup and development time. At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.