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

如何在flutter中动态更改InputDecoration的fillColor?

在Flutter中,可以通过使用StatefulWidgetsetState()方法来实现动态更改InputDecorationfillColor

首先,创建一个StatefulWidget,用于管理输入框的状态和属性。在StatefulWidgetbuild方法中,可以使用TextFormField组件来创建一个带有InputDecoration的输入框,并设置fillColor属性。

然后,为了实现动态更改fillColor,需要在StatefulWidget的状态类中定义一个变量来保存当前的fillColor值。在build方法中,使用这个变量来设置InputDecorationfillColor属性。当需要更改fillColor时,通过调用setState()方法来更新状态。

下面是一个示例代码:

代码语言:txt
复制
import 'package:flutter/material.dart';

class MyInputField extends StatefulWidget {
  @override
  _MyInputFieldState createState() => _MyInputFieldState();
}

class _MyInputFieldState extends State<MyInputField> {
  Color _fillColor = Colors.white; // 初始填充颜色为白色

  void changeFillColor(Color color) {
    setState(() {
      _fillColor = color;
    });
  }

  @override
  Widget build(BuildContext context) {
    return TextFormField(
      decoration: InputDecoration(
        fillColor: _fillColor,
        filled: true,
        border: OutlineInputBorder(),
      ),
    );
  }
}

在上面的示例中,我们创建了一个名为MyInputFieldStatefulWidget,其中_MyInputFieldState是其状态类。_MyInputFieldState类中定义了一个_fillColor变量来保存当前的填充颜色。changeFillColor方法用于更新填充颜色。

在使用MyInputField时,可以调用changeFillColor方法来动态更改fillColor。例如:

代码语言:txt
复制
MyInputField inputField = MyInputField();
inputField.changeFillColor(Colors.blue); // 更改填充颜色为蓝色

这样,就可以在Flutter中动态更改InputDecorationfillColor了。

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

相关·内容

【Flutter 专题】65 图解基本 TextField 文本输入框 (二)

