CODEWITHSUNDEEP
flutterimagesource
Swarup
Swarup

Reputation: 85

How to add 100+ manual images in pubspec.yaml in a easy way?

I need to add quite a lot of images in my app. And plan to keep the app offline. And writing 'assets/image1.jpg' is painful to the mind. I'm new to flutter and i don't know if there is any other way. Is there any?

Upvotes: 4

Views: 2711

Answers (2)

YorkFish
YorkFish

Reputation: 87

Here is a flutter development tool named Flr(Flutter-R) can help you to auto specify image/text/font assets in pubspec.yaml and generate r.g.dart file. Then you can apply the asset in code by referencing it's asset ID function, such as:

import 'package:flutter_r_demo/r.g.dart';

// test_sameName.png
var normalImageWidget = Image(
  width: 200,
  height: 120,
  image: R.image.test_sameName(),
);

// test_sameName.gif
var gifImageWidget = Image(
  image: R.mage.test_sameName_gif(),
);

// test.svg
var svgImageWidget = Image(
  width: 100,
  height: 100,
  image: R.svg.test(width: 100, height: 100),
);

// test.json
var jsonString = await R.text.test_json();

// test.yaml
var yamlString = await R.text.test_yaml();

// Amiri Font Style
var amiriTextStyle = TextStyle(fontFamily: R.fontFamily.amiri);

Up to now, Flr has supported Android Studio Plugin, CLI, and VSCode Extension:

  1. Flr Android Studio Plugin Version

  2. Flr CLI Version

  3. Flr VSCode Extension Version

Now you can install any version Flr tool based on your development environment, and then easily add a lot of images/texts/fonts, enjoy~

Upvotes: 0

Fellipe Sanches
Fellipe Sanches

Reputation: 8135

To include an asset:

flutter:
  assets:
    - assets/my_icon.png
    - assets/background.png

To include all assets under a directory, specify the directory name with the / character at the end:

flutter:
  assets:
    - assets/

Note that only files located directly in the directory will be included; to add files located in subdirectories, create an entry per directory.

From Flutter Docs: (https://flutter.dev/docs/development/ui/assets-and-images)

Upvotes: 6

Related Questions