文章目錄

• 一、加載 Flutter 內置的圖標
• 三、完整代碼示例
• 三、相關資源
• 四、Icons 圖標參考 ( 超長截圖 | 材料設計圖標完整展示 )

一、加載 Flutter 內置的圖標

---

Flutter 中的圖標組件 Icon , 專門用于顯示圖標 ;

Flutter 中內置了一些默認圖標 , 可以在 https://material.io/resources/icons/ 界面進行查詢 ;

使用 Icon 組件加載 Flutter 內置圖標時 , 所在的 dart 源碼文件中 , 需要導入材料設計包 ,

import 'package:flutter/material.dart';

使用 Icon 示例 :

Center(// 加載 Flutter 內置圖標child: Icon(Icons.threed_rotation, size: 200,), ),

運行效果 :

三、完整代碼示例

---

import 'package:flutter/material.dart'; import 'dart:io'; import 'package:path_provider/path_provider.dart'; import 'package:transparent_image/transparent_image.dart'; import 'package:cached_network_image/cached_network_image.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {// This widget is the root of your application.@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo',theme: ThemeData(primarySwatch: Colors.blue,),home: MyHomePage(title: 'Flutter Demo Home Page'),);} }class MyHomePage extends StatefulWidget {MyHomePage({Key key, this.title}) : super(key: key);final String title;@override_MyHomePageState createState() => _MyHomePageState(); }class _MyHomePageState extends State<MyHomePage> {int _counter = 0;void _incrementCounter() {setState(() {_counter++;});}/// SD 卡路徑String sdPath;@overridevoid initState() {// 獲取 SD 卡路徑getSdPath();}void getSdPath() async {String path = (await getExternalStorageDirectory()).path;setState(() {sdPath = path;});}@overrideWidget build(BuildContext context) {print("sdPath : $sdPath");return Scaffold(appBar: AppBar(title: Text(widget.title),),body: Center(child: ListView(children: [Center(// 加載 Flutter 內置圖標child: Icon(Icons.threed_rotation, size: 200,),),Stack(children: [Center(// 網絡加載時顯示本地的資源圖片child: FadeInImage.assetNetwork(// Placeholderplaceholder: "images/waiting.gif",image: "https://img-blog.csdnimg.cn/20210324110914742.png",),)],),Stack(children: [// 進度條Center(child: CircularProgressIndicator(),),Center(// 網絡加載時漸變出現child: FadeInImage.memoryNetwork(// Placeholderplaceholder: kTransparentImage,image: "https://img-blog.csdnimg.cn/2021032321394771.png",),)],),Center(// 圖片加載完成之前顯示的是 placeholder , 加載完成后顯示網絡圖片child: CachedNetworkImage(// 加載網絡圖片過程中顯示的內容 , 這里顯示進度條placeholder: (context, url)=>CircularProgressIndicator(),// 網絡圖片地址imageUrl: "https://img-blog.csdnimg.cn/20210324100419204.png",),),// 圖片組件 , 從網絡中加載一張圖片Image.network(// 圖片地址"https://img-blog.csdnimg.cn/2021032313493741.png",),Image(image: AssetImage("images/sidalin.png"),),//Image.asset('images/sidalin2.png', ),/// 從 SD 卡加載圖片if(sdPath != null)Image.file(File('$sdPath/sidalin3.png'),width: 200,),],)),floatingActionButton: FloatingActionButton(onPressed: _incrementCounter,tooltip: 'Increment',child: Icon(Icons.add),), // This trailing comma makes auto-formatting nicer for build methods.);} }

三、相關資源

---

參考資料 :

• Flutter 官網 : https://flutter.dev/
• Flutter 插件下載地址 : https://pub.dev/packages
• Flutter 開發文檔 : https://flutter.cn/docs ( 強烈推薦 )
• 官方 GitHub 地址 : https://github.com/flutter
• Flutter 中文社區 : https://flutter.cn/
• Flutter 實用教程 : https://flutter.cn/docs/cookbook
• Flutter CodeLab : https://codelabs.flutter-io.cn/
• Dart 中文文檔 : https://dart.cn/
• Dart 開發者官網 : https://api.dart.dev/
• Flutter 中文網 ( 非官方 , 翻譯的很好 ) : https://flutterchina.club/ , http://flutter.axuer.com/docs/
• Flutter 相關問題 : https://flutterchina.club/faq/ ( 入門階段推薦看一遍 )
• GitHub 上的 Flutter 開源示例 : https://download.csdn.net/download/han1202012/15989510

博客源碼下載 :

• GitHub 地址 : https://github.com/han1202012/flutter_image_widget ( 隨博客進度一直更新 , 有可能沒有本博客的源碼 )

• 博客源碼快照 : https://download.csdn.net/download/han1202012/16073006 ( 本篇博客的源碼快照 , 可以找到本博客的源碼 )

四、Icons 圖標參考 ( 超長截圖 | 材料設計圖標完整展示 )

---

Flutter 中內置的圖標名稱與下圖中的大致類似 , 不完全一樣 , 但基本名稱差不多 ;

總結

以上是生活随笔為你收集整理的【Flutter】Icons 组件 ( 加载 Flutter 内置的图标 | 材料设计图标完整展示 )的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。