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

Flutter 2.0 -如何在按下时更改TextButton闪屏颜色?

在Flutter 2.0中,要在按下时更改TextButton的闪屏颜色,可以通过自定义ButtonStyle来实现。以下是实现的步骤:

  1. 导入必要的库:
代码语言:txt
复制
import 'package:flutter/material.dart';
  1. 创建一个StatefulWidget类:
代码语言:txt
复制
class MyButton extends StatefulWidget {
  @override
  _MyButtonState createState() => _MyButtonState();
}
  1. 创建一个State类:
代码语言:txt
复制
class _MyButtonState extends State<MyButton> {
  bool _isPressed = false; // 用于跟踪按钮是否被按下

  @override
  Widget build(BuildContext context) {
    return TextButton(
      style: ButtonStyle(
        backgroundColor: _isPressed ? MaterialStateProperty.all(Colors.blue) : null,
        // 设置按下时的背景颜色为蓝色,未按下时为默认值(null)
      ),
      onPressed: () {
        setState(() {
          _isPressed = !_isPressed; // 切换按钮状态
        });
      },
      child: Text('Press Me'),
    );
  }
}
  1. 在主页面中使用自定义的按钮:
代码语言:txt
复制
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter 2.0 - Change TextButton Color')),
        body: Center(
          child: MyButton(), // 使用自定义的按钮
        ),
      ),
    );
  }
}

void main() {
  runApp(MyApp());
}

这样,当用户按下按钮时,按钮的背景颜色将切换为蓝色,再次按下时将恢复为默认颜色。

关于Flutter的更多信息,你可以访问腾讯云的相关文档和资源:

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

相关·内容

Flutter』常用组件 按钮、图片

它有默认的阴影和灰度效果,当按时会有视觉反馈。 FlatButton(现在称为TextButton):这是一个无阴影的平面按钮,通常用于不太重要的操作。它在按不会改变外观,提供简洁的视觉效果。...当按,边框和文字颜色会变化,适用于需要强调边框而非背景色的场景。 IconButton:这是一个图标按钮,常用于工具栏和对话框中。它可以包含图标而不是文本,适用于空间有限或需要图形化表示的地方。...被点击,onPressed 会被触发 当 TextButton 被长按时,onLongPress 会被触发 4.Icon Flutter 中的 Icon 组件用于显示 Material 设计风格的图标...fit (BoxFit): 如何处理图片的缩放和对齐。常用的值有 BoxFit.fill, BoxFit.contain, BoxFit.cover 等。...repeat (ImageRepeat): 如果图片小于其容器,如何重复填充。

50231

Flutter Web:鼠标相关处理

前言 我们在利用Flutter Web开发pc端可以访问的网站,所以会有一些关于鼠标的处理。 悬停 可以点击的widget,如button。如果鼠标悬停到这部分,会出现阴影,并且按和释放都有阴影。...MaterialButton 先看如何改变单个按钮的阴影效果,MaterialButton及其子类(FlatButton等)可以通过为hoverColor等属性设置自定义颜色,或者设置透明颜色来去除这些效果...Colors.transparent, splashColor: Colors.transparent, child: ..., ... ); hoverColor就是悬停显示的底部颜色...,focusColor则是获取焦点(即按),splashColor则是释放(即up)的时候。...TextButtonFlutter2.0中如果使用FlatButton就会提示已不建议使用,替代的是2.0新加入的TextButton

