文章目錄

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

一、加載 Flutter 內(nèi)置的圖標(biāo)

---

Flutter 中的圖標(biāo)組件 Icon , 專門用于顯示圖標(biāo) ;

Flutter 中內(nèi)置了一些默認(rèn)圖標(biāo) , 可以在 https://material.io/resources/icons/ 界面進(jìn)行查詢 ;

使用 Icon 組件加載 Flutter 內(nèi)置圖標(biāo)時 , 所在的 dart 源碼文件中 , 需要導(dǎo)入材料設(shè)計包 ,

import 'package:flutter/material.dart';

使用 Icon 示例 :

Center(// 加載 Flutter 內(nèi)置圖標(biāo)child: Icon(Icons.threed_rotation, size: 200,), ),

運(yùn)行效果 :

三、完整代碼示例

---

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 內(nèi)置圖標(biāo)child: Icon(Icons.threed_rotation, size: 200,),),Stack(children: [Center(// 網(wǎng)絡(luò)加載時顯示本地的資源圖片child: FadeInImage.assetNetwork(// Placeholderplaceholder: "images/waiting.gif",image: "https://img-blog.csdnimg.cn/20210324110914742.png",),)],),Stack(children: [// 進(jìn)度條Center(child: CircularProgressIndicator(),),Center(// 網(wǎng)絡(luò)加載時漸變出現(xiàn)child: FadeInImage.memoryNetwork(// Placeholderplaceholder: kTransparentImage,image: "https://img-blog.csdnimg.cn/2021032321394771.png",),)],),Center(// 圖片加載完成之前顯示的是 placeholder , 加載完成后顯示網(wǎng)絡(luò)圖片child: CachedNetworkImage(// 加載網(wǎng)絡(luò)圖片過程中顯示的內(nèi)容 , 這里顯示進(jìn)度條placeholder: (context, url)=>CircularProgressIndicator(),// 網(wǎng)絡(luò)圖片地址imageUrl: "https://img-blog.csdnimg.cn/20210324100419204.png",),),// 圖片組件 , 從網(wǎng)絡(luò)中加載一張圖片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.);} }

三、相關(guān)資源

---

參考資料 :

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

博客源碼下載 :

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

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

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

---

Flutter 中內(nèi)置的圖標(biāo)名稱與下圖中的大致類似 , 不完全一樣 , 但基本名稱差不多 ;

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。