首页 > 其他分享 >Flutter的Icon

Flutter的Icon

时间:2024-03-05 13:00:51浏览次数:17  
标签:IconData color fonts Colors Icon Flutter size

1 基本的组件使用(自带)

Cloumn算一个和自定义Container齐平的一个组件
使用比较简单,但是Icon中有很多对Icon进行设置的方式

疑问:是否能够对Icon进行圆角修饰呢??

 return const Column(
      children: [
        SizedBox(height: 20,),
        Icon(Icons.home_work_rounded,
        size: 40,
        color: Colors.red,
        ),
        SizedBox(height: 20,),
        Icon(Icons.settings_applications_outlined,
         size: 40,
         color: Colors.red,),
        SizedBox(height: 20,),
        Icon(Icons.category_outlined, 
        size: 40,
        color: Colors.red,),

2 对于不是本地的Icon

阿里云矢量库:https://www.iconfont.cn/?spm=a313x.search_index.i3.2.22ee3a81PJbfBc

1.首先全部加入到购物车中,下载资源文件,将其中的iconfont.json和iconfont.ttf放入自建的fonts文件夹中

2.配置pubspec.yaml其中的fonts中的fonts路径,格式不能错误

  fonts:
    - family: myIcon1
      fonts:
        - asset: fonts/iconfont.ttf
    - family: myIcon2
      fonts:       
        - asset: fonts/iconfont1.ttf

3.将其中的unicode放到新建dart文件myIcon.dart中的Codepoint中,即IconData中参数

要多一个dart文件去创建一些组件的基本信息
最后将本文件引入创建好的文件就可以通用了

import 'package:flutter/material.dart';

class myIcon{

static const IconData weixin1 = IconData(
  0xe6ea,
  fontFamily: "myIcon1",
  matchTextDirection: true,
);
static const IconData weixin2 = IconData(
  0xe665,
  fontFamily: "myIcon1",
  matchTextDirection: true,
);

static const IconData yule1 = IconData(
  0xf01da,
  fontFamily: "myIcon2",
  matchTextDirection: true,
);

static const IconData yule2 = IconData(
  0xe61f,
  fontFamily: "myIcon2",
  matchTextDirection: true,
);
}


//可以直接进行调用
        Icon(myIcon.weixin1,
        size: 40,
        color: Colors.yellow,),
        SizedBox(height: 20,),
        Icon(myIcon.weixin2,
        size: 40,
        color: Colors.yellow,),
        SizedBox(height: 20,),
        Icon(myIcon.yule1,
        size: 40,
        color: Colors.blue,),
        SizedBox(height: 20,),
        Icon(myIcon.yule2,
        size: 40,
        color:Colors.black26)

如果没有显示的话可能要清除一下缓存,使用命令

flutter clean

标签:IconData,color,fonts,Colors,Icon,Flutter,size
From: https://www.cnblogs.com/EternalX/p/18053770

相关文章

  • flutter动画— —显式动画
    常见的显式动画有RotationTransition、FadeTransition、ScaleTransition、SlideTransition、AnimatedIcon。在显示动画中开发者需要创建一个AnimationController,通过AnimationController控制动画的开始、暂停、重置、跳转、倒播等。RotationTransition(旋转动画)、AnimationC......
  • northwest uniapp: 顶部导航栏右侧添加uni-icons图标,并绑定点击事
    说明该配置按页面配置,无法全局配置使用方法引入uni-icons插件插件地址:点击此处跳转到uni-icons引入以后,会发现uni-modules中新增如下目录和文件:仅需要那个uniicons.ttf文件,不引入插件、单独把那个文件下载到本地也是可以的。复制uniicons.ttf文件到static目录下不知道......
  • Flutter组件
    两个常用的组件:Material和Scaffold修饰App和H5一样很固定。1.Container2.Text3.pictureimport'package:flutter/material.dart';voidmain(){runApp(MaterialApp(home:Scaffold(appBar:AppBar(title:Text("Flutter")),bod......
  • Flutter widget_id: key 的使用
    Flutterwidgetid(唯一标识):keykey的作用Key是一个附加到元素(widgets,semantics,renderobjects等)的标识符。它用于控制框架是否应将旧widget与当前树中的其他widget匹配起来。简单来说,Keys的作用主要在于保持状态和在widget树重建时识别哪些widget是相同的。key的......
  • Flutter 定义局部路由 Navigator
    Flutter中,通常我们使用Navigator来管理全局的页面路由,在整个应用中维护一个路由堆栈。但是,有些情况下你可能需要一个局部路由,也就是在应用的某个部分内部维护一个独立的路由堆栈,而不影响全局路由。为了实现这一点,你可以在你的应用中创建一个新的Navigator局部路由简单使用......
  • Isolate线程通信 flutter
    A、B互传消息A、B都创建自己的接收端口和发送端口A将自己的发送端口发送给对面B,B才能拿到A的发送端口,给A发送消息A监听自己的接收端口,拿到B发给自己的消息B监听自己的接收端口,拿到A发给自己的消息voidfunction_main()async{print("当前线程:"+Isolate.current.debu......
  • Flutter 页面跳转并返回数据
     主页面FutureonSubmit()async{finalresult=awaitGet.to(constPageGoodsSelectList());print(result.name);goodsId.value=result.id;setState((){goodsname.value=result.name;});}调用onSubmit跳转到下一个页面 onChildT......
  • 为什么iOS包比Android包大 flutter
    由于Android系统已经内置了Skia,所以Flutter在打包APK(Android应用安装包)时,不需要再将Skia打入APK中,但iOS系统并未内置Skia,所以构建iPA时,也必须将Skia一起打包 安卓1.在debug模式下,so库打入了x86_64、x86、arm64-v8a,总共22.28M2.在release模式下,so库只有armeabi-v7a,总共3.4......
  • Flutter界面跳转
    第一种带参数跳转import'package:flutt/scrond_page.dart';import'package:flutt/third_page.dart';import'package:flutter/cupertino.dart';import'package:flutter/material.dart';voidmain(){runApp(constCupertinoApp(......
  • Flutter 使用inspector 调试UI
    1.在AndroidStudio中点击Flutterinspector2.点击FlutterPerformace-openDevtool在浏览器中调试3.点选中widget可以在widget树中和模拟器中相互点击调试、相应控件会高亮4.其他功能 ......