flutter学习之旅 - 自带图标组件和自定义图标

前面学习的代码差分

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text("我的应用 - ICON"),
        ),
        body: const MyHomePage(),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return const Text("你好");
  }
}

自带的图标

组件: Icon

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

  @override
  Widget build(BuildContext context) {
    return Column(
      children: const [Icon(Icons.home, size: 40, color: Colors.red)],
    );
  }
}

自定义图标

iconfont

1. 点击图上的下载代码
2. 解压文件得到
   
3. 在项目根目录里面新建根目录/fonts文件夹，把iconfont.ttf和iconfont.json复制到fonts文件夹
4. 找到`根目录/pubspec.yaml`文件，并找到文件里面的`fonts`

配置完成

5. 找到自己的项目文件lib/main.dart或者自定义包lib/myfont.dart
   

• codePoint: 编码
• fontFamily: 指定字体(就是第4步的family(自定义的))
• matchTextDirection: 表示在TextDirection方向上可以绘制我们的图标

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

class MyFont {
  //自定义字体
  static const IconData weixin =
      IconData(0xe637, fontFamily: "ctyIcon", matchTextDirection: true);
  static const IconData qq = IconData(0xe882, //格式是0x(iconfont.json中的unicode)里的值
      fontFamily: "ctyIcon",
      matchTextDirection: true);
  static const IconData bilibili =
      IconData(0xe609, fontFamily: "ctyIcon", matchTextDirection: true);
}

6. 加载自己的图标

import 'package:flutter/material.dart';
import 'package:flutter_test01/myfont.dart'; //自定义的包导入格式:import 'package:项目名/dart名称,dart'

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text("我的应用 - ICON"),
        ),
        body: const MyHomePage(),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Column(children: const [
      Icon(
        MyFont.bilibili,
        size: 40,
        color: Colors.blue,
      ),
      Icon(
        MyFont.qq,
        size: 40,
        color: Colors.blue,
      )
    ]);
  }

添加其他图标可以再次以上步骤，只不过得把下载下来的第二个iconfont.json和iconfont.ttl改名(不能重复)