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}); Widget 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
- 页面引入
这样就可以在我们的页面中使用第三方图标了