1.6K20
  • Flutter 小技巧之 ButtonStyle 和 MaterialStateProperty

    大家是否还记得去年 Flutter 2.0 发布的时候,除了空安全之外 ,还更新了一系列关于控件的 breaking change,其中就有 FlatButton 被标志为弃用,需要替换成 TextButton...如今已经 Flutter 3.0 ,不大知道大家对 TextButton 是否已经足够了解,或者说对 MaterialStateProperty 是否已经足够了解?...相信大家当初在从 Flutter 1 切换到 Flutter 2 的时候,应该都有过这样一个疑问: 为什么 FlatButton 和 RaisedButton 会被弃用替换成 TextButton 和...:用户长按并移动控件 error:错误状态,比如 TextField 的 Error 所以现在理解了吧?...随着 Web 和 Desktop 平台的发布,原本的 FlatButton 无法很好满足新的 UI 交互需要,例如键鼠交互的 hovered ,所以 TextButton 开始使用 MaterialStateProperty

    2.7K40

    Flutter 1.22版本新增的Button

    Flutter 1.22版本新增了3个按钮,TextButton、OutlinedButton、ElevatedButton,虽然以前的Button没有被废弃,但还是建议使用新的Button。...简单使用: TextButton( child: Text('TextButton'), ) 当 onPressed 不设置或者设置为 null ,按钮为不可用状态。...this.backgroundColor, //背景色 this.foregroundColor, //前景色 this.overlayColor, // 高亮色,按钮处于focused, hovered, or pressed颜色...this.visualDensity, // 按钮布局的紧凑程度 this.tapTargetSize, // 响应触摸的区域 this.animationDuration, //[shape]和[elevation]的动画更改的持续时间...: ButtonStyle( foregroundColor: MaterialStateProperty.all(Colors.red), ), ) 根据按钮的状态改变字体颜色TextButton

    1.7K10

    Flutter 组件集录 | 新一代 Button 按钮参上

    按钮一族现状 随着 Flutter 3.3 的发布,RaisedButton 组件从 Flutter 框架中移除,曾为界面开疆拓土的 按钮三兄弟 彻底成为历史。...构造必须传入点击回调函数onPressed 和子组件 child : TextButton( onPressed: () {}, child: Text('TextButton'), );...按钮样式的更改 如果稍微翻一源码就可以看到,这三个按钮本质上是一样的,都是 ButtonStyleButton 的衍生类。...在未使用 Material3 ,通过 styleFrom 静态方法根据主题进行相关属性设置:比如各种颜色、阴影、文字样式、边距、形状等。...按钮的尺寸 在按钮默认样式中,规定了最小尺寸是 Size(64, 36) , 最大尺寸无限。 也就是说,在父级区域约束的允许范围,按钮的尺寸由 子组件 和 边距 确定的。

    2.5K10

    Flutter 中创建一个绘图画布

    步骤三:添加依赖 对于我们 drawing_app 项目,我们需要 flutter_colorpicker 包,以允许用户来挑选颜色。...在 pubspec.yaml 的属性 dependencies 添加下面内容: dependencies: flutter: sdk: flutter flutter_colorpicker...实现 pickerColor 来显示颜色拾取器,以允许用户更改画笔的颜色: void pickColor() { showDialog( context: context,...这是处理用户手指抬离屏幕然后触生成另一个点绘制不连续点的简单方法。 步骤十一:测试应用 在终端上运行 flutter run 来运行我们的程序,或者使用 IDE 的运行按钮。...我们应该可以在屏幕上绘制并且更改画笔️的颜色。 总结 现在,我们使用 Flutter 成功地创建了一个基础的绘图应用!这个应用允许我们在屏幕上选择颜色来绘制,并且清空绘制。

    13710

    Flutter 小技巧之 Flutter 3 的 ThemeExtensions 和 Material3

    Material3Material3 又叫 MaterialYou , 是谷歌在 Android 12 提出的全新 UI 设计规范,现在 Flutter 3.0 里你可以通过 useMaterial3...如下图所示,是在 primarySwatch: Colors.blue 的情况,AppBar 、Card、TextButton、 ElevatedButton 的样式区别:可以看到圆角和默认的颜色都发生了变化...以 AppBar 举例,可以看到在 M2 和 M3 中背景颜色的获取方式就有所不同,在 M3 没有了 Brightness.dark 的判断,那是说明 M3 不支持暗黑模式吗?...在 Flutter 的 gen_defaults 就可以看到,基本上涉及 M3 的默认样式,都是通过 data 的数据利用模版自动生成,比如 Appbar 的 backgroundColor 指向的就是...在 Material3 颜色其实不是完全按照 RGB 去计算,而是会经过 material-color-utilities 的转化,通过内部的 CorePalette 对象,RGB 会转化为 HCT

    1.3K30

    6详解AppBar小部件

    由于它是一个如此常用的组件,因此 Flutter 为该功能提供了一个名为AppBar的专用小部件。 在本教程中,我们将通过一些实际示例向您展示如何Flutter 应用程序中自定义 AppBar。...AppBar 包含各种属性,包括颜色、大小、图标主题、文本主题等等。 背景颜色 以下代码将 AppBar 的背景颜色更改为深橙色。500添加以访问颜色的特定阴影,900即最暗和最亮50。...阴影颜色 你甚至可以弄乱阴影的颜色。下面的代码将 AppBar 的阴影颜色更改为orangeAccent。...如果你已经做到了这一步,你现在应该明白: AppBar 是什么以及它如何Flutter 中使用 AppBar 的布局 ( leading, title, 和actions) 如何自定义 AppBar...的布局和添加小部件 如何为 AppBar 的图标、文本、背景、高度、阴影颜色和工具栏设置主题 所以我们有了!

    16.4K10

    Flutter】自定义滚动开关

    当此属性无效,开关小部件会失效。 该演示视频展示了如何在颤动中创建自定义滚动开关。它显示了自定义滚动开关如何flutter应用程序中使用lite_rolling_switch包工作。...它显示了在用户按按钮后进行的切换交互,该开关将滚动到具有动画效果的另一侧,并且在滚动该开关更改图标和文本。...**colorOn:**此属性用于在开关打开显示颜色。 **colorOff:**此属性用于在开关为Off显示颜色。...*我们将添加textOn是字符串' Yes '表示当开关打开,文本将显示在按钮上;当textOff是字符串' No '意味着当开关关闭,文本将显示在按钮上。...我们将添加colorOn表示,当开关处于打开状态颜色将显示在按钮上;当colorOff意味着当开关处于关闭状态颜色将显示在按钮上。

    33.4K60

    【STM32F429】第22章 ThreadX GUIX按钮回调事件处理

    Draw Function 重绘函数 Event Functiong 事件处理函数 Pushed 设置按钮在按或者选中状态。 对应宏定义GX_STYLE_BUTTON_PUSHED。...Normal Text Color 按钮字符颜色。 Selected Text Color 选择按钮,字符颜色。...Disabled Text Color 取消按钮选中,字符颜色 Private Text Copy 使能字符可以动态更新。...GX_SIGNAL(GUIX_ID_TextButton0, GX_EVENT_CLICKED) 这里是按钮GUIX_ID_TextButton0按消息的处理。检测到按钮按,就会进入到这个消息。...22.7 实验例程 (注,如果是电阻,需要做触摸校准,校准方法看本教程附件章节A) 配套例子: 本章节配套了如下两个例子供大家移植参考: V6-2027_GUIX Button Event Callback

    51130

    Android开发者的Flutter入门(二)

    涉及到的有以下这些点: 页 自定义布局 下拉刷新 上拉加载更多 使用Assets 路由(页面跳转) 内嵌WebView 页 由于启动Flutter app的时候需要初始化Flutter...所以开发Flutter app的时候都需要加一个页。给Android平台上跑的Flutter app加页其实是和给一个正常的Android app加页是一样的。...那段注释的大概意思是说这个标签是用来表示让Flutter在启动过程中保持页直到第一帧画面被绘制出来。也就是说,页的隐藏不需要我们来处理了。 接下来看看这个LaunchTheme: ?...LaunchTheme 可见就定义了一个窗口的背景了,也就是我们的页本尊了,这里你可以把这个drawable改成你自己的页图片也OK。 至于ios平台的页怎么弄,可以参考这里。.../my_icon.png .../2.0x/my_icon.png .../3.0x/my_icon.png 访问 Assets Flutter中访问Assets很灵活,最基本的可以用以下方式来访问Assets

    1.4K20

    【STM32H7】第24章 ThreadX GUIX按钮回调事件处理

    Draw Function 重绘函数 Event Functiong 事件处理函数 Pushed 设置按钮在按或者选中状态。 对应宏定义GX_STYLE_BUTTON_PUSHED。...Normal Text Color 按钮字符颜色。 Selected Text Color 选择按钮,字符颜色。...Disabled Text Color 取消按钮选中,字符颜色 Private Text Copy 使能字符可以动态更新。...GX_SIGNAL(GUIX_ID_TextButton0, GX_EVENT_CLICKED) 这里是按钮GUIX_ID_TextButton0按消息的处理。检测到按钮按,就会进入到这个消息。...24.7 实验例程 (注,如果是电阻,需要做触摸校准,校准方法看本教程附件章节A) 配套例子: 本章节配套了如下两个例子供大家移植参考: V7-2031_GUIX Button Event Callback

    55120

    flutter系列之:移动端手势的具体使用

    今天将会通过几个具体的例子来讲解一GestureDetector的具体使用。...赋予widget可以点击的功能一般情况,我们的普通widget,比如文本是不能进行交互的,但是如果将其用GestureDetector进行包装之后,就可以将其伪装成为一个button。...可删除的组件在app中的手势应用上,有一个比较常见的用法就是在list列表中,向左滑动一个item,会出现删除的按钮,这种滑动删除的效果,如何flutter中实现呢?...为了演示方便,我们使用ListView来展示如何使用Dismissible。...为了明显起见,我们可以给Dismissible添加一个background属性,这样滑动删除的时候就有了一个背景颜色: background: Container(color:

    97610

    Flutter Dojo设计之道——骚气的动画是如何实现的

    这篇文章是对Flutter动画实现思路的一篇剖析,用一个简单的动画,分析Flutter创建动画的一般步骤 ,实际上有两个作用。 宣传。通过Logo、广告等形式,在启动,展示要宣传的广告等内容。...Flutter Dojo的动画,参考了著名大厂——P站的App,相信大家应该都不陌生。 ? 动画其实比较简单,只是一个从两边向中间靠拢的动画。...下面这个函数就演示了如何获取一个特定TextStyleText的计算宽度。...), ), ); }, ), ], ), ); } 以上,一个骚气的动画就完成了...开源至今,受到了很多Flutter学习者和爱好者的喜爱,也有越来越多的人加入到Flutter的学习中来,所以我建了个Flutter修仙群,但是人数太多,所以分成了【Flutter修仙指南】【Flutter

    1.3K21

    Flutter 1.22 正式发布

    iOS 14 每当发布新版本的移动操作系统,我们都会对其进行彻底测试,以查找影响Flutter及其工具的不兼容性或更改。...首先,Flutter现在支持多种屏幕适配(比如瀑布)。 ? 通过使用MediaQuery和SafeArea API,您可以确保将活动的UI和交互式元素放置在设备显示的无障碍区域中。...有关更多详细信息,请参见重大更改文档。 扩展的 Button 组件 ? 现有的Flutter按钮看上去不错,但很难使用,尤其是在需要自定义主题。...当用户选择一种颜色,我们通常会调用setState()来向Flutter表示您希望再次调用build()方法,该方法现在会创建一个堆栈,其顶部是ColorScreen。...例如,Pixel 4输入的运行频率为120hz,而显示的运行频率为90hz。滚动,这种不匹配会导致性能下降。

    7.5K20

    Flutter 升级 2.0 填坑指导,带你原地起飞

    Flutter 2.0 的发布带来了很多的 break change ,特别是新增加的空声明安全,相信不少大哥尝鲜之后立马反思自己“手贱” ,事实上旧项目升级 Flutter 2.0 确实有很多兼容的点...FlatButton 也被标志为弃用,需要替换成 TextButton;类似的 RaisedButton 需要替换为 ElevatedButton 。...2、针对依赖仓库的调整 虽然 Flutter 2.0 没有要求主项目一定使用空声明安全,但是对于插件的适配要求却比价严格,所以你仍可能需要升级一些 pub 仓库的依赖来完成适配。...这是因为你还有没有迁移完成的依赖包,但是有时候依赖包不是一半会就能兼容完成,这时候应该如何适配运行呢?...最后不得不说, Flutter 2.0 算是 Flutter 新的起点,希望新的版本能给你们带来更稳定和更便捷的开发体验。

    4.9K31

    Flutter 2.5正式版发布,带来重大更新

    Android 全屏、Material You & 文本编辑快捷方式 从(#81303) 开始, 我们修复了 Android 一系列与全屏模式相关的问题,此更改还添加了一种在其他模式收听全屏更改的方法...另一个出色的社区贡献是为 ScaffoldMessenger , 你可能还记得 从Flutter 2.0 开始 ScaffoldMessenger 提供了一个更强大的方式来显示 SnackBars ,...同时,在此版本中,我们添加了文本编辑键盘快捷键可覆盖的功能( #85381),这是在 Flutter 2.0 及其新的文本编辑功能的基础上的进一步优化。...更容易的界面分析和定位:Flutter 框架中常用的 Widget 都会在左侧的 Widget 树视图中显示图标,它们根据类别进一步进行颜色编码,例如布局 Widget 显示为蓝色,而内容Widget...其他 除此之外,Flutter 2.5的重大更改和弃用还有如下一些: 默认拖动滚动设备 在 v2.2 之后删除了弃用的 API 引入包:flutter_lints ThemeData 的 accent

    4.4K50
    领券