Flutter使用flutter_gen管理资源文件

pub地址：

https://pub.dev/packages/flutter_gen

1.添加依赖

在你的pubspec.yaml文件中添加flutter_gen作为开发依赖

dependencies:
  build_runner:
  flutter_gen_runner:

2.配置pubspec.yaml

在pubspec.yaml文件中，配置flutter_gen的参数。指定输出路径和资源路径。

flutter_gen:
  output: lib/gen/ # Optional (default: lib/gen/)
  lineLength: 80   # Optional (default: 80)
  # Optional
  integrations:
    flutter_svg: true   # .svg  Assets.images.icons.paint.svg()
    flare_flutter: true # .flr  Assets.flare.penguin.flare()
    rive: true          # .flr  Assets.rive.vehicles.rive()
    lottie: true        # .json Assets.lottie.hamburgerArrow.lottie()
  colors:
    inputs:
      - assets/colors/colors.xml

flutter:
  uses-material-design: true
  assets:
    - assets/images/tab_home_default.png
    - assets/images/tab_home_selected.png
    - assets/images/tab_category_default.png
    - assets/images/tab_category_selected.png
    - assets/images/tab_mine_default.png
    - assets/images/tab_mine_selected.png
    - assets/images/photo.png
    - assets/images/font.png
    - assets/files/mov_file.mov
    - assets/files/mp3_file.mp3
    - assets/files/mp4_file.mp4
    - assets/files/pdf_file.pdf
    - assets/files/svga_file.svga
    - assets/files/txt_file.txt
    - assets/files/xlsx_file.xlsx
    - assets/files/zip_file.zip

  fonts:
    - family: simkai
      fonts:
        - asset: assets/fonts/simkai.ttf
    - family: SourceHanSerifCNBold
      fonts:
        - asset: assets/fonts/SourceHanSerifCN-Bold.otf
          weight: 700

3.运行生成命令

使用Flutter命令行工具运行pub get来安装新的依赖

$ flutter pub get

使用命令行工具运行命令生成资源文件

$ dart run build_runner build
或
$ flutter packages pub run build_runner build
或
$ flutter packages pub run build_runner build --delete-conflicting-outputs

如果图片资源发生变化，只需更新pubspec.yaml文件并重新运行生成资源文件的命令即可更新资源引用。

4.使用图片和其它资源文件

flutter_gen会在指定的输出目录（例如lib/gen/）中生成一个assets.gen.dart文件，里面包含了所有的资源引用。

使用图片
import 'gen/assets.gen.dart';

Image.asset(
  Assets.images.photo.path, //'assets/images/photo.png',
  width: 50,
  height: 50,
),

Assets.images.font.image(
  width: 100,
  height: 100,
)
使用其它文件
import 'package:flutter/services.dart' show rootBundle;
import 'dart:typed_data';

  var arr = [
    Assets.files.txtFile,
    Assets.files.movFile,
    Assets.files.mp3File,
    Assets.files.mp4File,
    Assets.files.pdfFile,
    Assets.files.svgaFile,
    Assets.files.xlsxFile,
    Assets.files.zipFile
  ];

// 获取文件中的字符串
Future<String> loadAsset(String path) async {
  try {
    var str = await rootBundle.loadString(path);
    return str;
  } catch (e) {
    return "获取失败";
  }
}

// 获取文件二进制数据
Future<ByteData> loadAssetData(String path) async {
  try {
    var data = await rootBundle.load(path);
    return data;
  } catch (e) {
    return ByteData(0);
  }
}

Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      FutureBuilder<String>(
        future: loadAsset(Assets.files.txtFile),
        builder: (BuildContext context,
            AsyncSnapshot<String> snapshot) {
          if (snapshot.connectionState == ConnectionState.done) {
            return Text(snapshot.data ?? '');
          } else {
            return const CircularProgressIndicator();
          }
        },
      ),

      FutureBuilder<ByteData>(
        future: loadAssetData(Assets.files.mp3File),
        builder: (BuildContext context,
            AsyncSnapshot<ByteData> snapshot) {
          if (snapshot.connectionState == ConnectionState.done) {
            // 这里你可以使用 snapshot.data 来访问文件的二进制数据
            Uint8List data =
                snapshot.data?.buffer.asUint8List() ??
                    Uint8List(0);
            return Container(
              child: Text(data.toString()),
            );
          } else {
            return const CircularProgressIndicator();
          }
        },
      ),
    ],
  ),
