首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Flutter :如何在亮和暗模式下为文本按钮设置2种不同的样式

Flutter是一种跨平台的移动应用开发框架,可以帮助开发者快速构建高性能、美观的应用程序。在Flutter中,可以使用ThemeData来实现在亮和暗模式下为文本按钮设置不同的样式。

首先,需要在Flutter应用程序的主题中定义亮和暗模式下的样式。可以通过创建两个不同的ThemeData对象来实现:

代码语言:txt
复制
ThemeData lightTheme = ThemeData(
  // 亮模式下的样式
  buttonTheme: ButtonThemeData(
    buttonColor: Colors.blue, // 按钮颜色
    textTheme: ButtonTextTheme.primary, // 文本样式
  ),
);

ThemeData darkTheme = ThemeData(
  // 暗模式下的样式
  buttonTheme: ButtonThemeData(
    buttonColor: Colors.grey, // 按钮颜色
    textTheme: ButtonTextTheme.accent, // 文本样式
  ),
);

接下来,在Flutter应用程序的根部件中使用Theme组件将定义好的主题应用到整个应用程序中:

代码语言:txt
复制
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: lightTheme, // 亮模式下的主题
      darkTheme: darkTheme, // 暗模式下的主题
      themeMode: ThemeMode.system, // 根据系统设置自动切换亮暗模式
      home: MyHomePage(),
    );
  }
}

最后,在需要设置不同样式的文本按钮处,可以使用FlatButton组件,并根据当前主题的不同设置不同的样式:

代码语言:txt
复制
FlatButton(
  child: Text('文本按钮'),
  onPressed: () {},
  style: Theme.of(context).brightness == Brightness.light
      ? ButtonStyle(
          // 亮模式下的样式
          backgroundColor: MaterialStateProperty.all(Colors.blue),
          foregroundColor: MaterialStateProperty.all(Colors.white),
        )
      : ButtonStyle(
          // 暗模式下的样式
          backgroundColor: MaterialStateProperty.all(Colors.grey),
          foregroundColor: MaterialStateProperty.all(Colors.black),
        ),
)

通过上述代码,我们可以根据当前的亮暗模式为文本按钮设置不同的样式。在亮模式下,按钮的背景颜色为蓝色,文本颜色为白色;在暗模式下,按钮的背景颜色为灰色,文本颜色为黑色。

腾讯云相关产品和产品介绍链接地址:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

一键切换亮色模式暗色模式,用Figma搞定!

另外,图像占位符颜色也是恒定,不会改变。 例如,在上图中,我们展示了该按钮在浅色深色主题中外观。图标,文本计数器具有恒定颜色。按钮背景有变化,但其中内容未更改。...1.可变样式 可变颜色样式分别适用于模式,并且它们都可以进一步细分为两个主要类别-颜色样式效果样式。出于本文目的,我们将主要讨论“模式,并且在将这些步骤应用于“模式时也稍作介绍。...每个原色由两种不同颜色对比组成,第一个由较浅版本原色组成,第二个类别由较版本原色组成。如下图: 要创建较浅较深基础色,您需要在其之上添加20%,40%60%白色黑色。...例如,在上面的表示按钮点击状态图片中,我们分别使用了较浅较深蓝色来表示按钮不同状态效果。...如何在亮色模式暗色模式之间切换 设置好设计系统后,就可以轻松地将组件模块切换为暗色模式了。为此,您将需要一个名为Appearance插件,该插件可以在Figma社区找到。

17.6K11

何在网页设计中实现深色模式:增强用户体验

然后,我们创建一个模式类,在其中使用适合模式值覆盖这些变量。 深色模式切换按钮 接下来,让我们创建一个切换按钮,允许用户在浅色模式深色模式之间切换。...我们将使用 HTML 作为按钮,使用 CSS 来设置样式: HTML 代码: CSS: 应用深色模式样式 最后,让我们根据切换按钮状态将深色模式样式应用到我们网页: 在此 CSS 中,我们使用':checked...'伪类在选中切换按钮时应用模式样式。...以下是如何在保持可访问性同时在黑暗模式下进行设计: 保持足够对比度:确保深色背景不会过多遮挡文本或交互功能,以便仍然可以阅读区分它们。...利用辅助功能工具进行测试:利用屏幕阅读器辅助功能测试工具来评估模式界面对于不同需求的人用户友好程度。

13210

6详解AppBar小部件

