你必须掌握在Flutter中添加资源文件的方法

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

1. 添加图片资源文件

1.1 添加本地图片资源

flutter:
assets:
    // 表示引入根目录下的 images 文件夹下的所有资源文件
    - images/
    // 只添加 images/ 下的 pci.png
    - images/pci.png

注意缩进！本地文件夹内的资源可以选择导入整个文件夹，或者只导入指定文件。使用：Image.asset("images/pic.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 会根据设备分辨率自动选择合适大小的图标。

2.添加字体资源

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

flutter:
  fonts:
   // 一组字体的名称
   - family: Schyler
    fonts:
     // 组内包哈的字体资源文件，第一个是默认字体
     - asset: fonts/Schyler-Regular.ttf
     - asset: fonts/Schyler-Italic.ttf
      // 定义该字体的style
      style: italic
   // 一组字体的名称
   - family: Trajan Pro
    fonts:
     - asset: fonts/TrajanPro.ttf
     - asset: 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

使用字体：

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Flutter布局模型之层叠定位

    Flutter布局模型之层叠定位

    Stack即层叠布局控件,能够将子控件层叠排列. Stack控件的每一个子控件都是定位或不定位,定位的子控件是被Positioned控件包裹的.Stack控件本身包含所有不定位的子控件,其根据alignment定位(默认为左上角).然后根据定位的子控件的top.right.bottom和left属性将它们放置在Stack控件上. import 'package:flutter/material.dart'; class LayoutDemo extends StatelessWidget { @

  • Flutter中ListView 的使用示例

    Flutter中ListView 的使用示例

    这个小例子使用的是豆瓣 API 中 正在上映的电影 的开放接口,要实现的主要效果如下: JSON 数据结构 Item 结构 Item 的结构是一个 Card 包含着一个 Row 然后这个 Row 里面左边是一个 Image ,右边是一个 Column 功能实现 material 库 Json 解析 网络请求 加载菊花 要实现上面四个功能,我们首先需要在 .dart 文件中引入如下代码 import 'dart:convert'; import 'package:http/http.dart' a

  • Flutter实现底部导航栏效果

    Flutter实现底部导航栏效果

    大家最近都在讨论新鲜技术-flutter,小编也在学习中,遇到大家都遇到的问题,底部导航.下面给大家贴出底部导航的编写,主要参考了lime这个项目. 上代码 一.在main.dart文件中 定义APP的基本信息 class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return new

  • Flutter质感设计之模态底部面板

    Flutter质感设计之模态底部面板

    模态底部面板是菜单或对话框的替代方案,可防止用户与其他控件进行互动,可以使用showModalBottomSheet函数创建和显示模态底部面板. import 'package:flutter/material.dart'; class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new

  • Flutter质感设计之列表项

    Flutter质感设计之列表项

    本文为大家分享了Flutter实现列表项的具体代码,供大家参考,具体内容如下 创建achievement_view_list_item.dart文件,具体的实现每一个列表项. import 'package:flutter/material.dart'; // 创建类,成就目标 class Target { // 常量,构建函数 const Target({ // 自变量,目标名称 this.name, // 自变量,目标奖励 this.reward }); // 最终值,成就目标名称 fina

  • Flutter路由的跳转、动画和传参详解（最简单）

    路由 做Android/iOS原生开发的时候,要打开一个新的页面,你得知道你的目标页面对象,然后初始化一个Intent或者ViewController,再通过startActivity或者pushViewController来推出一个新的页面,不能跟web一样,直接丢一个链接地址就跳转到新的页面.当然,可以自己去加一个中间层来实现这些功能. Flutter里面是原生支持路由的.Flutter的framework提供了路由跳转的实现.我们可以直接使用这些功能. Flutter路由介绍 Flutte

  • Flutter质感设计之弹出菜单

    PopupMenuButton控件即弹出菜单控件,点击控件会出现菜单. import 'package:flutter/material.dart'; class MenusDemo extends StatefulWidget { @override _MenusDemoState createState() => new _MenusDemoState(); } class _MenusDemoState extends State<MenusDemo> { String _body

  • Flutter实现页面切换后保持原页面状态的3种方法

    Flutter实现页面切换后保持原页面状态的3种方法

    前言: 在Flutter应用中,导航栏切换页面后默认情况下会丢失原页面状态,即每次进入页面时都会重新初始化状态,如果在initState中打印日志,会发现每次进入时都会输出,显然这样增加了额外的开销,并且带来了不好的用户体验. 在正文之前,先看一些常见的App导航,以喜马拉雅FM为例: 它拥有一个固定的底部导航以及首页的顶部导航,可以看到不管是点击底部导航切换页面还是在首页左右侧滑切换页面,之前的页面状态都是始终维持的,下面就具体介绍下如何在flutter中实现类似喜马拉雅的导航效果 第一步:实

  • Flutter Android端启动白屏问题的解决

    问题描述 Flutter 应用在 Android 端上启动时会有一段很明显的白屏现象,白屏的时长由设备的性能决定,设备性能越差,白屏时间越长. 问题分析 其实启动白屏的问题在Android原生应用上也是一个常见问题,大致是因为从用户点击 Launcher Icon 到应用首页显示之间,Android 系统在完成应用的初始化工作,其流程如下: 在 Flutter Android 端上,白屏的问题会更加严重,因为除了 Android 应用启动耗时外,还增加了 Flutter 初始化耗时. 直到 Fl

  • 你必须掌握在Flutter中添加资源文件的方法

    在 Flutter 中,需要在根目录下的 pubspec.yaml 文件中配置资源的路径,资源才能被打包使用.现在,看看如何配置资源吧. 1. 添加图片资源文件 1.1 添加本地图片资源 flutter: assets: // 表示引入根目录下的 images 文件夹下的所有资源文件 - images/ // 只添加 images/ 下的 pci.png - images/pci.png 注意缩进!本地文件夹内的资源可以选择导入整个文件夹,或者只导入指定文件.使用:Image.asset("im

  • Python 分发包中添加额外文件的方法

    在制作一个 Python 分发包时经常需要把一些文件添加到包中.最常见的例子是你希望通过  pip install 命令安装 Python 包时会在  /etc/ 等目录下自动添加默认配置文件,由此可以让 Python 安装完成就可以工作,同时也可以给用户提供配置样例参考. 参考Installing Additional Files 如果使用 setuptools,在 setup.py 文件中可以通过 data_files 配置项配置分发包的额外文件, 格式为: (<安装位置>, [<文

  • 在.NET中读取嵌入和使用资源文件的方法

    在.NET中读取嵌入和使用资源文件的方法

    Dotnet中嵌入资源(位图.图标或光标等)有两种方式,一是直接把资源文件加入到项目,作为嵌入资源,在代码中通过Assembly的GetManifestResourceStream方法获取资源的Stream.另一种方法是在项目中加入. resx资源文件,在资源文件中添加资源,由ResourceManager类统一管理其中的资源. 下面分别详述这两种方法 一.使用GetManifestResourceStream读取嵌入资源 1.加入资源文件 直接把要嵌入到程序集的资源文件加入到项目中,可以加在项

  • flutter中的资源和图片加载示例详解

    目录 封面图 指定相应的资源 资源绑定 Asset bundling 资源变体 加载资源 加载文本资源 加载图片 加载依赖包中的图片 最后 封面图 下个季度的目标是把前端监控相关的内容梳理出来,梳理出来之后可能会在公司内部做个分享- Flutter应用程序既括代码也包括一些其他的资产,我们通常这些资产为资源. 有时候我会思考assets这个单词,在程序中到底应该翻译为资产呢?还是翻译为资源?按照习惯,我们这里还是称为资源好了- 这些资源是一些与应用程序捆绑在一起和并且部署应用时会用到的的文件,在

  • 正确在Flutter中添加webview实现详解

    目录 前言 安装 运行项目遇到的问题 前言 为什么要在flutter中引入webview?这不是废话么,当然是为了加载一个网页,这不是移动端最基本的需求么,哈哈!说的真不错,接下来我要是告诉你我的用法,你可能要大吃一惊.我的用处很简单,那就是在webview中再加载一个flutter编译成web的项目.有没有吓到你.别怕,我这么做的原因很简单,就是为了热更新.可能在flutter中实现热更新的方法有很多,但我敢说我这么做就是最好的热更新方式.当我内容发生变更是时候,我不需要继续去审核,只需要在服

  • 过滤Android工程中多余资源文件的解决方法

    本文以实例讲述了过滤Android工程中多余资源文件的解决方法,很有实用价值!具体描述如下: 很多开发人员在Android项目开发过程中经常会遇到这样的情况:界面开发人员发布了一个新版本的资源包,不过有的图片名称改了,有的图片删掉了,可是在实现的时候开发人员只是把新的资源覆盖到原来的资源文件夹中,随着版本的发布,在drawable或values中积累的无用资源越来越多,直到最后发布正式版的时候再想要删除这些多余的文件,于是不得不一个一个文件检查看是否有用,再决定要不要删除之. 有鉴于此,很有必要

  • yii2中添加验证码的实现方法

    本文实例讲述了yii2中添加验证码的实现方法.分享给大家供大家参考,具体如下: 首先,在模型中添加验证码字段: public function rules(){ return ['verifyCode', 'captcha'], } 其次,可以在函数attributeLabels中添加前台页面中验证码的字段名称: public function atrributeLabels(){ return ['verifyCode'=>'Verification Code', ]; } 然后,在视图文件中

  • Yii2中添加全局函数的方法分析

    本文实例讲述了Yii2中添加全局函数的方法.分享给大家供大家参考,具体如下: 方法一 这种方法就是直接在入口文件web/index.php里面写函数,示例代码如下: // something code -- // 全局函数 function pr($var) { $template = php_sapi_name() !== 'cli' ? '<pre>%s</pre>' : "\n%s\n"; printf($template, print_r($var, t

  • 浅谈VS中添加头文件时显示无法找到文件的问题

    目录或库文件名中包含汉字或空格的话,请将其用半角双引号括住. 项目.属性.C/C++.附加包含目录:填写附加头文件所在目录 分号间隔多项 项目.属性.链接器.附加库目录:填写附加依赖库所在目录 分号间隔多项 项目.属性.链接器(点前面的+展开).输入.附加依赖项:填写附加依赖库的名字.lib 空格间隔多项 这样在我们添加现有项后,经常出现的找不到源文件等等问题就解决了 以上这篇浅谈VS中添加头文件时显示无法找到文件的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们

  • Android 中添加水平线和垂直线方法总结

    Android 中添加水平线和垂直线方法总结 1.添加水平线 <View android:layout_height="0.5dip" android:background="#686868" android:layout_width="match_parent"/> 2.添加垂直线 <View android:layout_height="match_parent" android:background=&

随机推荐