By using our website you agree with ourPrivacy Policy.

Post Details

A Journey Through Flutter: Building Your First Flutter App with Monday Hero Starter Project

N
Nazli Temurtas

18 Jul 2023

cover

Flutter has made waves in the tech world with its simplicity, efficiency, and cross-platform capabilities. If you're new to the world of Flutter, welcome aboard! In this article, we'll guide you through setting up your first Flutter application with Monday Hero's Starter Project.

The beauty of the Monday Hero's Starter Project lies in the fact that it not only serves as a real-world project base but also introduces you to best practices right from the get-go. Its unique design-to-code synchronization feature saves you significant time, usually spent in manually translating design into code.

Step 1: Creating Your First Flutter App with Monday Hero Starter Project

Creating a new Flutter project is as simple as running the flutter create command, but this provides you with a minimalistic app structure. From there, it's up to you to structure your project, set up localization, theming, routing, and so on.

Enter the Monday Hero's Starter Project - a comprehensive project template pre-configured with a well-structured directory layout, support for localization, a robust theming system, and more. And the best part? Getting started is just as straightforward.

To create your first Flutter app with Monday Hero Starter Project:

# Clone the repository
git clone https://github.com/mondayhero/flutter-starter-project.git
# Navigate to the project root
cd mondayhero-starter-project
# Get the required dependencies
flutter pub get
# Build and run the project
flutter run lib/main.dart

Voila! You have your first Flutter app ready, filled with best practices and helpful features.

Step 2: Understanding Your New Flutter Project Structure

The Monday Hero Starter Project comes with a well-structured directory layout, designed to help you manage your project effectively. This structure keeps your code organized, separates concerns, and makes navigating through your files easier. Let's take a look at the folder structure:

mondayhero-starter-project
ā”œā”€ā”€ assets
ā”‚   ā”œā”€ā”€ fonts
ā”‚   ā”‚   ā”œā”€ā”€ **.otf
ā”‚   ā”‚   ā”œā”€ā”€ **.ttf
ā”‚   ā”œā”€ā”€ images
ā”‚   ā””ā”€ā”€ translations
ā”œā”€ā”€ lib
ā”‚   ā”œā”€ā”€ core
ā”‚   ā”‚   ā””ā”€ā”€ localization
ā”‚   ā”‚       ā””ā”€ā”€ mh_localization_asset_loader.dart
ā”‚   ā”œā”€ā”€ design-system
ā”‚   ā”œā”€ā”€ route
ā”‚   ā”œā”€ā”€ widgets
ā”‚   ā”‚   ā””ā”€ā”€ **.dart
ā”‚   ā”œā”€ā”€ main.dart
ā”‚   ā””ā”€ā”€ theme
ā”‚       ā”œā”€ā”€ app_colors.dart
ā”‚       ā”œā”€ā”€ app_text_styles.dart
ā”‚       ā””ā”€ā”€ mh_generated
ā”‚           ā”œā”€ā”€ mh_app_colors.dart
ā”‚           ā””ā”€ā”€ mh_app_text_styles.dart
ā””ā”€ā”€ pubspec.yaml

As you can see, I've added the widgets directory under lib, which should contain all the custom Flutter widgets you develop for your application.

Under the core directory, we have a localization subdirectory where the mh_localization_asset_loader.dart file resides. This file is crucial for the localization feature in your Flutter application, helping it support multiple languages.

Monday Hero Starter Project not only provides a well-organized project base, but it also syncs with your design files and automatically updates the corresponding code files. All the colors and text styles from your design document used in your app are automatically translated into code and placed in the mh_generated directory under theme.

Whenever you make a change in your design screens and sync them with Monday Hero, your Flutter project gets updated automatically in the respective mh_generated directories. This auto-sync feature saves you significant time, reduces the risk of manual errors, and keeps your project in sync with the design.

Step 3: Synchronizing Your Screens and Components with Monday Hero

One of the key features of Monday Hero is its ability to sync your design screens and compo from design tools like Sketch, Adobe XD, or Figma directly into your Flutter project. This eliminates the tedious process of manually translating design into code, making the development process faster and more efficient.

To sync your screens, you first need to download the Monday Hero desktop app and connect it with your design tool. Once connected, you can simply select the screens and components you want to sync and then export them to your project directory.

Once you synch your screens or components, any changes made are updated in the respective mh_generated, widgets, and screens directories.

Just imagine how much time this feature can save you, not to mention the reduction of manual errors and the assurance that your project always stays in sync with the design.

This auto-sync feature is where the Monday Hero Starter Project really shines and stands out from a regular flutter create project.

Step 4: Customizing Your Project

One of the most powerful features of the Monday Hero Starter Project is the ability to customize and override the generated colors and text styles.

For instance, let's say you want to change a color used in your app or introduce a new custom color. You can easily do so in the app_colors.dart file:

/// Add your custom color or override generated colors
class AppColors extends MHAppColors {
  Color get customColor => const Color(0xFFAAFFAA);
}
final appColors = AppColors();

This way, you have full control over your project's look and feel while still enjoying the benefits of Monday Hero's automatic synchronization.

The same approach can be applied to text styles as well, giving you a high level of customization power over your project.

Wrapping Up

Embarking on the journey of creating your first Flutter application with the Monday Hero Starter Project introduces you to Flutter app development, revealing how efficient and streamlined the process can be when your design and code stay in perfect sync.

Instead of starting from scratch with flutter create, the Monday Hero's Starter Project gives you a robust, scalable, real-world project base, complete with best practices, easy customization, and a unique design sync feature.

Revel in the beauty of Flutter development, coupled with the simplicity and efficiency of Monday Hero. Your adventure into app development is just at its dawn, and the supportive Flutter community is here to cheer you on. With every line of code, and each widget you add, you're one step closer to bringing your app idea to life. Start this journey with Monday Hero and Flutter by your side, making your app development process easier and more efficient.

Happy coding!