资源文件适配

Flutter默认会按照这样的文件夹结构来寻找合适的资源：

  • .../image.png — 默认图片，适用于1.0x设备像素比的屏幕。

  • .../2.0x/image.png — 适用于2.0x设备像素比的屏幕。

  • .../3.0x/image.png — 适用于3.0x设备像素比的屏幕。

当你在应用中引用图像时，只需引用默认的图片路径（.../image.png），Flutter会自动根据设备的像素密度来加载正确的资源文件。如果你的应用不需要支持多种像素密度的图像，那么你也可以只提供默认的图像资源而不创建这些文件夹。

如果你决定支持不同的像素密度，确保为每个分辨率提供相应的图像资源，并按照上述结构放置它们。这样，Flutter就可以为不同的设备屏幕自动选择最合适的资源。

flutter_gen生成的assets.gen.dart
/// GENERATED CODE - DO NOT MODIFY BY HAND
/// *****************************************************
///  FlutterGen
/// *****************************************************

// coverage:ignore-file
// ignore_for_file: type=lint
// ignore_for_file: directives_ordering,unnecessary_import,implicit_dynamic_list_literal,deprecated_member_use

import 'package:flutter/widgets.dart';

class $AssetsFilesGen {
  const $AssetsFilesGen();

  /// File path: assets/files/mov_file.mov
  String get movFile => 'assets/files/mov_file.mov';

  /// File path: assets/files/mp3_file.mp3
  String get mp3File => 'assets/files/mp3_file.mp3';

  /// File path: assets/files/mp4_file.mp4
  String get mp4File => 'assets/files/mp4_file.mp4';

  /// File path: assets/files/pdf_file.pdf
  String get pdfFile => 'assets/files/pdf_file.pdf';

  /// File path: assets/files/svga_file.svga
  String get svgaFile => 'assets/files/svga_file.svga';

  /// File path: assets/files/txt_file.txt
  String get txtFile => 'assets/files/txt_file.txt';

  /// File path: assets/files/xlsx_file.xlsx
  String get xlsxFile => 'assets/files/xlsx_file.xlsx';

  /// File path: assets/files/zip_file.zip
  String get zipFile => 'assets/files/zip_file.zip';

  /// List of all assets
  List<String> get values => [
        movFile,
        mp3File,
        mp4File,
        pdfFile,
        svgaFile,
        txtFile,
        xlsxFile,
        zipFile
      ];
}

class $AssetsImagesGen {
  const $AssetsImagesGen();

  /// File path: assets/images/font.png
  AssetGenImage get font => const AssetGenImage('assets/images/font.png');

  /// File path: assets/images/photo.png
  AssetGenImage get photo => const AssetGenImage('assets/images/photo.png');

  /// File path: assets/images/tab_category_default.png
  AssetGenImage get tabCategoryDefault =>
      const AssetGenImage('assets/images/tab_category_default.png');

  /// File path: assets/images/tab_category_selected.png
  AssetGenImage get tabCategorySelected =>
      const AssetGenImage('assets/images/tab_category_selected.png');

  /// File path: assets/images/tab_home_default.png
  AssetGenImage get tabHomeDefault =>
      const AssetGenImage('assets/images/tab_home_default.png');

  /// File path: assets/images/tab_home_selected.png
  AssetGenImage get tabHomeSelected =>
      const AssetGenImage('assets/images/tab_home_selected.png');

  /// File path: assets/images/tab_mine_default.png
  AssetGenImage get tabMineDefault =>
      const AssetGenImage('assets/images/tab_mine_default.png');

  /// File path: assets/images/tab_mine_selected.png
  AssetGenImage get tabMineSelected =>
      const AssetGenImage('assets/images/tab_mine_selected.png');

  /// List of all assets
  List<AssetGenImage> get values => [
        font,
        photo,
        tabCategoryDefault,
        tabCategorySelected,
        tabHomeDefault,
        tabHomeSelected,
        tabMineDefault,
        tabMineSelected
      ];
}

