前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【Flutter】Icons 组件 ( 加载 Flutter 内置的图标 | 材料设计图标完整展示 )

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

作者头像
韩曙亮
发布2023-03-29 09:01:30
1.8K0
发布2023-03-29 09:01:30
举报

文章目录

一、加载 Flutter 内置的图标


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

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

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

代码语言:javascript
复制
import 'package:flutter/material.dart';

使用 Icon 示例 :

代码语言:javascript
复制
Center(
  // 加载 Flutter 内置图标
  child: Icon(Icons.threed_rotation, size: 200,),
),
在这里插入图片描述
在这里插入图片描述

运行效果 :

在这里插入图片描述
在这里插入图片描述

三、完整代码示例


代码语言:javascript
复制
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<MyHomePage> {
  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.
    );
  }
}

三、相关资源


参考资料 :

博客源码下载 :

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


Flutter 中内置的图标名称与下图中的大致类似 , 不完全一样 , 但基本名称差不多 ;

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2021-03-24,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 文章目录
  • 一、加载 Flutter 内置的图标
  • 三、完整代码示例
  • 三、相关资源
  • 四、Icons 图标参考 ( 超长截图 | 材料设计图标完整展示 )
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档