AppBar 通常显示概括本页功能模块,例如图标标题,并且通常包含按钮或其他用户交互点。...AppBar 包含各种属性,包括颜色、大小、图标主题、文本主题等等。 背景颜色 以下代码将 AppBar 背景颜色更改为深橙色。500添加以访问颜色特定阴影,900即最最亮50。...工具栏高度不透明度 最后,我们有工具栏属性。工具栏包含文字,图标,按钮其他任何公司前景,除了小部件,ContainerImage。...如果你已经做到了这一步,你现在应该明白: AppBar 是什么以及它如何在 Flutter 中使用 AppBar 布局 ( leading, title, actions) 如何自定义 AppBar...布局添加小部件 如何为 AppBar 图标、文本、背景、高度、阴影颜色工具栏设置主题 所以我们有了!

16.3K10

文本、图片按钮Flutter中怎么用

与iOS、AndroidReact类似,作为一个UI框架,Flutter自然也提供了很多UI控件。而文本、图片按钮,则是这些不同UI框架中构建视图都要用到三个最基本控件。...Flutter文本Text图片Image,我在前面的文章中都有过介绍,今天我们再来详细地聊一聊。...理解了单一样式文本Text使用方法后,我们再来看看如何在一段字符串中支持多种混合展示样式。...图片显示方式有很多,比如资源图片、网络图片、文件图片等,图片格式也各不相同,因此在Flutter中,也有多种方式用来加载不同形式、支持不同格式图片: 加载本地资源图片,: Image.asset...") 除了可以根据图片显示方式设置不同图片源之外,图片构造方法还提供了填充模式fit、拉伸模式centerSlice、重复模式repeat等属性,可以针对图片与目标区域宽高比差异制定排版模式

7.6K20

Flutter文本、图片按钮使用

