Flutter中添加资源文件

这篇具有很好参考价值的文章主要介绍了Flutter中添加资源文件。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

在Flutter中,需要在根目录下的 pubspec.yaml 文件中配置资源的路径,资源才能被打包使用。

一、添加图片资源文件

1.1 添加本地图片资源

# The following section is specific to Flutter packages.
flutter:
  assets:
    // 表示引入根目录下的 assets/images 文件夹下的所有资源文件
    - assets/images/
    // 只添加 assets/images/ 下的 mine.png
    - assets/images/mine.png

注意缩进!本地文件夹内的资源可以选择导入整个文件夹,或者只导入指定文。
使用:Image.asset("assets/images/mine.png")

1.2 添加依赖插件图片资源

1. 添加依赖插件

在 pubspec.yaml 文件的 dependencies 下添加依赖插件。

dependencies:
    flutter_gallery_assets: 0.1.6
2. 注册依赖插件中的资源同样需要在 pubspec.yaml 文件的flutter 下 assets 下添加所要用到的依赖插件中图片路径。
flutter:
  assets:
    - packages/flutter_gallery_assets/places/india_chennai_flower_market.png

packages后跟插件的名称,图片需要插件包中的完整路径。
这种情况不能一次性注册一个文件夹的图片了,只能一张图一张图的添加。

3. 使用
child: Image.asset(
 // 图片路径
 'places/india_chennai_flower_market.png',
 // 包名
 package: 'flutter_gallery_assets',
),

在使用第三方库资源的时候,需要加上包名。

1.3 分辨率相关的资源

Flutter 支持根据设备分辨率自动选择合适分辨率的图片资源,但资源需要按照以下规则添加:

../image.png
../1.0x/image.png
../2.0x/image.png

使用

AssetImage('../image.png')

只需要使用默认的图即可,AssetImage 会根据设备分辨率自动选择合适大小的图标。

二、添加字体资源

字体资源的添加格式如下,同样是在 pubspec.yaml中:

flutter:
  fonts:
   // 一组字体的名称
   - family: Schyler
    fonts:
     // 组内包哈的字体资源文件,第一个是默认字体
     - asset: assets/fonts/Schyler-Regular.ttf
     - asset: assets/fonts/Schyler-Italic.ttf
      // 定义该字体的style
      style: italic
   // 一组字体的名称
   - family: Trajan Pro
    fonts:
     - asset: assets/fonts/TrajanPro.ttf
     - asset: assets/fonts/TrajanPro_Bold.ttf
      weight: 700
   // 一组字体的名称
   - family: Raleway
    fonts:
     - asset: packages/flutter_gallery_assets/fonts/raleway/Raleway-Regular.ttf
     - asset: packages/flutter_gallery_assets/fonts/raleway/Raleway-Medium.ttf
      weight: 500
     - asset: packages/flutter_gallery_assets/fonts/raleway/Raleway-SemiBold.ttf
      weight: 600

使用字体文章来源地址https://www.toymoban.com/news/detail-526630.html

TextStyle(
  // 字体组名称
  fontFamily: 'Raleway',
  inherit: false,
  fontSize: 24.0,
  // 根据 weight 选择具体的字体
  fontWeight: FontWeight.w500,
  color: Colors.white,
  textBaseline: TextBaseline.alphabetic,
 )

到了这里,关于Flutter中添加资源文件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • flutter页面添加透明遮罩

    路由工具 路由 透明遮罩页面显示

    2024年02月16日
    浏览(36)
  • flutter项目引入本地静态图片资源并展示

    想要在flutter中引入静态资源,需要配置pubspec.yaml,将本地的静态资源添加到assets下面: 然后在flutter引入这些静态资源:  就可以在app中看到这个图片了:  也可以使用网络图片:

    2024年02月05日
    浏览(60)
  • Flutter中为控件添加交互(2)

    有多种方法可以管理状态,用户可以选择使用何种管理方法,一般而言就在父widget中管理状态。 1.widget管理自己的state 有些情况下widget在内部管理其状态是最好的。例如, 当ListView的内容超过渲染框时, ListView自动滚动。大多数使用ListView的开发人员不想管理ListView的滚动行为

    2024年04月12日
    浏览(36)
  • Flutter中为控件添加交互(3)

    @override _FavoriteWidgetState createState() = new _FavoriteWidgetState(); } step3: 创建State子类 自定义State类存储可变信息 - 可以在widget的生命周期内改变逻辑和内部状态。 当应用第一次启动时,用户界面显示一个红色实心的星星形图标,表明该湖已经被收藏,并有41个“喜欢”。状态对象存

    2024年04月17日
    浏览(36)
  • Flutter 项目添加 IOS 小组件开发记录

    突然接到一个需求,需要我们在 IOS APP 中添加 widget 小组件,用来展示项目项目数据信息。大领导的需求没法拒绝,只能摸着石头过河,开干! 由于项目用的是 Flutter 来搭建的,所以需要申请台 mac 电脑安装一遍开发环境。具体的准备我之前写过一篇 前端角度快速理解 Flutt

    2024年04月25日
    浏览(36)
  • 如何在 Flutter 中添加 ListTile:带示例的教程

    大多数时候,您可能会发现自己使用某种预定义格式填充 ListView。您可以使用 Flutter 中称为ListTile小部件的现成小部件来提供帮助,而不是自己使用行、列和容器创建此布局。 在本教程中,我将通过一些实际示例向您展示如何在 Flutter 应用程序中添加 ListTile 小部件。 以下是

    2023年04月08日
    浏览(32)
  • flutter 中实现前端的promise

    代码如下 使用方法 核心原理是 利用Future  和Completer。 Future 是异步无状态的 Completer可以返回Future 里面有3种状态 组合一下 就是前端的promise  用法改了一下 使用 Promise.run   =》Promise

    2024年02月21日
    浏览(70)
  • Flutter中为控件添加交互,带你一起探究Android事件分发机制

    ), ); } } 代码运行效果如图: 2.父widget管理widget的状态 对于父widget来说,管理状态并告诉其子widget何时更新通常是最有意义的。 例如,IconButton允许您将图标视为可点按的按钮。 IconButton是一个无状态的小部件,因为我们认为父widget需要知道该按钮是否被点击来采取相应的处理

    2024年04月11日
    浏览(41)
  • 给前端开发的一份 flutter 常用组件指南

    可以理解为 div 元素,可设置宽高等属性 常用属性如下: 属性 类型 描述 width double 宽 height double 高 padding EdgeInsetsGeometry 内边距 margin EdgeInsetsGeometry 外边距 color Color 背景色,注意不能跟 decoration.color 同时使用,会报错 decoration Decoration 盒模型装饰器 示例: 等价于以下的样式

    2024年02月11日
    浏览(45)
  • Flutter笔记:关于Flutter中的大文件上传(上)

    Flutter笔记 关于Flutter中的大文件上传(上) 大文件上传背景与 Flutter 端实现文件分片传输 作者 : 李俊才 (jcLee95):https://blog.csdn.net/qq_28550263 邮箱 : 291148484@163.com 本文地址 :https://blog.csdn.net/qq_28550263/article/details/134302751 本系列上下两篇文章,包括 Flutter 端和 Django 端(后

    2024年02月03日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包