Generating and Managing Assets in Flutter Using "flutter_gen"

Peace upon you,

In Flutter, assets like images, fonts, icons, and animations play a significant role in crafting visually appealing user interfaces. Managing these assets efficiently, especially in a large-scale project, can be challenging. A common approach is to utilize flutter_gen with a custom design-system package, which includes reusable UI elements, fonts, colors, themes, and more, you can streamline the process of asset management in your app. This article will guide you through the steps of integrating these tools effectively..

What Is flutter_gen?

flutter_genis a code generator for Flutter assets. It automatically generates Dart code to access assets in a strongly-typed way, reducing the likelihood of errors and simplifying the management of large numbers of assets.

Key Benefits:

• Type-safe access to assets, fonts, colors, and more.
• Auto-generated asset classes, eliminating the need to hard-code asset paths.
• Easy integration with Flutter’s asset system.

1.Organizing Assets in a Custom Design-System Package

As your project grows, managing assets in a single project folder can become tedious. One way to manage this complexity is to create a custom design-system package that holds all your reusable design elements, including fonts, icons, and images.

Steps to create a design-system package:

• Step 1: Create a new Flutter package Run the following command to create a new package:

flutter create --template=package design_system

. Step 2: Add assets to the package Within the design_system package, create an assets directory (or any other preferred directory structure like icons, lottie, images), and add packageflutter_gen .

Inside the pubspec.yaml of your design_system package, define the assets like this:

dependencies:
  flutter:
    sdk: flutter
  # Your other dependencies

dev_dependencies:
  build_runner: ^2.4.6
  flutter_gen_runner: ^3.0.2

flutter_gen:
  assets:
    enabled: true
    package_parameter_enabled: true
    line_length: 80
    output: lib/gen/assets.gen.dart


 flutter:
  assets:
    - assets/images/
    - assets/icons/
    - assets/lottie/
  fonts:
    - family: CustomFont
      fonts:
        - asset: assets/fonts/CustomFont-Regular.ttf
        - asset: assets/fonts/CustomFont-Bold.ttf

Step 3: Accessing Assets from the Main Application To use these assets in your main project, include the design-system package in the pubspec.yaml of the main project:

Run build_runner

After setting up your assets, run the following command to generate the asset classes:

dart run build_runner watch --delete-conflicting-outputs

This will create assets.gen.dart with references to your asset files, like this:

class Assets {
  Assets._();

  static const AssetGenImage logo = AssetGenImage('assets/images/logo.png');
  static const LottieGenAnimation animation = LottieGenAnimation('assets/lottie/animation.json');
}

old
without our package

Lottie.asset('packages/design_system/assets/lottie/animation.json');

now,

with our package

Lottie.asset(
Assets.animation,

package:'design_system',

);

we can improve this by Make the custom widget for Lottie
can only take the Assets.animation,

import 'package:flutter/material.dart';

class AppLottieAsset extends StatelessWidget {
  const AppLottieAsset(
    this.image, {
    this.width,
    this.height,
    this.fit = BoxFit.contain,
    super.key,
  });

  final String image;
  final double? width;
  final double? height;
  final BoxFit fit;

  @override
  Widget build(BuildContext context) {
    return Lottie.asset(
      image,
      width: width,
      height: height,
      fit: fit,
      package: "design_system",
    );
  }
}

Best Practices for Managing a Design System

• Centralize Asset Management: Keep all your assets like images, icons, fonts, and animations in the design_system package. This avoids duplication and ensures consistency across different apps.
• Export Constants for Asset Paths: By defining a class like DesignSystemAssets, you make it easier to manage and access assets throughout your project.
• Update Your Design-System Package: If your assets are ever updated or changed, you only need to update them in the design-system package. This helps with maintainability, as every app using the package will have the same updated assets.
• Version Control: Ensure that you version your design-system package properly if it is shared across different teams or projects. This way, any updates to the design system can be controlled and integrated seamlessly.

Benefits of Using a Design-System Package for Assets

• Reusability: Once the design system is created, it can be reused across multiple projects, ensuring consistency and reducing redundant work.
• Easier Updates: If you need to change any assets (for example, updating the company logo), you only need to do it once in the design-system package, and all apps using the package will reflect the change.
• Consistency: A design-system package promotes consistent branding and UI patterns across your apps, making them visually cohesive.

Conclusion

A custom design-system package in Flutter is an effective way to centralize UI components, fonts, colors, and assets, ensuring consistency and reusability across your app. It simplifies the process of managing assets, makes it easier to implement updates, and promotes a clean, maintainable codebase, Flutter Gen is a tool that helps you generate code for accessing your assets. It automatically creates classes with constants for your asset paths, making your code cleaner and reducing errors.

References

https://www.youtube.com/watch?v=BmAQ4w0R9-U

Originally published on Medium on October 22, 2024.