和尚刚学习了 TextField 的基本用法,今天特意学习一下 TextField InputDecoration 文本框装饰器的相关内容; InputDecoration 源码分析 const..., this.enabled = true, }) 分析源码可知,Flutter 不仅提供了全面的构建装饰器的方式,还提供了简单便利的构建方式 collapsed 默认是无边框的,...BorderStyle.solid)))); 和尚测试发现 UnderlineInputBorder 和 OutlineInputBorder 对于设置 border 边框颜色无效,需要通过 ThemeData 来更改属性...小扩展 在实际开发中,可能会随时需要关闭键盘,此时我们仅需监听一下即可;和尚监听一个文本输入框,当输入字符长度大于 11 位时即收起键盘; return TextField(controller...---- 文本输入框确实有很多细节需要研究和尝试,和尚仅初步了解,有待深入研究;且和尚建议时常升级 Flutter 版本,可能对于同一个 Widget 会有或多或少的更新,如有问题请多多指导

4.7K41
  • 【Flutter实战】文本组件及五大案例

    基本用法如下: Text('老孟') 注意:Text组件一定要包裹在Scaffold组件下,否则效果如下: 文本的样式在style中设置,类型为TextStyle,TextStyle中包含很多文本样式属性...,值说明如下: left:左对齐 right:右对齐 center:居中 justify:两端对齐,此属性中文存在bug(Flutter版本:1.17.3)也可以在官方issue中关注此问题 start...设置全局字体样式: 在MaterialApp的theme中设置如下 MaterialApp( title: 'Flutter Demo', theme: ThemeData( ......Container( height: 60, width: 250, child: TextField( decoration: InputDecoration( fillColor...(); TextField( focusNode: _focusNode, ... ) 动态失去焦点 _focusNode.unfocus(); 过渡颜色的文字 Builder( builder

    7.3K10

    Flutter组件学习(三)—— 输入框TextFiled

    序言 Google 前两天发布了 Flutter 1.0 正式版本,正式版发布之后,LZ身边越来越多的人都开始入坑了,不得不说 Flutter 框架的魅力还是很吸引人的哈,所以我们更要抓紧学习了;之前我写了两篇文章来介绍...Flutter中的Text组件 和 Flutter中的Image组件,今天我们继续学习输入框 TextFiled 组件,话不多说,先上图: image TextFiled组件的API 先来看一下TextFiled...,比如前后图标,提示文字,错误文字,占位文字等等,下面来看一下可以设置的东西(有点多,大家可以有需要的时候再去挨个了解): 1const InputDecoration({ 2 this.icon...,类似于 Android 中的 InputType,选值有以下几个: text 输入文字 multiline 输入文字 number 输入文字 phone 输入文字 datetime 输入文字 emailAddress...6、textInputAction 这个属性用来控制弹出的键盘中右下角的按钮,这是一个枚举值,有很多种形式(下面举几个例子): TextInputAction.done:完成按钮 TextInputAction.go

    2.6K50

    setState

    效果如下,单从界面上来看,我还是比较满意的。 ? ---- 0.3: 简介一下 本项目主要包括以下几点: 1. 输入一个待办事项,下面的ListView动态更新 2....用一个Map盛放文字和是否选中的 var todo = {}; 定义一个状态枚举 enum ShowType { all, todo, done } 类中设置初始变量...状态量有三个:text 输入框的文字,todo列表数据,showType展现类型 1.输入框通过监听,改变text的值 2.在添加按钮点击时,将加入到状态值todo中 3.todo用来渲染Todo列表...结语 本文到此接近尾声了,如果想快速尝鲜Flutter,《Flutter七日》会是你的必备佳品;如果想细细探究它,那就跟随我的脚步,完成一次Flutter之旅。...另外本人有一个Flutter微信交流群,欢迎小伙伴加入,共同探讨Flutter的问题,本人微信号:zdl1994328,期待与你的交流与切磋。

    96020

    Flutter 全栈式——基础控件

    在Flutter中,UI小控件有两种设计风格,一种是Material设计,这是安卓的官方设计风格,另一种则是Cupertino风格,是iOS的官方设计风格。...需使用Text.rich构造方法创建 Image 构造方法 Image : 从ImageProvider中获取图片 Image.asset :加载资源目录中的图片 Image.network:加载网络图片...,则使用fillColor指定的颜色填充 fillColor Color 输入框的背景颜色 errorBorder InputBorder errorText不为空,且输入框没有焦点时要显示的边框 focusedBorder...此单选按钮表示的值 groupValue 动态类型 该组单选按钮当前选定的值 onChanged ValueChanged 状态变化回调 activeColor Color 选中时的颜色 materialTapTargetSize...Flutter全栈式开发之Dart 编程指南 [二维码] Flutter 全栈式开发指南 快速上手篇直接观看 [k582fk9kg4.jpeg]

    3.8K40

    Flutter 布局探索 | 如何分析尺寸和约束

    ---- 前言 本文来分享一下,通过查看源码和布局信息解决的一个实际中的布局小问题,也希望通过本文的分享,当你遇到布局问题时,可以靠自己的脑子和双手解决问题。...开整 ~ const TextField( decoration: InputDecoration( filled: true, fillColor: Color(0xffF3F6F9...所以立刻打开 Flutter Inspector 查看 TextField 收到的约束信息:果然,其下第一个渲染对象,约束在高度上是 0~Infinity ,难怪 Padding 无法生效。...正好借此机会,来了解一下 TextField :可以看出其尺寸高度是 48 ,那这个 48 是如何确定的,又如何更改呢?...---- 到这里,就很容易知道如何优雅地修改 TextField 的高度。只要轻轻地在 InputDecoration 中,加入一个 constraints 约束即可。

    60110

    setState

    输入一个待办事项,下面的ListView动态更新 2. 条目的复选框选中,条目的文字自动添加下划线 3. 条目的复选框非选中,条目的文字自动取消下划线 4....( filled: true, fillColor: Colors.white, hintText: '添加一个待办项', hintStyle: TextStyle(color...todo中 3.todo用来渲染Todo列表,根据key和value展现数据和复选框状态 4.复选框通过点击,改变todo的状态,来显示对勾以及文字下划线 5.根据showType的不同,选择过滤的方式...." ---- 结语 本文到此接近尾声了,如果想快速尝鲜Flutter,《Flutter七日》会是你的必备佳品;如果想细细探究它,那就跟随我的脚步,完成一次Flutter之旅。...另外本人有一个Flutter微信交流群,欢迎小伙伴加入,共同探讨Flutter的问题,本人微信号:zdl1994328,期待与你的交流与切磋。

    95130

    Flutter&鸿蒙next中的表单封装:提升开发效率与用户体验

    Flutter作为一个现代的UI工具包,提供了丰富的组件来帮助开发者构建表单。本文将探讨如何在Flutter中封装一个表单,以提升开发效率和用户体验。...Flutter表单基础在Flutter中,表单通常由Form组件和TextFormField组件构成。Form组件包裹TextFormField组件,用于管理表单的状态和验证。...在Flutter中,我们可以通过validator回调来实现即时验证,并给用户即时反馈。例如,当用户输入不符合要求时,我们可以立即显示错误信息。...异步验证对于需要服务器交互的验证,如检查用户名是否已存在,我们可以使用异步验证。...在Flutter中,表单封装涉及到Form和TextFormField的使用,以及自定义组件的创建。掌握这些技能,可以帮助开发者构建更加健壮和用户友好的移动应用。

    3300

    如何在 Eclipse 中更改注释块的 @author 版权信息?

    文章目录 前言 一、打开需要进行版权标注的类 二、进入配置页面 三、编辑配置信息 四、测试 总结 ---- 前言 我们在使用 IDE——Ecilpse 进行开发,需要注明版权信息的时候,如果不更改默认设置的话...,在注释块 @author 的内容就是电脑系统默认的,例如下图所示。...---- 一、打开需要进行版权标注的类 打开 Ecilpse 需要备注一个类或者是方法的开发者信息,默认是系统用户,如下我的就是 Lenovo,如下图所示: ?...说明:${user}属性默认取值是我们本地管理员的 user 信息。 例如联想电脑默认取 lenovo。我们将${user}属性更改为我们需要标注的作者信息即可。 ?...---- 总结 本文我们掌握了如何在 Eclipse 中修改注释的版权信息,这样我们就无需每次手动去调整了。那么同学,你是否会在 IDEA 里面修改注释的版权信息呢?

    4.5K51

    【Flutter 专题】124 日常问题小结 (三) 自定义 Dialog 二三事

    针对日常不同的需求,我们时常需要自定义 Dialog,而和尚在尝试过程中遇到一些小问题,简单记录总结一下; Dialog Q1....对话框进行状态更新 和尚自定义一个可以多选 item 的 Dialog,但 Dialog 中并没有状态更新的 State,如何进行 Dialog 中状态更新呢?...Dialog 回调传参 和尚在自定义 Dialog 时如何在一个回调方法中传递多个参数? A3....接收方法与 Function 传递参数匹配 和尚在 Dialog 的回调方法中传递两个 List,而在接收回调方法中匹配两个参数即可;和尚简单看作是一个函数方法; // 传参方法 onSelectEvent...---- 自定义 Dialog 案例源码 ---- 和尚对于 Flutter 的应用还不够熟悉,很多常用的场景会处理的很不到位,和尚会对日常的小问题进行简单记录,逐步学习;如有错误,请多多指导

    1.2K70

    Flutter Channel 与 Swift 集成 MacOS Authorization Services

    本文将探讨如何在 Flutter 中通过 Channel 与 Swift 进行通信,并使用 macOS 的 Authorization Services 来请求管理员权限。...然后,在终端中运行以下命令来创建一个新的 Flutter 项目:flutter create xstreamcd xstream步骤 2: 打开项目使用你喜欢的代码编辑器打开项目,推荐使用 Visual...步骤 4: 修改 pubspec.yaml确保你在 pubspec.yaml 文件中添加了 flutter/services.dart 的依赖项。..., AuthorizationFlags()) }}步骤 6: 运行应用在终端中运行以下命令来启动你的 Flutter 应用:flutter run -d macos逻辑流用户在 Flutter..., AuthorizationFlags())}总结在本篇博客中,我们介绍了如何在 Flutter 应用中使用 Channel 和 Swift 的 Authorization Services 来实现管理员权限请求

    8910
    领券