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
- 頁面引入
這樣就可以在我們的頁面中使用第三方圖標了
