【Flutter】Icons 組件 ( 加載 Flutter 內(nèi)置的圖標(biāo) | 材料設(shè)計(jì)圖標(biāo)完整展示 )

文章目錄

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

三、完整代碼示例

三、相關(guān)資源

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

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

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

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

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

import 'package:flutter/material.dart';

1

使用 Icon 示例 :

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

1

2

3

4

運(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. @override Widget 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 { int _counter = 0; void _incrementCounter() { setState(() { _counter++; }); } /// SD 卡路徑 String sdPath; @override void initState() { // 獲取 SD 卡路徑 getSdPath(); } void getSdPath() async { String path = (await getExternalStorageDirectory()).path; setState(() { sdPath = path; }); } @override Widget 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ò)加載時(shí)顯示本地的資源圖片 child: FadeInImage.assetNetwork( // Placeholder placeholder: "images/waiting.gif", image: "https://img-blog.csdnimg.cn/20210324110914742.png", ), ) ], ), Stack( children: [ // 進(jìn)度條 Center(child: CircularProgressIndicator(),), Center( // 網(wǎng)絡(luò)加載時(shí)漸變出現(xiàn) child: FadeInImage.memoryNetwork( // Placeholder placeholder: kTransparentImage, image: "https://img-blog.csdnimg.cn/2021032321394771.png", ), ) ], ), Center( // 圖片加載完成之前顯示的是 placeholder , 加載完成后顯示網(wǎng)絡(luò)圖片 child: CachedNetworkImage( // 加載網(wǎng)絡(luò)圖片過(guò)程中顯示的內(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. ); } }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

三、相關(guān)資源

參考資料 :

Flutter 官網(wǎng) : https://flutter.dev/

Flutter 插件- : https://pub.dev/packages

Flutter 開(kāi)發(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 開(kāi)發(fā)者官網(wǎng) : https://api.dart.dev/

Flutter 中文網(wǎng) ( 非官方 , 翻譯的很好 ) : https://flutterchina.club/ , http://flutter.axuer.com/docs/

Flutter 相關(guān)問(wèn)題 : https://flutterchina.club/faq/ ( 入門(mén)階段推薦看一遍 )

GitHub 上的 Flutter 開(kāi)源示例 : https://download.csdn.net/download/han1202012/15989510

博客源碼下載 :

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

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

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

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

Flutter GitHub

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶(hù)投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請(qǐng)聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶(hù)投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請(qǐng)聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。