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

如何在TextFormField中用颤动改变边框的颜色

在TextFormField中使用颤动来改变边框的颜色,可以通过使用Flutter的动画效果来实现。下面是一个示例代码,演示了如何在TextFormField中使用颤动来改变边框的颜色:

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

class ShakingBorderFormField extends StatefulWidget {
  @override
  _ShakingBorderFormFieldState createState() => _ShakingBorderFormFieldState();
}

class _ShakingBorderFormFieldState extends State<ShakingBorderFormField>
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;
  Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 500),
    );
    _animation = Tween(begin: -5.0, end: 5.0).animate(
      CurvedAnimation(
        parent: _animationController,
        curve: Curves.easeInOut,
      ),
    );
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }

  void _startAnimation() {
    _animationController.reset();
    _animationController.forward();
  }

  @override
  Widget build(BuildContext context) {
    return TextFormField(
      decoration: InputDecoration(
        labelText: 'Enter text',
        border: OutlineInputBorder(
          borderSide: BorderSide(
            color: Colors.blue,
            width: 1.0,
          ),
        ),
      ),
      onTap: _startAnimation,
      onChanged: (value) {
        // Do something with the entered text
      },
      validator: (value) {
        // Perform validation
        return null;
      },
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text('Shaking Border TextFormField'),
      ),
      body: Center(
        child: Padding(
          padding: EdgeInsets.all(20.0),
          child: ShakingBorderFormField(),
        ),
      ),
    ),
  ));
}

在这个示例中,我们创建了一个自定义的ShakingBorderFormField小部件,它继承自StatefulWidget。在该小部件的状态类中,我们创建了一个AnimationController和一个Animation对象,用于控制和定义颤动动画效果。在initState方法中,我们初始化了动画控制器和动画对象。在_startAnimation方法中,我们重置动画控制器并开始动画。在build方法中,我们创建了一个TextFormField,并在点击时调用_startAnimation方法来触发颤动动画。通过设置border属性的borderSide属性,我们可以定义边框的颜色和宽度。

这个示例中的动画效果是简单的颤动,你可以根据需要自定义动画效果。此外,你还可以根据具体的应用场景,使用不同的Flutter插件或库来实现更复杂的动画效果。

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

请注意,以上链接仅为示例,具体的腾讯云产品和文档可能会有更新和变动,请以腾讯云官方网站为准。

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

相关·内容

【愚公系列】2023年11月 WPF控件专题 Rectangle控件详解

一、Rectangle控件详解Rectangle控件是WPF中用于绘制矩形形状控件。它可以在UI中用于多种用途,绘制边框和填充区域等。...Stroke:设置矩形边框颜色,可以是SolidColorBrush或其他Brush对象。StrokeThickness:设置矩形边框宽度。...Name:设置矩形控件名称,用于在代码中引用该控件。2.常用场景WPF中Rectangle控件常用于以下场景:绘制矩形图形:Rectangle控件可以用于绘制矩形图形并设置矩形颜色边框等属性。...实现按钮效果:可以将Rectangle控件放在Button控件中,然后设置不同背景和边框颜色,从而实现不同状态下按钮效果。...制作进度条:可以使用Rectangle控件作为进度条“填充”部分,根据进度值动态改变其宽度来显示进度。制作列表选中效果:将Rectangle控件作为选中项背景或边框,从而实现列表选中效果。

48531

《Flutter》-- 4.Flutter组件基础

6)elevation:控制下方阴影栏坐标。 7)backgroundColor:导航栏颜色,默认值为ThemeData.primarycolor(主题颜色)。...具体选择哪种状态管理,可以参考如下基本原则: 1)如果状态是有关界面外观效果颜色、动画等),最好由Widget自身管理; 2)如果状态是用户数据(复选框选中状态、滑块位置等),最好由父Widget...; OutlineButton:默认是一个带有边框、不带阴影且背景透明按钮,按下后边框颜色会变亮,同时会出现背景和阴影效果; IconButton:一个可点击图标按钮,不支持文字,默认没有背景,点击后会出现背景...focusNode:用于控制TextField组件是否获取输入焦点,它是用户和键盘交互一种常见方式。 decoration:用于控制TextField组件外观显示,提示文本、背景颜色边框。...表单组件由FormField及其子类构成,最常用表单组件有DropdownButtonFormField和TextFormField两个。