文本、图片按钮则是这些不同UI框架中构建视图都要用到最基本控件。...图片显示方式很多,资源图片、网络图片、文件图片等,图片格式各不相同,在Flutter也有多种方式加载不同形式、支持不同格式图片: 加载本地资源图片,Image.asset(‘images/logo.png.../xxx/test.gif') 除了根据图片显示方式设置不同图片源,图片构造方法还提供: 填充模式fit 拉伸模式centerSlice 重复模式repeat等属性 可针对图片与目标区域宽高比差异制定排版模式...若onPressed参数为空,则按钮会处于禁用状态,不响应用户点击 child参数用于设置按钮内容,告诉Flutter控件应长成啥样,即控制按钮控件基本样式。...首先,认识支持单一样式混合样式两种类型文本展示控件Text: 通过TextStyle控制字符串展示样式,其他参数控制文本布局,实现单一样式文本展示 通过TextSpan将字符串分割为若干片段,对每个片段单独设置样式后组装

44620

网站如何适配暗色模式并实现手动、自动切换

[效果图] 媒体查询优缺点 很多文章会介绍你直接使用媒体查询来适配暗色模式;的确高版本浏览器,可以提供媒体查询功能,使用CSS,加入媒体判断即可: /\* 常规浅色模式网页背景颜色及文本颜色 \...存在暗色模式标识符 若用户之前有点击过切换暗色/亮色按钮,查询Cookies或localStorage内暗色模式标识符来展示暗色/亮色配色,优先级高于媒体查询时间判断。...,: /\*暗色模式span标签\*/ .night span { color: #E0E0E0; } /\*暗色模式警告按钮样式\*/ .night .btn-danger { color...用户主动切换按钮 // 切换模式Start function switchNightMode() { // 获取Cookies内DarkMode值 var Mode = document.cookie.split...$('#nightMode').removeClass("icon-yueliang").addClass("icon-zhishifufeiqiapianicon-"); } } // 切换模式

7.3K160

iOS应用黑暗模式设计终极指南(附套件下载)

这意味着打开黑暗模式时,iPhone上所有应用程序都将具有黑暗外观。 因此,作为设计师开发人员,为您应用程序设计实现黑暗模式非常重要。苹果已经发布了为您应用程序设计模式的人机交互指南。...每个按钮都有不同颜色,iOS 13 UI Kit中提供了这些颜色。这些适用于给人以更高层级或与众不同(或分组)内容元素。 ? 需要注意,黑暗模式颜色不仅仅是与模式颜色相反。...不必告诉它在明亮模式下显示白色,而在黑暗模式下显示黑色。系统会自动判定。 ? 如果要在模式下为元素显示自定义颜色怎么办? 当然,你可以轻松地做到这一点。为每种模式分配自定义颜色即可。...但是,这9种颜色在模式模式下略有不同。如果您选择使用这些系统强调颜色,则该应用程序将自动将模式色调颜色更改为模式色调颜色。 ? 你会发现模式模式颜色是稍有差异,请务必注意。...这里有一些需要注意事项: 尝试选择一种在模式模式下均能正常工作颜色(相同RGB值)。 或者您可以选择2种不同颜色,一种用于模式,另一种用于模式

3.2K10

FlutterUnit 已上架 iOS,暗色模式全面支持

一、FlutterUnit 全平台支持 FlutterUnit 是我一个开源项目,基于 Flutter 构建一个 全平台 应用程序。...直接访问 ---- 二、暗色模式全平台支持 在界面表现上: 桌面端 MacOS Windows 一致,移动端 iOS Android 一致。...另外平板设备中,在拖拽过程中可以根据窗口尺寸自适应相关: ---- 桌面端部分界面展示 桌面端组件页() 桌面端组件页() 桌面端搜索() 桌面端搜索() 桌面端代码生成() 桌面端代码生成...() 绘制集录() 组件详情页() ---- 移动端部分界面展示 移动端组件页() 移动端组件页() 绘制详情页() 绘制详情页() 组件详情页 组件详情页...这样就上线完毕了: ---- 四、 FlutterUnit 后期规划 后期规划,一方面加强对 Flutter 内置组件收录,现在新版本 Flutter 中比之前增加了不少组件。

29250

Flutter | 常用组件

注意,对齐参考系是Text widget本身 DefaultTextStyle 在 widget 树中,文本样式默认是可以继承,因此,如果在 widget 树中某一个节点设置一个默认样式...,而 RichText 是可以显示多种样式(富文本) widget,样式如下: 字体 在 flutter 中使用字体需要两个步骤,首先是在 pubspec.yaml文件中声明,然后通过 textStyle...icon 这个构造函数,同个这个构造可以轻松创建出带图标的按钮 RaisedButton 等 自定义按钮外观 按钮外观可以通过属性来定义,不同按钮属性都大同小异,以 FlatButton 为例...fit:用于在图片显示空间图片本身大小不同时候指定图片适应模式 image.png color colorBlendMode :在图片绘制时可以对每一个像素颜色进行混合处理,color...而在 iconfont 中,只是将位码对应字形做成了图标,所以不同字符最终就会渲染成不同图标 在 Flutter 中,iconfont 图片相比有如下优势 1,体积小 2,矢量图标,放大不会影响清晰度

11.4K30

从夜间模式说起,如何定制不同风格App主题?

比如,微博、UC浏览器电子书客户端都提供了对夜间模式支持,而淘宝、京东这样电商类应用,还会在特定电商活动日自动更新主题样式,就连现在手机操作系统也提供了系统级切换展示样式能力。...ThemeData涵盖了Material Design规范可自定义部分样式,比如应用明暗模式brightness、应用主色调primaryColor、应用次级色调accentColor、文本字体fontFamily...可以看到,我们虽然只修改了主色调primaryColor明暗模式brightness两个参数,但按钮、文字颜色都随之调整了。...(// 设置主题 brightness: Brightness.dark,// 设置明暗模式为暗色 accentColor: Colors.black,//(按钮)Widget...分平台主题定制 有时候,为了满足不同平台用户需求,我们希望针对特定平台设置不同样式。比如,在iOS平台上设置浅色主题,在Android平台上设置深色主题。

2.6K30

python0068_ 字体样式_正常_加亮_变暗_控制序列

字体样式回忆上次内容上次了解了一个新转义模式 \33 逃逸控制字符 escesc 让输出 退出标准输出流 进行控制信息设置 可以清屏也可以设置光标输出位置还能做什么呢?...从 输出字符串 中 Escape 出去 后面的内容 不是纯文本了而是 控制序列(Control Sequence)具体控制\033[ 是 CSI CSI n mCSI 之后是ansi给关于字体样式设置细节...shell中 支持\e还是 回到游乐场2m2 1 相反 1m 更2m 更0m 还原这 一会儿一会儿好像 挺好玩编写程序i%3 是让i对于3取余数 得到0、1、2三种可能import timefor..."正常"、“”、""中 循环冷却时间是 0.2s规律性很强 其实 可以得到 更好玩东西bb可以 看看这个sudo apt install bbbb里面 用字符画风格 实现 三维旋转应该是 视频按帧...\33[1m正常 \33[0m \33[2m效果这下确实 乱了起来而且是 毫无规律地乱了起来看看 后面 还有什么好玩总结m 可以改变字体样式 0-10 之间设置都是字体效果0 重置为默认1 变亮2

55030

让你兴奋不已13个CSS技巧🤯

创建堆叠上下文一种方法是使用 isolation: isolate CSS样式声明。 我们可以利用这种堆叠上下文技术来创建悬停效果,该效果可以交换按钮背景。...可以通过将按钮边框半径设置为非常高值来制作药丸形状按钮。...这些系统颜色在不同浏览器之间可能会有所不同。 明确设置 background-color 可以与 prefers-color-scheme 结合使用,以提供与浏览器默认设置不同颜色阴影。...以下是/模式实际应用。用户偏好在模式模式之间进行模拟。 7.使用省略号( ... )截断溢出文本 这个技巧已经存在一段时间,用于美观地修剪长文本。但你可能仍然错过了它。...我们可以在表单元素上使用 :valid :invalid CSS伪类,当其内容验证成功或失败时,应用适当样式。 请考虑以下HTML页面结构: <!

27750

从零基础到精通Flutter开发:一步步打造跨平台应用

无论您是新手还是有经验开发者,都能从本文中获得有价值知识。 第一步:安装设置Flutter 在这一步中,我们将介绍如何安装Flutter,并进行必要配置。...您将学习如何设置Flutter开发环境,包括安装Flutter SDK配置开发工具。...在这一步中,我们将深入研究各种Flutter小部件,包括文本按钮、图像列表等。...文本样式 按钮交互 列表网格视图 第四步:处理用户输入 学会如何处理用户交互操作是Flutter应用关键部分。在这一步中,我们将讨论如何响应按钮点击、手势表单输入。...处理按钮点击事件 手势检测处理 表单输入验证 第五步:导航路由管理 在这一步中,我们将介绍导航路由管理。您将学会如何在不同屏幕之间导航,并创建适应不同路由布局。

18020

从零基础到精通Flutter开发:一步步打造跨平台应用

无论您是新手还是有经验开发者,都能从本文中获得有价值知识。 第一步:安装设置Flutter 在这一步中,我们将介绍如何安装Flutter,并进行必要配置。...您将学习如何设置Flutter开发环境,包括安装Flutter SDK配置开发工具。...在这一步中,我们将深入研究各种Flutter小部件,包括文本按钮、图像列表等。...文本样式 按钮交互 列表网格视图 第四步:处理用户输入 学会如何处理用户交互操作是Flutter应用关键部分。在这一步中,我们将讨论如何响应按钮点击、手势表单输入。...处理按钮点击事件 手势检测处理 表单输入验证 第五步:导航路由管理 在这一步中,我们将介绍导航路由管理。您将学会如何在不同屏幕之间导航,并创建适应不同路由布局。

26251

Flutter TolyUI 框架#03 | 全局消息通知

TolyUI 已经寻找到了一种基于单体功能模块,组织复杂框架手段。我所描绘是一张 Flutter 全平台 UI 框架蓝图,它为 Flutter 全平台开发指明方向。...也提供了不自动关闭设置方式: 通过 message.XXXNotice 就可以展开对应样式通知,其中 XXX 上面的消息提示一致。...title: '张风捷特烈', info1: '微信号: zdl1994328', info2: '地区: 安徽·合肥', onClose: close, ), ); 三、消息通知主题设置模式...建议在一个 App 中消息通知可以统一风格,为此 TolyUI 提供消息通知主题配置,便于开发者统一配置默认样式。...但应用主题数据一般设置在 MaterialApp 之下,这就会导致全局浮层上下文无法响应主题变化。为此需要为 TolyMessage 提供 MaterialApp 一致主题数据与主题模式

13310

这些Android系统样式颜色属性你知道吗?

为了在不同版本系统中统一 UI 样式设置自定义 Theme 继承自 Theme.AppCompat 系列就可以了。...这种设置 Button android:background 所不同是,在 Android5.0 或者更高版本上使用 colorButtonNormal 时候会依然保持阴影 Ripple...md 主题有: @android:style/Theme.Material(主题) @android:style/Theme.Material.Light(主题) @android:style/Theme.Material.Light.DarkActionBar...这两种样式也有不同使用方法 Theme.AppCompat 一般用于设置整个应用程序全局主题 ThemeOverlay.AppCompat 用于覆盖特定视图主题,覆盖相关属性使他们成为或者...这里使用了一个 Titlbar 这样效果整体很不搭配,我们需要是 Titlbar 背景使用我们 colorPrimary 字体颜色使用 浅色文本样式 颜色,那么这样我们就可以自己定义一个样式

1.8K10

Flutter技术与实战(4)

生命周期回调 ###### 帧绘制回调 经典控件(一):文本、图片按钮 文本控件 文本是视图系统中常见控件,用来显示一段特定样式字符串,就比如 Android 里 TextView、iOS...除了可以根据图片显示方式设置不同图片源之外,图片构造方法还提供了填充模式 fit、拉伸模式 centerSlice、重复模式 repeat 等属性,可以针对图片与目标区域宽高比差异制定排版模式。...这三个按钮控件使用方法类似,唯一区别只是默认样式不同而已。...如果 onPressed 参数为空,则按钮会处于禁用状态,不响应用户点击。 child 参数用于设置按钮内容,告诉 Flutter 控件应该长成什么样,也就是控制着按钮控件基本样式。..., ); 在需要设置内容间距时,我们可以通过 EdgeInsets 不同构造函数,分别制定四个方向不同补白方式,均使用同样数值留白、只设置左留白或对称方向留白等。

10.7K20
领券