class Assets {
  Assets._();

  static const $AssetsFilesGen files = $AssetsFilesGen();
  static const $AssetsImagesGen images = $AssetsImagesGen();
}

class AssetGenImage {
  const AssetGenImage(this._assetName);

  final String _assetName;

  Image image({
    Key? key,
    AssetBundle? bundle,
    ImageFrameBuilder? frameBuilder,
    ImageErrorWidgetBuilder? errorBuilder,
    String? semanticLabel,
    bool excludeFromSemantics = false,
    double? scale,
    double? width,
    double? height,
    Color? color,
    Animation<double>? opacity,
    BlendMode? colorBlendMode,
    BoxFit? fit,
    AlignmentGeometry alignment = Alignment.center,
    ImageRepeat repeat = ImageRepeat.noRepeat,
    Rect? centerSlice,
    bool matchTextDirection = false,
    bool gaplessPlayback = false,
    bool isAntiAlias = false,
    String? package,
    FilterQuality filterQuality = FilterQuality.low,
    int? cacheWidth,
    int? cacheHeight,
  }) {
    return Image.asset(
      _assetName,
      key: key,
      bundle: bundle,
      frameBuilder: frameBuilder,
      errorBuilder: errorBuilder,
      semanticLabel: semanticLabel,
      excludeFromSemantics: excludeFromSemantics,
      scale: scale,
      width: width,
      height: height,
      color: color,
      opacity: opacity,
      colorBlendMode: colorBlendMode,
      fit: fit,
      alignment: alignment,
      repeat: repeat,
      centerSlice: centerSlice,
      matchTextDirection: matchTextDirection,
      gaplessPlayback: gaplessPlayback,
      isAntiAlias: isAntiAlias,
      package: package,
      filterQuality: filterQuality,
      cacheWidth: cacheWidth,
      cacheHeight: cacheHeight,
    );
  }

  ImageProvider provider({
    AssetBundle? bundle,
    String? package,
  }) {
    return AssetImage(
      _assetName,
      bundle: bundle,
      package: package,
    );
  }

  String get path => _assetName;

  String get keyName => _assetName;
}

5.使用颜色资源文件

flutter_gen会在指定的输出目录（例如lib/gen/）中生成一个colors.gen.dart文件，里面包含了颜色的资源引用。

使用颜色
import 'gen/colors.gen.dart';

child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      const Text(
        "字符串1",
        style: TextStyle(
          color: Colors.red,
        ),
      ),
      const Text(
        "字符串1",
        style: TextStyle(
          color: ColorName.textColor,
        ),
      ),
      Text(
        "字符串3",
        style: TextStyle(
          color: ColorName.themeColor[300],
        ),
      ),
      Text(
        "字符串4",
        style: TextStyle(
          color: ColorName.themeColorAccent[400],
        ),
      ),
    ],
  ),
colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="black">#FF000000</color>
    <color name="white">#FFFFFFFF</color>
    <color name="text_color" type="material">#333333</color>
    <color name="theme_color" type="material material-accent">#333333</color>
</resources>
flutter_gen生成的colors.gen.dart
/// GENERATED CODE - DO NOT MODIFY BY HAND
/// *****************************************************
///  FlutterGen
/// *****************************************************

// coverage:ignore-file
// ignore_for_file: type=lint
// ignore_for_file: directives_ordering,unnecessary_import,implicit_dynamic_list_literal,deprecated_member_use

import 'package:flutter/painting.dart';
import 'package:flutter/material.dart';

class ColorName {
  ColorName._();

  /// Color: #FF000000
  static const Color black = Color(0xFF000000);

  /// MaterialColor:
  ///   50: #FFE7E7E7
  ///   100: #FFC2C2C2
  ///   200: #FF999999
  ///   300: #FF707070
  ///   400: #FF525252
  ///   500: #FF333333
  ///   600: #FF2E2E2E
  ///   700: #FF272727
  ///   800: #FF202020
  ///   900: #FF141414
  static const MaterialColor textColor = MaterialColor(
    0xFF333333,
    <int, Color>{
      50: Color(0xFFE7E7E7),
      100: Color(0xFFC2C2C2),
      200: Color(0xFF999999),
      300: Color(0xFF707070),
      400: Color(0xFF525252),
      500: Color(0xFF333333),
      600: Color(0xFF2E2E2E),
      700: Color(0xFF272727),
      800: Color(0xFF202020),
      900: Color(0xFF141414),
    },
  );

