Assets Generated Dynamically In Flutter

Hello Everyone!!! Today we learn about Assets Generated Dynamically In Flutter In this article, we cover the topics like how to set up the project and dependency and also how we can use dynamically generated assets in the code.

While most of us are developing applications with Flutter, we manually add the assets folder to the pubspec. yaml and make definitions here.

If you’re looking for the best Flutter app development company for your mobile application then feel free to contact us at — support@flutterdevs.com.

---

Table Of Contents

Introduction?

Add Dependency

Configuration

Conclusion

GitHub Link

---

Introduction?

Flutter does not offer such a tool out of the box. Fortunately, there’s FlutterGen, a Flutter code generator for your assets that helps remove all string-based APIs in your app.

An asset is any file bundled and deployed with your application for accessing at runtime. Assets can be in the following forms:

• Images
• Svg
• Fonts
• Colors

To load assets in your Flutter app, you have to reference the asset using path strings, which is not safe. The FlutterGen package helps remove all string-based APIs in your app by generating code for all your assets.

We only add icons, images, fonts, and colors in the assets directory like:

Add Dependency:

Add build_runner and FlutterGen to your package’s pubspec.yaml file:

dev_dependencies:
build_runner:
flutter_gen_runner:

Install FlutterGen

$ flutter pub get

Use FlutterGen

$ flutter packages pub run build_runner build

Configuration:

FlutterGen generates dart files based on the key flutter and flutter_gen of pubsec. yaml. We will install it as part of build_runner.

Add build_runner and flutter_gen as part of your dev_dependencies in the pubsec.yaml file:

dev_dependencies:
build_runner:
flutter_gen_runner:

Run the command below in your root app directory to install FlutterGen:

$ flutter pub get

The default configuration can be found here:

name: auto_generated_assets_demo
description: A new Flutter project.
version: 1.0.0+1

environment:
sdk: '>=2.19.6 <3.0.0'
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^1.0.2
flutter_svg: ^2.0.5

dev_dependencies:
flutter_test:
sdk: flutter
flutter_lints: ^2.0.0
build_runner: ^2.3.3
flutter_gen_runner: ^5.3.1

flutter_gen:
output: lib/resources/ # Optional (default: lib/gen/)
line_length: 80 # Optional (default: 80)

integrations:
flutter_svg: true
flare_flutter: true
rive: true

colors:
enabled: true
inputs:
- assets/colors/colors.xml
assets:
output:
enabled: true
package_parameter_enabled: true
style: camel-case

flutter:
uses-material-design: true
generate: true
assets:
- assets/icon/
- assets/images/

fonts:
- family: Domine
fonts:
- asset: assets/fonts/domine/Domine-Regular.ttf
- weight: 400
- asset: assets/fonts/domine/Domine-Medium.ttf
- weight: 500
- asset: assets/fonts/domine/Domine-SemiBold.ttf
- weight: 600
- asset: assets/fonts/domine/Domine-Bold.ttf
- weight: 700

Generate code for assets:

Run flutter packages pub run build_runner build in your root app directory. This command will generate the files for related assets in the lib/res folder. In this case, since three parsers are specified, assets, fonts, and colors, three files are generated for each:

• assets.gen.dart — contains generated code for your image, video, animation, and JSON assets
• fonts.gen.dart — contains generated code for your font assets
• colors.gen.dart — contains generated code for your color assets

Use the generated code:

After the command run the files are generated successfully

You will have to add the file imports to the relevant layout files:

import '../resources/assets.gen.dart';
import '../resources/fonts.gen.dart';
import '../resources/colors.gen.dart';

• SVG

Assets.icon.google
.svg(color: ColorName.cranberry, height: 350)

• Images

Assets.images.staging.image(),

When you change the location or name of your image, it will be enough to run the command again.

Conclusion:

You have gone through the type of assets and how they are accessed in Flutter using string paths. You are now able to install and use FlutterGen to:

• Remove string references to assets throughout your app
• Generate asset classes and static variables
• Load your assets in a type-safe way
• Customize the style of asset generation

❤ ❤ Thanks for reading this article ❤❤

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

---

GitHub Link:

You can check out FlutterGen on GitHub. We hope you enjoyed this tutorial!

GitHub – rahul-t-aeologic/auto_generated_assets_demo: Auto generated assets project
A new Flutter project. This project is a starting point for a Flutter application. A few resources to get you started…github.com

---

Feel free to connect with us:
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a Flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! For any flutter-related queries, you can connect with us on Facebook, GitHub, Twitter, and LinkedIn.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.

---