Flutter color颜色的用法

简介: Flutter color颜色的用法

系统自带color的使用和自定义color


系统的color

查看Color的源码

  static const Color black = Color(0xFF000000);

可以看到,这里的black也是赋值封装好的,我们可以直接调用(Colors.black 即可)。

当然系统也封装了很多的color使用(查看源码轻松找到),

image.png

import 'package:flutter/material.dart';
class YColors {
  static const Color colorPrimary = Color(0xff4caf50);
  static const Color colorPrimaryDark = Color(0xff388E3C);
  static const Color colorAccent = Color(0xff8BC34A);
  static const Color colorPrimaryLight = Color(0xffC8E6C9);
  static const Color primaryText = Color(0xff212121);
  static const Color secondaryText = Color(0xff757575);
  static const Color dividerColor = Color(0xffBDBDBD);
}

调用:


theme: ThemeData(
  ...
        primaryColor: YColors.colorPrimary,
        primaryColorDark: YColors.colorPrimaryDark,
        accentColor: YColors.colorAccent,
        dividerColor: YColors.dividerColor,
      ),


不过这里注意color的值,不是#ff0000格式的了,是ARGB格式的



什么是ARGB

在flutter中,color使用的是ARGB,0x后面的就是ARGB,A就是FF表示透明度,RGB就是三原色了,


比如,RGB的红色是#ff0000


所以,ARGB红色我们就可以这样表示


0xffff0000



我们除了改主题的颜色之外,还有很多系统的控件颜色都可以修改的,查看源码ThemeData即可。



目录
相关文章
|
8月前
Flutter笔记:AnimationMean、AnimationMax 和 AnimationMin 三个类的用法
Flutter笔记:AnimationMean、AnimationMax 和 AnimationMin 三个类的用法
73 3
|
1天前
|
Dart 小程序 前端开发
WebSocket 解析与应用(包含web前端、服务端、小程序、dart/flutter中的用法)
WebSocket 解析与应用(包含web前端、服务端、小程序、dart/flutter中的用法)
236 0
|
1天前
|
开发框架 Java 开发者
Flutter特殊用法介绍
Flutter特殊用法介绍 Flutter是一种开源移动应用程序开发框架,具有高效、快速、美观、灵活等特点。本文将介绍Flutter中的一些特殊用法,帮助开发者更好地使用Flutter进行应用程序开发。
|
存储 Android开发 iOS开发
flutter系列之:Navigator的高级用法
上篇文章我们讲到了flutter中navigator的基本用法,我们可以使用它的push和pop方法来进行Router之间的跳转。 在flutter中一个Router就是一个widget,但是在Android中,一个Router就是Activity,在IOS中,一个Router是一个ViewController。 Router除了之前讲过的push和pop方法之外,还有一些更加高级的用法,一起来看看吧。
flutter系列之:Navigator的高级用法
flutter系列之:flutter中listview的高级用法
一般情况下,我们使用Listview的方式是构建要展示的item,然后将这些item传入ListView的构造函数即可,通常情况下这样做是够用了,但是不排除我们会有一些其他的特殊需求。 今天我们会来讲解一下ListView的一些高级用法。
|
存储 Dart 前端开发
Flutter(三)——一篇文章掌握Dart语言的用法(三)
Flutter(三)——一篇文章掌握Dart语言的用法(三)
234 0
Flutter(三)——一篇文章掌握Dart语言的用法(三)
|
存储 Dart JavaScript
Flutter(三)——一篇文章掌握Dart语言的用法(一)
Flutter(三)——一篇文章掌握Dart语言的用法(一)
333 0
Flutter(三)——一篇文章掌握Dart语言的用法(一)
|
Dart JavaScript 前端开发
Flutter(三)——一篇文章掌握Dart语言的用法(二)
Flutter(三)——一篇文章掌握Dart语言的用法(二)
247 0
|
Dart 索引
【Flutter】Dart 数据类型 List 集合类型 ( 定义集合 | 初始化 | 泛型用法 | 初始化后添加元素 | 集合生成函数 | 集合遍历 )
【Flutter】Dart 数据类型 List 集合类型 ( 定义集合 | 初始化 | 泛型用法 | 初始化后添加元素 | 集合生成函数 | 集合遍历 )
569 0
|
1天前
|
缓存 监控 前端开发
【Flutter 前端技术开发专栏】Flutter 应用的启动优化策略
【4月更文挑战第30天】本文探讨了Flutter应用启动优化策略,包括理解启动过程、资源加载优化、减少初始化工作、界面布局简化、异步初始化、预加载关键数据、性能监控分析以及案例和未来优化方向。通过这些方法,可以缩短启动时间,提升用户体验。使用Flutter DevTools等工具可助于识别和解决性能瓶颈,实现持续优化。
【Flutter 前端技术开发专栏】Flutter 应用的启动优化策略

热门文章

最新文章