  /// MaterialColor:
  ///   50: #FFE7E7E7
  ///   100: #FFC2C2C2
  ///   200: #FF999999
  ///   300: #FF707070
  ///   400: #FF525252
  ///   500: #FF333333
  ///   600: #FF2E2E2E
  ///   700: #FF272727
  ///   800: #FF202020
  ///   900: #FF141414
  static const MaterialColor themeColor = MaterialColor(
    0xFF333333,
    <int, Color>{
      50: Color(0xFFE7E7E7),
      100: Color(0xFFC2C2C2),
      200: Color(0xFF999999),
      300: Color(0xFF707070),
      400: Color(0xFF525252),
      500: Color(0xFF333333),
      600: Color(0xFF2E2E2E),
      700: Color(0xFF272727),
      800: Color(0xFF202020),
      900: Color(0xFF141414),
    },
  );

  /// MaterialAccentColor:
  ///   100: #FFE82D2D
  ///   200: #FFC21616
  ///   400: #FFBE0000
  ///   700: #FFAF0000
  static const MaterialAccentColor themeColorAccent = MaterialAccentColor(
    0xFFC21616,
    <int, Color>{
      100: Color(0xFFE82D2D),
      200: Color(0xFFC21616),
      400: Color(0xFFBE0000),
      700: Color(0xFFAF0000),
    },
  );

  /// Color: #FFFFFFFF
  static const Color white = Color(0xFFFFFFFF);
}

6.使用字体资源文件

flutter_gen会在指定的输出目录（例如lib/gen/）中生成一个colors.gen.dart文件，里面包含了颜色的资源引用。

使用字体
import 'gen/fonts.gen.dart';

const Text(
  "字体",
  style: TextStyle(
    fontFamily: FontFamily.simkai,
    fontFamilyFallback: [FontFamily.sourceHanSerifCNBold],
  ),
),

通常，fontFamilyFallback用于指定一系列的备选字体，以确保在主字体不支持某些字符时，文本仍然可以用其他字体显示。如果你确定FontFamily.simkai能够支持你需要显示的所有字符，那么就不需要在fontFamilyFallback中再次指定它。相反，如果你有理由相信FontFamily.simkai可能不包含某些字符，那么应该在fontFamilyFallback中指定一个或多个不同的备选字体。

flutter_gen生成的fonts.gen.dart
/// GENERATED CODE - DO NOT MODIFY BY HAND
/// *****************************************************
///  FlutterGen
/// *****************************************************

// coverage:ignore-file
// ignore_for_file: type=lint
// ignore_for_file: directives_ordering,unnecessary_import,implicit_dynamic_list_literal,deprecated_member_use

class FontFamily {
  FontFamily._();

  /// Font family: SourceHanSerifCNBold
  static const String sourceHanSerifCNBold = 'SourceHanSerifCNBold';

