【Flutter3.8x】flutter从入门到实战基础教程(五):Material Icons图标的使用

flutter给我们内置准备了很多图标，这些图标可以使我们在没有设计师的前提下，也能做出自己满意的app

icon网站

https://material.io/tools/icons/

进入网站后，点击我们需要的图标，然后滑动找到flutter的tab选项，就可以看到在fluuter中的图标名字了，很方便

实战效果

代码实现

import 'package:flutter/material.dart';
import 'package:material_design_icons_flutter/material_design_icons_flutter.dart';class IconPage extends StatelessWidget {const IconPage({super.key});@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('图标'),),body: Center(child: Row(mainAxisAlignment: MainAxisAlignment.center,children: [Icon(Icons.add_circle_outline),Icon(Icons.add_circle_outlined),Icon(Icons.add_circle_outlined,size: 50,),Icon(Icons.add_circle_outlined,color: Colors.red,size: 50,),Icon(Icons.shop,size: 60,color: Color(0xff72b236),),Icon(MdiIcons.outdoorLamp),Icon(Icons.perm_scan_wifi),Icon(Icons.power_settings_new),Icon(Icons.output),Icon(Icons.hourglass_full)],),));}
}

第三方插件的使用

如果有自己喜欢的第三方图标，也可以拿过来用

• 配置依赖

dependencies:flutter:sdk: fluttermaterial_design_icons_flutter: ^5.0.5955-rc.1

• 安装

flutter pub get

• 页面引入
  
  这样就可以在我们的页面中使用第三方图标了