Flutter的Icon

1 基本的组件使用（自带）

Cloumn算一个和自定义Container齐平的一个组件
使用比较简单，但是Icon中有很多对Icon进行设置的方式

疑问：是否能够对Icon进行圆角修饰呢？？

 return const Column(
      children: [
        SizedBox(height: 20,),
        Icon(Icons.home_work_rounded,
        size: 40,
        color: Colors.red,
        ),
        SizedBox(height: 20,),
        Icon(Icons.settings_applications_outlined,
         size: 40,
         color: Colors.red,),
        SizedBox(height: 20,),
        Icon(Icons.category_outlined, 
        size: 40,
        color: Colors.red,),

2 对于不是本地的Icon

阿里云矢量库：https://www.iconfont.cn/?spm=a313x.search_index.i3.2.22ee3a81PJbfBc

1.首先全部加入到购物车中，下载资源文件，将其中的iconfont.json和iconfont.ttf放入自建的fonts文件夹中

2.配置pubspec.yaml其中的fonts中的fonts路径，格式不能错误

  fonts:
    - family: myIcon1
      fonts:
        - asset: fonts/iconfont.ttf
    - family: myIcon2
      fonts:       
        - asset: fonts/iconfont1.ttf

3.将其中的unicode放到新建dart文件myIcon.dart中的Codepoint中，即IconData中参数

要多一个dart文件去创建一些组件的基本信息
最后将本文件引入创建好的文件就可以通用了

import 'package:flutter/material.dart';

class myIcon{

static const IconData weixin1 = IconData(
  0xe6ea,
  fontFamily: "myIcon1",
  matchTextDirection: true,
);
static const IconData weixin2 = IconData(
  0xe665,
  fontFamily: "myIcon1",
  matchTextDirection: true,
);

static const IconData yule1 = IconData(
  0xf01da,
  fontFamily: "myIcon2",
  matchTextDirection: true,
);

static const IconData yule2 = IconData(
  0xe61f,
  fontFamily: "myIcon2",
  matchTextDirection: true,
);
}

//可以直接进行调用
        Icon(myIcon.weixin1,
        size: 40,
        color: Colors.yellow,),
        SizedBox(height: 20,),
        Icon(myIcon.weixin2,
        size: 40,
        color: Colors.yellow,),
        SizedBox(height: 20,),
        Icon(myIcon.yule1,
        size: 40,
        color: Colors.blue,),
        SizedBox(height: 20,),
        Icon(myIcon.yule2,
        size: 40,
        color:Colors.black26)

如果没有显示的话可能要清除一下缓存，使用命令

flutter clean

所有代码

import 'package:flutter/material.dart';
import './myIcon.dart';
void main()
{
  runApp(MaterialApp(
    home:Scaffold(
      appBar: AppBar(title: Text("Hello"),),
      body: coin(),
      )
    )
);
}

class coin extends StatelessWidget {
  const coin({super.key});

  @override
  Widget build(BuildContext context) {
    return const Column(
      children: [
        SizedBox(height: 20,),
        Icon(Icons.home_work_rounded,
        size: 40,
        color: Colors.red,
        ),
        SizedBox(height: 20,),
        Icon(Icons.settings_applications_outlined,
         size: 40,
         color: Colors.red,),
        SizedBox(height: 20,),
        Icon(Icons.category_outlined, 
        size: 40,
        color: Colors.red,),
        SizedBox(height: 20,),
        Icon(myIcon.weixin1,
        size: 40,
        color: Colors.yellow,),
        SizedBox(height: 20,),
        Icon(myIcon.weixin2,
        size: 40,
        color: Colors.yellow,),
        SizedBox(height: 20,),
        Icon(myIcon.yule1,
        size: 40,
        color: Colors.blue,),
        SizedBox(height: 20,),
        Icon(myIcon.yule2,
        size: 40,
        color:Colors.black26)
      ],
    );
  }
}




import 'package:flutter/material.dart';

class myIcon{

static const IconData weixin1 = IconData(
  0xe6ea,
  fontFamily: "myIcon1",
  matchTextDirection: true,
);
static const IconData weixin2 = IconData(
  0xe665,
  fontFamily: "myIcon1",
  matchTextDirection: true,
);

static const IconData yule1 = IconData(
  0xf01da,
  fontFamily: "myIcon2",
  matchTextDirection: true,
);

static const IconData yule2 = IconData(
  0xe61f,
  fontFamily: "myIcon2",
  matchTextDirection: true,
);
}



  fonts:
    - family: myIcon1
      fonts:
        - asset: fonts/iconfont.ttf
    - family: myIcon2
      fonts:       
        - asset: fonts/iconfont1.ttf

  #