  /// Font family: simkai
  static const String simkai = 'simkai';
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/205753.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

6.1 Windows驱动开发：内核枚举SSDT表基址

6.1 Windows驱动开发：内核枚举SSDT表基址

SSDT表&#xff08;System Service Descriptor Table&#xff09;是Windows操作系统内核中的关键组成部分&#xff0c;负责存储系统服务调用的相关信息。具体而言&#xff0c;SSDT表包含了系统调用的函数地址以及其他与系统服务相关的信息。每个系统调用对应SSDT表中的一个表项…
阅读更多...
Netty Review - 探索Channel和Pipeline的内部机制

Netty Review - 探索Channel和Pipeline的内部机制

文章目录 概念Channel Pipeline实现原理分析详解 Inbound事件和Outbound事件演示Code 概念 Netty中的Channel和Pipeline是其核心概念&#xff0c;它们在构建高性能网络应用程序时起着重要作用。 Channel&#xff1a; 在Netty中&#xff0c;Channel表示一个开放的连接&#xff…
阅读更多...
Spring整合web环境

Spring整合web环境

目录 Javaweb三大组件及环境特点 Spring整合web环境的思路及实现 Spring的web开发组件spring-web MVC框架思想及其设计思路 Javaweb三大组件及环境特点 Spring整合web环境的思路及实现 package com.xfy.listener;import com.xfy.config.SpringConfig; import org.springfra…
阅读更多...
Scrapy框架中间件(一篇文章齐全)

Scrapy框架中间件(一篇文章齐全)

1、Scrapy框架初识&#xff08;点击前往查阅&#xff09; 2、Scrapy框架持久化存储&#xff08;点击前往查阅&#xff09; 3、Scrapy框架内置管道&#xff08;点击前往查阅&#xff09; 4、Scrapy框架中间件 Scrapy 是一个开源的、基于Python的爬虫框架&#xff0c;它提供了…
阅读更多...
业务连续性的实施步骤及价值

业务连续性的实施步骤及价值

业务连续性计划不仅仅是面对灾难时的应急措施&#xff0c;更是一种战略性的投资。通过综合的风险评估、计划制定和实施&#xff0c;企业可以提高对各种风险的适应能力&#xff0c;确保业务在任何情况下都能够持续运营。这种全面的准备不仅有助于应对突发事件&#xff0c;还能为…
阅读更多...
【社会网络分析第6期】Ucient实操

【社会网络分析第6期】Ucient实操

一、导入数据处理二、核心——边缘分析三、聚类分析四、网络密度 一、导入数据处理 将数据导入Ucinet首先需要对数据进行处理。 承接上一期的数据格式&#xff1a;【社会网络分析第5期】gephi使用指南 原先得到的数据格式如下&#xff1a; 接下来打开ucinet&#xff1a; 之后…
阅读更多...
latex中算法的几种模板

latex中算法的几种模板

latex中算法的几种模板_latex算法模板-CSDN博客文章浏览阅读6.2k次&#xff0c;点赞3次&#xff0c;收藏45次。latex中几种算法模板_latex算法模板https://blog.csdn.net/weixin_50514171/article/details/125136121?spm1001.2014.3001.5506 latex排版原理 常用算法排版伪代码…
阅读更多...
「Linux」使用C语言制作简易Shell

「Linux」使用C语言制作简易Shell

&#x1f4bb;文章目录 &#x1f4c4;前言简易shell实现shell的概念系统环境变量shell的结构定义内建命令完整代码 &#x1f4d3;总结 &#x1f4c4;前言 对于很多学习后端的同学来讲&#xff0c;学习了C语言&#xff0c;发现除了能写出那个经典的“hello world”以外&#xff…
阅读更多...
43.0BaseDao抽取dao公共父类

43.0BaseDao抽取dao公共父类

43.1. 回顾 1. 把数据库表中查询的结果封装到一个实体类中。 命名规则:类名和表名一致 类中属性和表的字段对应。 表中的一条记录对应实体的一个对象 多条记录→集合 43.2. 正文 目录 43.1. 回顾 43.2. 正文 43.3. 抽取dao公共父类。 43.4. 引入数据源 43.3. 抽取dao公共…
阅读更多...
文件夹重命名技巧：用关键词替换文件夹名称指定内容的右侧文字

文件夹重命名技巧：用关键词替换文件夹名称指定内容的右侧文字

在日常生活中&#xff0c;经常要管理大量的文件夹&#xff0c;这时候掌握一些文件夹重命名的技巧就非常实用。例如文件夹重命名时&#xff0c;经常要将一些通用的文字替换成其他关键词&#xff0c;以便更好地标识和分类文件夹。而用关键词替换文件夹名称指定内容的右侧文字&…
阅读更多...
【论文阅读】1 SkyChain：一个深度强化学习的动态区块链分片系统

【论文阅读】1 SkyChain：一个深度强化学习的动态区块链分片系统

SkyChain 一、文献简介二、引言及重要信息2.1 研究背景2.2 研究目的和意义2.3 文献的创新点 三、研究内容3.1模型3.2自适应分类账协议3.2.1状态块创建3.2.2合并过程3.2.3拆分过程 3.3评价框架3.3.1性能3.3.1.1共识延迟3.3.1.2重新分片延迟3.3.1.3处理事务数3.3.1.4 约束 3.3.2 …
阅读更多...
使用RobotFramework编写BDD代码

使用RobotFramework编写BDD代码

背景 行为驱动开发&#xff08;Behavior Driven Development&#xff09;即BDD&#xff0c;是一种敏捷开发方法&#xff0c;通常应用在自动化测试中&#xff0c;或者也可称为行为驱动测试。通过使用自然描述语言确定自动化脚本&#xff0c;通过这种方式&#xff0c;能够大大促…
阅读更多...
EI级 | Matlab实现TCN-BiLSTM-Multihead-Attention多头注意力机制多变量时间序列预测

EI级 | Matlab实现TCN-BiLSTM-Multihead-Attention多头注意力机制多变量时间序列预测

EI级 | Matlab实现TCN-BiLSTM-Multihead-Attention多头注意力机制多变量时间序列预测 目录 EI级 | Matlab实现TCN-BiLSTM-Multihead-Attention多头注意力机制多变量时间序列预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 1.【EI级】Matlab实现TCN-BiLSTM-Multihead-…
阅读更多...
Openai通用特定领域的智能语音小助手

Openai通用特定领域的智能语音小助手

无穷尽的Q&A 钉钉...钉钉... 双双同学刚到工位,报销答疑群的消息就万马纷沓而来。她只能咧嘴无奈的摇摇头。水都还没有喝一口就开始“人工智能”的去回复。原本很阳光心情开始蒙上一层薄薄阴影。在这无休无止的Q&A中&#xff0c;就算你对工作有磐石一般强硬&#xff0…
阅读更多...
XXL-Job详解（一）：组件架构

XXL-Job详解（一）：组件架构

目录 XXL-Job特性系统组成架构图调度模块剖析任务 “运行模式” 剖析执行器 XXL-Job XXL-JOB是一个分布式任务调度平台&#xff0c;其核心设计目标是开发迅速、学习简单、轻量级、易扩展。现已开放源代码并接入多家公司线上产品线&#xff0c;开箱即用。 特性 1、简单&#…
阅读更多...
探究Kafka原理-6.CAP理论实践

探究Kafka原理-6.CAP理论实践

&#x1f44f;作者简介&#xff1a;大家好&#xff0c;我是爱吃芝士的土豆倪&#xff0c;24届校招生Java选手&#xff0c;很高兴认识大家&#x1f4d5;系列专栏&#xff1a;Spring源码、JUC源码、Kafka原理&#x1f525;如果感觉博主的文章还不错的话&#xff0c;请&#x1f44…
阅读更多...
解决keil右键Go To Definition跳转不过去的问题

解决keil右键Go To Definition跳转不过去的问题

解决&#xff1a; 在魔法棒中如图所示打上√
阅读更多...
Pycharm新手开发指南

Pycharm新手开发指南

文章目录 前言一、常用功能介绍二、常用高效pycharm使用方法关于Python技术储备一、Python所有方向的学习路线二、Python基础学习视频三、精品Python学习书籍四、Python工具包项目源码合集①Python工具包②Python实战案例③Python小游戏源码五、面试资料六、Python兼职渠道 前言…
阅读更多...
京东秒杀之秒杀实现

京东秒杀之秒杀实现

1 登录判断 用户在未登录状态下可以查看商品列别以及秒杀商品详情&#xff0c;但不可以在未登录状态进行秒杀商品的操作&#xff0c;当用户点击开始秒杀时&#xff0c;进行登陆验证 <!DOCTYPE html> <head><title>商品详情</title><meta http-eq…
阅读更多...
习题补充整理

习题补充整理

目录 一、自己封装response 二、在响应头中放数据 HttpResponse redirect ​编辑 render JsonResponse 三、函数和方法区别 ----》绑定方法区别 四、上传图片和开启media访问 五、页面静态化(解决访问率高的问题) 一、自己封装response 第一步&#xff0c;在app01下…
阅读更多...
最新文章

Copyright @ 2022~2023