12.4K30

Flutter TextField详解

文章目录 基本属性 TextField InputDecoration 样式 基础样式 隐藏文本 键盘类型 键盘按钮 大小写 光标 最多行数 计数器 图标 提示文字 去除下划线 边框 获取输入内容 关闭软键盘...this.enabled,//是否可用 this.cursorWidth = 2.0,//光标宽度 this.cursorRadius,//光标圆角 this.cursorColor,//光标颜色...this.counterText,//计数文字 this.counterStyle,//计数样式 this.filled,//是否填充 this.fillColor,//填充颜色...), ), ), ), 获取输入内容 有两种方式: onChanged onChanged是输入内容改变回调...From包裹TextFormField 异常 软键盘弹出之后遮盖 软键盘弹出之后高度溢出 解决办法:用滑动组件包裹起来(ListView等),这样软键盘弹出时候,输入框也会自动向上滑。

4.1K40

【Flutter】自定义滚动开关

假设此属性价值回报为true,则此开关为ON,为OFF则为false。当此属性无效时,开关小部件会失效。 该演示视频展示了如何在颤动中创建自定义滚动开关。...它显示了自定义滚动开关如何在flutter应用程序中使用lite_rolling_switch包工作。...**animationDuration:**此属性用于动画完成一个周期应花费时间。 **colorOn:**此属性用于在开关打开时显示颜色。...我们将添加colorOn表示,当开关处于打开状态时,颜色将显示在按钮上;当colorOff意味着当开关处于关闭状态时,颜色将显示在按钮上。...我们将添加animationDuration手段来延迟动画开始并添加onChanged表示用户打开或关闭开关时间。当我们运行应用程序时,我们应该获得屏幕输出,屏幕下方截图所示。

33.3K60

【愚公系列】2023年11月 Winform控件专题 Label控件详解

然后将其添加到Form中,如下图所示:当我们改变窗口大小时,Label控件宽度也会随之改变,但是其距离窗口左边依然不变。这就是Anchor属性作用。...如果您需要更精确地控制控件位置,请使用Anchor属性或Dock属性。1.5 backcolorbackcolor属性用于设置控件背景色。可以设置为预定义颜色值或自定义颜色值。...,例如设置控件字体颜色边框颜色等。...None:无边框,控件不显示边框FixedSingle:单线边框,控件顶部、底部、左侧和右侧各显示一条线Fixed3D:三维边框,控件顶部、底部、左侧和右侧各显示一条凸起或凹陷线使用方法:1.在设计模式下...需要注意是,当多个控件Dock属性设置相同时,它们位置顺序将根据它们在容器中添加顺序决定。如果需要改变它们顺序,可以通过在容器中删除再重新添加控件方式来实现。

66311

Flutter 流体滑块

下面的演示视频显示了如何在颤动中创建流畅滑块。它显示了如何在flutter应用程序中使用flutter_fluid_slider软件包来工作流体滑块传送带。...它显示了具有不同颜色三流体滑块,并为用户使用了不同工作属性。它会显示在您设备上。 属性 onChanged: 此属性是必需,并且在用户开始为滑块选择新值时调用该属性。...**slideColor:**此属性用于滑块颜色。如果未提供,primaryColor将应用祖先主题。 thumbColor: 此属性用于拇指颜色。、如果未提供,将应用[颜色为白色]。...另外,我们将添加滑块颜色。当我们运行应用程序时,我们应该获得屏幕输出,屏幕下方截图所示。 img 现在,我们将创建另一个FluidSlider()。...当我们运行应用程序时,我们应该获得屏幕输出,屏幕下方截图所示。 img 现在,我们将创建第三个“流体”滑块。

11.6K20

frameset标签设计页面

垂直切割画面(分左右两个画面),接受整数值、百分数, * 则代表占用剩余空间。数值个数代表分成视窗数目且以逗号分隔。...⑤、bordercolor:设定框架边框颜色。 ⑥、framespacing:表示框架与框架间保留空白距离。 3、frame 标签属性:  ①、name:设定框架名称。此为必须设置属性。...④、bordercolor:设定框架边框颜色。 ⑤、frameborder:设定是否显示框架边框。设定值只有0、1;0 表示不要边框,1 表示要显示边框。...5、如何在子页面中获取父页面所在frameset中其它frame中元素?...").html();  //manFrame指的是你想要查看那个frameid 比如上面的 left.html页面中,任务创建 ID 为 taskCreat,那么我们可以这样获取:并改变 class

