【flutter笔记---组件篇】多色图标flutter_svg

1.安装flutter插件

flutter pub get

安装flutter组件。

2.安装全局插件

已有nodejs环境执行

npm install flutter-iconfont-cli -g

安装全局插件。

3.生成配置文件

执行

npx iconfont-init

会在该项目文件夹下生成一个iconfont.jsonwenjian。

{
	//官网给的js连接,要自己加http:
    "symbol_url": "http://at.alicdn.com/t/font_3263612_41mhm7fkftu.js",
    //组件生成的位置
    "save_dir": "./lib/iconfont",
    //如果图标有统一前缀，可以通过该字段取消同一前缀
    "trim_icon_prefix": "icon",
    //默认字体图标大小
    "default_icon_size": 18,
    "null_safety": true
}

4.生成组件

执行

npx iconfont-flutter

在.lib/iconfont/文件夹下生成IconFont组件。

5.组件使用

在代码中调用组件：

import 'package:flutter/material.dart';

import 'iconfont/icon_font.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State createState() => _MyHomePageState();
}

class _MyHomePageState extends State {
/// IconFont(IconNames.xxx);
/// IconFont(IconNames.xxx, color: '#f00');
/// IconFont(IconNames.xxx, colors: ['#f00', 'blue']);多色
/// IconFont(IconNames.xxx, size: 30, color: '#000');
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: IconFont(
          IconNames.wang_chakan,
          color: 'red'
        ),
      ),
    );
  }
}

6.更新图标

在图标库官网更新项目图标后，将更新后的js链接更改到iconfont.json文件的symbol_url字段，执行

npx iconfont-flutter

可以更新组件，更改后的组件使用方法不变。