flutter 加载依赖 图片 IconFont

加载依赖

flutter官方插件库

flutter加载资源和依赖都在pubspec.yaml文件中实现这个文件对写法要求比较严格
一般项目运行时所需要的依赖实在下面的这个dependencies里面加入
和flutter是平级一定要对齐
例如添加一个dio库

dependencies:
  flutter:
    sdk: flutter
  dio: 2.1.0

点击右上角的packages get他会自动下载对应的库

image.png

下载成功会显示

image.png
接下来就可以在项目中用了，as有时候不能按alt+enter提示导包，必须手动导包
image.png

项目运行时不需要但是在写的时候添加能使我们跟方便的编写代码的库 例如有一个帮助解析bean类生成对应json解析的文件填写在这里面

dev_dependencies:
  flutter_test:
    sdk: flutter
    #这个是需要添加的帮助生成的依赖
  build_runner: ^1.3.1

加载图片资源

在项目根目录下面创建一个imgs文件夹，将项目的图片放入其中

flutter:
  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true
  assets:
    - imgs/img1.jpg
    - imgs/img2.jpg

也可以直接写

flutter:
  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true
  assets:
    - imgs/

添加IconFont资源 以阿里巴巴矢量图标为例子

1. 在阿里巴巴矢量图标将你所需要的图标添加到项目里

   
   image.png

2. 在更多操作中有个编辑项目选项点击会弹出，其中Font Family 需要记下来 当然你也可以改

   
   image.png

3. 点击下载至本地你会在下载的压缩包里面看见一个ttf的文件
   

   image.png

4. 接下来在lib文件夹的同级创建一个资产文件自 例如：打错了一个字

   
   image.png

5. 然后在yaml文件中加入资源,一定要对齐 family就是之前看到了Font Family

flutter:
  uses-material-design: true
  assets:
    - assets/imgs/
  fonts:
    - family: iconfont
      fonts:
     #这里的 asset 别多加了一个s 我犯过这个错误
      - asset: assets/fonts/iconfont.ttf

6. 接下来创建一个类来存储icon

import 'package:flutter/cupertino.dart';

class MyIcon {
///0xe620就是前面提到的十六进制的数
  static const IconData weixin = const IconData(0xe620,fontFamily: "iconfont");///fontFamily也是Font Family
  static const IconData wode = const IconData(0xe615,fontFamily: "iconfont");
  static const IconData faxian = const IconData(0xe746,fontFamily: "iconfont");
  static const IconData tongxunlu = const IconData(0xe655,fontFamily: "iconfont");
}

7. 最后一步在界面上使用

   
   image.png