2.8K90

03.HTML头部CSS图像表格列表

使用内联样式方法是在相关标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落颜色和左外边距。...使用外部样式表,你就可以通过更改一个文件来改变整个站点外观。...但某些标签确无法通过修改父级标签来改变子级标签特性,a标签,修改其颜色特性,必须直接修改 a 标签特性才可。...注意: 加载页面时,要注意插入页面图像路径,如果不能正确设置图像位置,浏览器无法加载图片,图像标签就会显示一个破碎图片。 更多实例 排列图片 本例演示如何在文字中排列图像。...使用边框属性来显示一个带有边框表格: 实例 HTML 表格表头 表格表头使用 标签进行定义。

19.4K101

小白都能学会css

中用矩形标注内容对应就是title 标签中内容,箭头指正方形,就是我们刚才添加css 后效果 。...我们只是设置了边框宽度,用是 border-width:1px;,但我们并没有是设置颜色,所以我们可以得知,边框颜色默认是黑色~ 现在我想要把边框颜色变成红色,那么我会这么做 ...我们可以看到,边框颜色确实变成了红色,当然你也可以改成其他颜色。这里要说下,颜色表示方法有三种,分别是rgb(255,0,0)、#ff0000、red ,这三种都可以表示红色。...1px; border-style: dashed; border-color:red; } 通过设置 border-style:dashed;来改变边框样式...最后咱们总结一下本文内容: border-width:边框宽度 border-color:边框颜色 border-style:边框样式 border中宽度、样式、颜色复合写法 border-radius

59730

CSS基本知识(慕课网)

另外,当页面中用到js或者要动态调用对象时候,要用到id,所以要根据自己情况运用。自己语言 id选择器和class选择器区别     ID选择器只能在文档中使用一次。...,这条线可以设置它粗细、样式和颜色(边框三个属性)。         ...2、border-color(边框颜色)中颜色可设置为十六进制颜色: border-color:#888;//前面的井号不要忘掉。...,有字体颜色(color)、背景颜色(background-color)、边框颜色(border)等,设置颜色方法也有很多种: 1、英文命令颜色 前面几个小节中经常用到就是这种设置方法: p{color...: p{color:rgb(20%,33%,25%);} 3、十六进制颜色 这种颜色设置方法是现在比较普遍使用方法,其原理其实也是 RGB 设置,但是其每一项值由 0-255 变成了十六进制 00

2.1K60

Power BI 地图轮廓颜色变化

常规SVG着色地图为形状填充,本文介绍轮廓填充方法,效果如下图所示,地图充当卡片图背景,轮廓颜色随数据大小变化(本例大于50%绿色否则红色)。...通过改变fill值即可改变地图填充色,实现着色地图效果。这里地图没有边框,如何加上边框呢?..../> Stroke控制边框颜色,此外可能代码中还有stroke-width等字样控制边框粗细。如何实现填充色无色,边框显示颜色呢?...边框变色实操 ---- 首先将地图文件批量导入Power BI,导入SVG格式数据同text数据(操作有问题,参考这个视频https://t.zsxq.com/07eqBm6yF),导入后数据如下图所示...如何把颜色固定地图文件变为动态效果?查找替换法,以下度量值对原始地图代码进行了三重查找替换。

1.3K20

css3详解

它是前端开发中用于控制网页布局和样式技术之一。CSS3引入了许多新特性和功能,圆角、阴影、渐变、动画等,大大增强了网页设计和交互能力。...text-shadow基础语法: text-shadow:5px 5px 5px #FF0000: 参数分别表示:水平阴影,垂直阴影,模糊距离,阴影颜色; font-face属性 font-face...属性值 border新增 border-radius:创建圆角边框 box-shadow:为元素添加阴影 border-image:使用图片来绘制边框 linear-gradient:...| property 特点 没有属性改变 默认值,所有属性都改变 元素属性名 width,color等 transition-duration属性 定义: 设置对象过渡持续时间 语法:transition-duration...该属性允许过渡效果随着时间来改变其速度。 语法:只能使用一个属性值

16010
领券