前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Flutter 中Color 使用

Flutter 中Color 使用

作者头像
zhangjiqun
发布于 2024-12-16 10:26:28
发布于 2024-12-16 10:26:28
7400
代码可运行
举报
文章被收录于专栏:计算机工具计算机工具
运行总次数:0
代码可运行
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
      bottomNavigationBar: BottomNavigationBar(
        items: const<BottomNavigationBarItem>[
          BottomNavigationBarItem(
              icon: Icon(Icons.home), title: Text("Home")),
          BottomNavigationBarItem(
              icon: Icon(Icons.cake), title: Text("Center")),
          BottomNavigationBarItem(
              icon: Icon(Icons.edit), title: Text("End")),

        ],
        currentIndex: _selectIndex,
        unselectedItemColor: Colors.blue,
        backgroundColor: Color(0xFFff5656),
        selectedFontSize: 22,
        selectedItemColor: Colors.amber[900],
        onTap: _onItemTapped,
      ),

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
backgroundColor: Color(0xFFff5656),  //红色  严格按照 0x +透明度+red+green+blue
selectedItemColor: Colors.amber[900],  //琥珀色 

新建自定义color:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import 'package:flutter/material.dart';

class CostomColors {
  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);
}
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
使用:selectedItemColor: CostomColors.colorPrimaryDark,

发现个问题:包名和调用名称 不一致但是只要代码中的class名一直就行,说明这个可以做成配置文件。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2024-12-16,如有侵权请联系 cloudcommunity@tencent.com 删除

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

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

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

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
在 Flutter 中使用 NavigationRail 和 BottomNavigationBar【Flutter专题33】
本文将向您展示如何使用NavigationRail和BottomNavigationBar在 Flutter 中创建自适应布局。我们将浏览一下这个概念,然后通过一个完整的例子来在实践中应用这个概念。
徐建国
2022/03/30
2.3K0
在 Flutter 中使用 NavigationRail 和 BottomNavigationBar【Flutter专题33】
Flutter color颜色的用法
可以看到,这里的black也是赋值封装好的,我们可以直接调用(Colors.black 即可)。
yechaoa
2022/06/10
7300
Flutter color颜色的用法
Flutter基础widgets教程-BottomNavigationBar篇
1 BottomNavigationBar 显示在应用程序的底部,用于在少量视图中进行选择,通常在三到五之间。 2 构造函数 BottomNavigationBar({ Key key, @required List<BottomNavigationBarItem> items, ValueChanged<int> onTap, int currentIndex: 0, double elevation: 8.0, BottomNavigationB
青年码农
2020/10/10
1.7K0
Flutter基础widgets教程-BottomNavigationBar篇
Flutter 创建一个很酷的 Booking App UI
这是一个非常酷的项目,您将在其中学习如何实现标签栏、具有水平滚动的列表视图以及如何创建底部Flutter 中的导航栏,所以不用多说,让我们开始吧。
徐建国
2021/08/02
6050
Flutter Widgets 之 BottomNavigationBar
BottomNavigationBar 和 BottomNavigationBarItem配合Scaffold控件使用可以实现底部导航效果,类似于微信底部的导航效果,下面是一个简单的底部导航案例:
老孟Flutter
2020/09/11
8260
【Flutter】StatefulWidget 组件 ( 底部导航栏组件 | BottomNavigationBar 组件 | BottomNavigationBarItem 组件 | 选项卡切换 )
BottomNavigationBar 组件是底部导航栏 , 用于设置给 Scaffold 组件的 bottomNavigationBar 字段 ;
韩曙亮
2023/03/28
2.6K0
【Flutter】StatefulWidget 组件 ( 底部导航栏组件 | BottomNavigationBar 组件 | BottomNavigationBarItem 组件 | 选项卡切换 )
Flutter简单介绍以及 Hello World解析
flutter:学习官网:https://api.flutter.dev/flutter/material/RaisedButton-class.html
zhangjiqun
2024/12/16
1640
Flutter布局基础——BottomNavigationBar
Flutter中BottomNavigationBar类似于 iOS 中的UITabbarController,是导航控制器的一种,常用于首页 Tab 切换。
莫空9081
2021/08/18
3.2K0
【Flutter】Flutter 布局组件 ( PhysicalModel 组件 )
代码示例 : PhysicalModel 组件裁剪 PageView 组件 , 将 PageView 组件裁剪成圆角矩形样式 ;
韩曙亮
2023/03/28
1.4K0
【Flutter】Flutter 布局组件 ( PhysicalModel 组件 )
【Flutter】底部导航栏实现 ( BottomNavigationBar 底部导航栏 | BottomNavigationBarItem 导航栏条目 | PageView )
Flutter 中的 Scaffold 组件实现了基础的材料设计 ( Material Design ) 可视化布局结构 ;
韩曙亮
2023/03/29
6.8K0
【Flutter】底部导航栏实现 ( BottomNavigationBar 底部导航栏 | BottomNavigationBarItem 导航栏条目 | PageView )
本文主要介绍flutter聊天应用程序
在本教程中,我将向您展示如何使用 Flutter 构建一个完整的聊天应用程序。对于这一部分,我们将创建应用程序的 UI 原型,然后我将向您展示如何使用 firebase 创建后端服务并创建聊天系统。
徐建国
2021/07/31
7550
Flutter 多语言、主题切换之GetX库
  关于GetX库前面我们讲述了状态管理的使用,实际上GetX是非常强大的,功能很多,本篇文章中我们将介绍GetX的多语言切换和主题切换等功能。
晨曦_LLW
2024/05/25
1.3K0
Flutter 多语言、主题切换之GetX库
Flutter BottomNavigation 底部导航详解 及问题记录
这里多数一句 Flutter 提供了两套预设的主题UI 这些UI有很多的常量可以直接引入使用
拿我格子衫来
2022/01/24
3.5K0
Flutter  BottomNavigation 底部导航详解 及问题记录
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutte
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-卓伊凡换人优雅草Alex
卓伊凡
2025/02/02
1870
Flutter实例一--底部规则导航栏制作
StatefulWidget具有可变状态(state)的窗口组件(widget)。使用时要根据变化状态,调整State值,
wfaceboss
2019/04/08
1.5K0
Flutter实例一--底部规则导航栏制作
flutter鸿蒙版本通过底部导航栏的实现熟悉架构及语法
在这篇博客中,我们将深入分析一个 Flutter 应用的完整代码,该应用实现了一个底部导航栏,允许用户在不同页面之间切换。我们将逐行讲解代码,帮助大家理解 Flutter 的结构、状态管理以及组件之间的交互。
淼学派对
2024/10/08
2180
Flutter入门(四)
自定义的好处是可以在addListener中增加监听,通过setState修改状态
用户3112896
2019/12/27
1.5K0
Flutter 简易新闻项目目标效果对比简介代码代码地址
使用flutter快速开发 Android 和 iOS 的简易的新闻客户端 API使用的是 showapi(易源数据) 加载热门微信文章
gwk_iOS
2018/12/05
1.3K0
Flutter中是使用RxDart代替Stateful
其中_currentIndex记录了当前tab的索引,onTap中调用setState来更新视图,没毛病。
我不是码神
2022/07/28
1.2K2
Flutter容器类组件
⚠️注意, Flutter官方并没有对Widget进行如此划分。中文版《Flutter实战》对其分类主要是方便讨论和对Widget功能区分记忆。
白白白小艾
2022/03/24
4K0
推荐阅读
相关推荐
在 Flutter 中使用 NavigationRail 和 BottomNavigationBar【Flutter专题33】
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验