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?

回答1:

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)

回答2:

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:

Flr Android Studio Plugin Version
- GitHub: https://github.com/Fly-Mix/flr-as-plugin
- Plugin Homepage: https://plugins.jetbrains.com/plugin/13789-flr
- flr-as-plugin Usage Example Gif:
Flr CLI Version
- GitHub: GitHub: https://github.com/Fly-Mix/flr-cli
- Plugin Homepage: https://rubygems.org/gems/flr
- flr-cli Usage Example Gif:
Flr VSCode Extension Version
- GitHub: GitHub: https://github.com/Fly-Mix/flr-vscode-extension
- Extension Homepage: https://marketplace.visualstudio.com/items?itemName=LincolnLaw.flr
- flr-vscode-extension Usage Example:

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

来源：https://stackoverflow.com/questions/54902035/how-to-add-100-manual-images-in-pubspec-yaml-in-a-easy-way

标签

Flutter

imagesource