【Flutter】Icons 组件 ( 加载 Flutter 内置的图标 | 材料设计图标完整展示 )
文章目录
- 一、加载 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 内置的图标 | 材料设计图标完整展示 )相关推荐
- Flutter Image 图片加载
题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精. 目前在西瓜视频上免费刊登 Flutter 系列教程,每日更新,欢迎关注接收提醒 [x1]微信公众号的每日提醒 随时随记 每日积累 随心 ...
- Flutter 实现剑气加载
前言:前几天在掘金上看到一篇文章,用html+css编写了一个剑气加载的动效.前端能做的东西,我Flutter大前端岂能罢休?于是小弟班门弄斧,用Flutter编写了这个剑气动效.相关掘金文章:jue ...
- web.xml 组件加载顺序
转载自 web.xml 组件加载顺序 在配置项目组件的过程中, 了解Tomcat加载组件顺序很有必要. 例如某些框架如Quartz的集群功能需要数据库的支持, 数据库的加载肯定要在框架组件加载之前. ...
- 加载顺序_Java的web.xml组件加载顺序
在配置项目组件的过程中, 了解Tomcat加载组件顺序很有必要. 例如某些框架如Quartz的集群功能需要数据库的支持, 数据库的加载肯定要在框架组件加载之前. 经过查阅和Debug发现, web.x ...
- vue 如何处理两个组件异步问题_Vue异步组件处理路由组件加载状态的解决方案...
vue.js 组件 组件(Component)是 Vue.js 最强大的功能之一. 组件可以扩展 HTML 元素,封装可重用的代码. 在大型单页面应用中,处于对性能的考虑和首屏加载速度的要求,我们一般 ...
- webpack配置vue组件加载器
前言 App.vue单文件组件代码 <template><div><h1>App根组件</h1></div> </template&g ...
- Ogre 编辑器二(用Ogre的地形组件加载天龙八部地形)
主界面如上文设计完成后,场景刚开始添加了是Ogre例子里的,发现场景里实物太少,于是想到直接把天龙的场景拿下来,天龙网上有源码,参考了下,把天龙的地形用Ogre的地形组件完成了下,如下是效果图: 因为 ...
- 【翻译】基于 Create React App路由4.0的异步组件加载(Code Splitting)
基于 Create React App路由4.0的异步组件加载 本文章是一个额外的篇章,它可以在你的React app中,帮助加快初始的加载组件时间.当然这个操作不是完全必要的,但如果你好奇的话,请随 ...
- 【转载】使用Imaging组件加载GIF动画
Mobil手机加载GIF动态图像的方法有两种,一个就是使用GIF89a标准算法,另一个就是使用SDK自带的Imaging组件,这两种方法是很典型的手机图像处理技术的实践.使用Imaging组件加载GI ...
最新文章
- Linux系统的进程管理
- excel查找空值快捷键_Excel工资表怎么做?3分钟学会利用函数生成工资表
- BootStrap笔记-Model(模式对话框)样式修改
- 一个完整的数据分析体系,该长啥样?
- 程序员选择公司的8个标准
- shell read
- oracle XDB和XPT
- mysql的底层运行原理,【数据库】震惊!!MySQL的底层原理竟然是这样
- LitePal的简单使用
- 如何使用FreeSSL申请免费证书?
- LigerUI的简单使用示例
- sails 数据库字段
- openstack上 的云主机手动疏散案例
- linux服务器做301跳转,什么是301转向,如何去做301跳转
- JS编写 三角形三边求面积
- Typora配色方案
- Android 图片压缩技术
- 一阶导数和二阶导数的意义
- Yao‘s GC 的通信最优解:Half Gate
- [C++贪心习题]压缩歌曲
热门文章
- Zabbix配置详解
- IT民工——全世界最齐全的条形码库!包括Code128/Code93/Code39/EAN13等22种条形码
- 实现俄罗斯方块遇到的问题及游戏下载
- (转)C# Delegate.Invoke、Delegate.BeginInvoke
- Solr字段类型field type的定义
- ZooKeeper架构设计及其应用要点
- 计数排序/Counting Sort
- 无法连接到数据库服务器 could not connect to server: Connection refused
- 触发Full GC执行的情况 以及其它补充信息
- Intelij IDEA 2016.3安装mybatis插件并激活教程