【Flutter】Icons 组件 ( 加载 Flutter 内置的图标 | 材料设计图标完整展示 )

网友投稿 2194 2022-05-30

文章目录

一、加载 flutter 内置的图标

三、完整代码示例

三、相关资源

四、Icons 图标参考 ( 超长截图 | 材料设计图标完整展示 )

一、加载 Flutter 内置的图标

Flutter 中的图标组件 Icon , 专门用于显示图标 ;

Flutter 中内置了一些默认图标 , 可以在 https://material.io/resources/icons/ 界面进行查询 ;

使用 Icon 组件加载 Flutter 内置图标时 , 所在的 dart 源码文件中 , 需要导入材料设计包 ,

import 'package:flutter/material.dart';

1

使用 Icon 示例 :

Center( // 加载 Flutter 内置图标 child: Icon(Icons.threed_rotation, size: 200,), ),

1

2

3

4

运行效果 :

三、完整代码示例

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 内置图标 child: Icon(Icons.threed_rotation, size: 200,), ), Stack( children: [ Center( // 网络加载时显示本地的资源图片 child: FadeInImage.assetNetwork( // Placeholder placeholder: "images/waiting.gif", image: "https://img-blog.csdnimg.cn/20210324110914742.png", ), ) ], ), Stack( children: [ // 进度条 Center(child: CircularProgressIndicator(),), Center( // 网络加载时渐变出现 child: FadeInImage.memoryNetwork( // Placeholder placeholder: 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. ); } }

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

【Flutter】Icons 组件 ( 加载 Flutter 内置的图标 | 材料设计图标完整展示 )

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

三、相关资源

参考资料 :

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 GitHub

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:专家专栏 | 使用Zabbix监控Ceph集群的三种方式
下一篇:mui框架从0到1【webapp开发教程】
相关文章