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

如何在TextFormField下面添加图标到errorText?

在TextFormField下面添加图标到errorText可以通过自定义的方式实现。以下是一种可能的实现方式:

  1. 首先,你需要使用Stack组件将TextFormField和图标组件叠加在一起。Stack组件可以将多个组件堆叠在一起,使它们重叠显示。
  2. 在Stack组件中,将TextFormField放在底部,然后将图标组件放在顶部。你可以使用Positioned组件来控制图标组件的位置。
  3. 接下来,你需要根据TextFormField的验证状态来确定是否显示错误图标。你可以使用Form的validate属性来进行验证,并根据验证结果来决定是否显示错误图标。
  4. 如果验证失败,你可以在TextFormField的errorText属性中设置错误信息,并在图标组件中显示一个错误图标。

下面是一个示例代码,演示了如何在TextFormField下面添加图标到errorText:

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

class MyForm extends StatefulWidget {
  @override
  _MyFormState createState() => _MyFormState();
}

class _MyFormState extends State<MyForm> {
  final _formKey = GlobalKey<FormState>();
  String _name;

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Column(
        children: [
          Stack(
            children: [
              TextFormField(
                decoration: InputDecoration(
                  labelText: 'Name',
                ),
                validator: (value) {
                  if (value.isEmpty) {
                    return 'Please enter your name';
                  }
                  return null;
                },
                onSaved: (value) {
                  _name = value;
                },
              ),
              Positioned(
                right: 0,
                bottom: 0,
                child: Icon(
                  Icons.error,
                  color: Colors.red,
                ),
              ),
            ],
          ),
          RaisedButton(
            onPressed: () {
              if (_formKey.currentState.validate()) {
                _formKey.currentState.save();
                // 执行表单提交操作
              }
            },
            child: Text('Submit'),
          ),
        ],
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text('Form Example'),
      ),
      body: MyForm(),
    ),
  ));
}

在这个示例中,我们使用了Stack组件将TextFormField和错误图标叠加在一起。当表单验证失败时,错误图标会显示在TextFormField下方。你可以根据需要自定义图标的样式和位置。

请注意,这只是一种实现方式,你可以根据自己的需求进行调整和修改。

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

相关·内容

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

    本文将探讨如何在Flutter中封装一个表单,以提升开发效率和用户体验。表单封装的重要性封装表单意味着将表单的创建和管理逻辑集中一个或几个可复用的组件中。...Flutter表单基础在Flutter中,表单通常由Form组件和TextFormField组件构成。Form组件包裹TextFormField组件,用于管理表单的状态和验证。...dartForm( key: _formKey, // 用于跟踪表单状态 child: Column( children: [ TextFormField(...异步验证对于需要服务器交互的验证,检查用户名是否已存在,我们可以使用异步验证。...在Flutter中,表单封装涉及Form和TextFormField的使用,以及自定义组件的创建。掌握这些技能,可以帮助开发者构建更加健壮和用户友好的移动应用。

    1600

    Flutter 入门指北之输入处理(登录界面实战)

    来实现,不过需要我们在外层加一个 Form 部件,接下来,就要准备通过 TextFormField 来撸一个登录界面,但是这之前,前面有个坑需要先解决下 导入自定义的图标 在这之前,涉及 Icon...等三方登录,然后就可以搜索我们需要的图标了,接下来需要撸一个登录,那我们就找一个 用户 和 密码 的图标吧,选择喜欢的图标,然后鼠标放到图标会出现三个按钮,直接点击 购物车 那个按钮,然后就可以通过顶部的...购物车 按钮查看添加图标,点击下载代码,把资源文件下载到本地。...文件放到该文件夹下,然后打开 pubspec.ymal 文件,注册下导入的资源,可以自己命名 iconfont.ttf 文件名,便于自己发现就行,例如我命名为 third_part_icon.ttf,在注册图片下面继续添加...好在有很多现成的插件已经开源,可以通过 FlutterPackage 搜索,例如等会我们会需要用到 FlutterToast 这个插件,用来做提醒用,在 FlutterPackage 中搜索插件后,

    1.9K50

    Flutter | 常用组件

    style: TextStyle(color: Colors.green)) ]); return Text.rich(textSpan); } 上面使用 Text.rich 方法将 TextSpan 添加到...如果为true 时,valude 的值会自动增加一个状态 null 总结 Switch , Checkbox 和 Radio 本身不会维护状态,而是需要父组件来管理状态,当用户点击时,通过事件将状态通知父组件...因此,我们在自定义组件是应该思考一下那种方式最为合理 输入框和表单 Material 组件库中提供了输入框组件 TextField 和表单组件 From ,下面来具体看一下 TextField 用于文本输入...obscureText :是否隐藏正在编辑的文本,输入密码等。...: controller, decoration: InputDecoration( errorText: "请输入内容", ), ) 去除下划线 decoration: InputDecoration.collapsed

    11.4K30

    Flutter 组件集录 | 下拉菜单 DropdownMenu 组件

    DropdownMenu 基础使用 首先通过一个最简单的案例体验一下 DropdownMenu 的使用,如下所示: 点击使会下拉展示菜单选项,选择科目 ; 点击时选中科目,下方的文本相应变化; 支持输入定位指定的菜单条目...左侧图标 trailingIcon Widget? 右侧为展开菜单时图标 selectedTrailingIcon Widget? 右侧展开菜单时图标 hintText String?...输入框辅助文字 errorText String? 输入框错误文字 menuStyle MenuStyle?...弹出菜单样式 下面是右侧选择图标的 DropdownMenu 组件构建逻辑,其中 requestFocusOnTap: 点击时是否获取焦点,置为 true 在移动端上会弹出软键盘,桌面端无法输入。...下面来简单瞄一眼 DropdownMenu 的代码实现。 4.

    4.2K10

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

    3)actions:右边的动作区域中可放置多个组件,可以是图标或者文字。 4)flexibleSpace:位于标题下面的空白空间。 5)bottom:位于导航栏底部的自定义组件。...具体选择哪种状态管理,可以参考如下基本原则: 1)如果状态是有关界面外观效果的(颜色、动画等),最好由Widget自身管理; 2)如果状态是用户数据(复选框的选中状态、滑块位置等),最好由父Widget...RaisedButton、FlatButton和OutlineButton等Material按钮组件都有一个图标构造函数,可以使用它来创建带图标的按钮。...Icon组件常见属性: Android支持系统自带的图标,mipmap文件中存放的就是Icon类型的图标。...表单组件由FormField及其子类构成,最常用的表单组件有DropdownButtonFormField和TextFormField两个。

    12.5K30

    xwiki开发者指南-一分钟创建App

    我们没有尝试包含所有类型的功能(通知、复杂的字段或工作流)。这些可以通过编程来添加。...定制 开始自定义应用程序之前,你应该了解: 什么是应用程序 如何在XWiki定义结构化数据 如何在XWiki使用表格(sheet)展示结构化数据 如何在XWiki使用服务器端脚本处理结构化数据 应用程序结构...一分钟创建App向导创建以下页面: 应用程序主页 (Holiday Request) 父页面Code,应用程序代码位于下面 class,管理定义的结构化数据 ( Holiday RequestClass...) translation,可用于国际化 (Holiday RequestTranslations) 父页面Data,应用程序条目位于下面 Preferences页面(WebPreferences)...假设你已经创建了 "External Image"属性类型,让我们看看如何在它的基础上添加一个字段类型。 首先你需要创建一个新的wiki页面。wiki页面的标题为新的字段类型的标题。

    8.3K30

    React Native iOS 剖析 WebView && 解决 Error loading page Domain: WebKitErrorDomain Error Code: 101 The U

    谷歌了一下,网上也有各种解决方法 :https://github.com/facebook/react-native/issues/9037 中 @lacker 的解决方法并不可行 renderError...:是否是合法的 URL、是否是请求系统定制的一些 API,例如 tel:// 等等 而当我们不实现 - (void)webView:(__unused UIWebView *)webView didFailLoadWithError...从代码中可以看到,当webView 加载中出现一个错误时,会自动添加一个错误视图 WebView 的视图正上方。也就是我们当前所碰到的错误的情况。...an error. */ renderError: PropTypes.func, // view to show if there's an error 当出现错误的情况下,可以添加一个错误视图...暂且记为 “重点一” ----------**********------- 下面切换一下重点。

    4.1K30

    FreeFileSync:在 Ubuntu 中对比及同步文件

    支持复制 NTFS 扩展属性,(压缩、加密、稀疏)。 还支持复制 NTFS 安全权限和 NTFS 备用数据流。 支持超过 260 个字符的长文件路径。 支持免故障的文件复制防止数据损坏。...如何在 Ubuntu 中安装 FreeFileSync 我们会添加官方的 FreeFileSync PPA,这只在 Ubuntu 14.04 和 Ubuntu 15.10 上有,那么像这样更新系统仓库列表并安装它.../FreeFileSync Comment:FolderComparisonandSynchronization 要为启动器添加一个图标,只需要点击图标选择:/opt/FreeFileSync/Resources...System Menu 中搜索,并点击 FreeFileSync 图标打开。...在本篇中,我们向你展示了如何在 Ubuntu 以及它的衍生版 Linux Mint、Kubuntu 等等中安装 FreeFileSync。在下面的评论栏中分享你的想法。

    3.9K20

    掌握Flutter底部导航栏:畅游导航之旅

    7.1 添加徽章 徽章是一种常用的提示标记,用于向用户展示一些重要信息,例如未读消息数量、新通知等。在底部导航栏中添加徽章可以让用户更快速地了解某个导航项的状态,从而提升用户体验。...下面是一个示例,演示了如何在底部导航栏中添加徽章: BottomNavigationBarItem( icon: Stack( children: [ Icon(...Stack中,并在图标右上角添加一个Container作为徽章。...下面是一个示例,演示了如何在运行时动态更改底部导航栏的项: class MyBottomNavigationBar extends StatefulWidget { @override _MyBottomNavigationBarState...此外,我们还探讨了如何利用状态管理库(Provider和Bloc)来管理底部导航栏的状态,以及如何实现一些高级功能,添加徽章、动态更改导航栏项以及实现动画效果等。

    36110

    HEXO系列教程 | 配置云游君Yun主题PART2 | 侧边栏配置

    考虑美观,夜梦这篇文章将介绍如何在 HEXO 上使用云游君开发的 Yun 主题。 真的超级漂亮!!!经过PART1的美化,夜梦HEXO的效果如下图: 这篇文章夜梦将介绍YUN主题其他内容的配置。...侧边栏配置 2.1 背景与标签 你可以按照下面的配置设置背景和标签。 此部分配置需要在_config.yun.yml中进行修改。...bg_position: bottom 3rem center tagcloud: enable: false amount: 20 2.2 页面链接 在sidebar的最下方,添加醒目的图标链接...相比社交链接,页面链接的图标更大。你可以放置你的页面导航,友情链接等。具体的位置可以参考下图: 你可以按照下面的配置设置侧边栏的页面链接。 此部分配置需要在_config.yun.yml中进行修改。...title: 可以覆盖默认标题 icon: 自定义你的图标 path: 自定义路径 count: 默认为对应类型的数量,你也可以使用自定义文本覆盖(注释部分) 夜梦设置的导航项目如下(其实就是默认的)

    12410

    Flutter 中自定义动画底部导航栏

    介绍: 显示在应用程序底部的Material小部件,用于在几个视角中进行选择,通常在 3 5 范围内的某个位置。底部导航栏包含各种选项,文本标签、图标或两者。...如何在 dart 文件中实现代码 创建一个新的 dart 文件*my_home_page.dart*。 在构建方法中,我们将返回一个 scaffold()。在里面我们将添加一个 appBar。...在 appBar 中,我们将添加 title 和 backgroundColor。我们将添加 body 并添加到**getBody()小部件中。下面我们将深入定义代码。...现在,我们将添加 bottomNavigationBar 并将其添加到_buildBottomBar()**小部件中。我们还将深入定义下面的代码。...在 items 中, e 将添加四个BottomNavyBarItem()。在里面,我们将添加四个不同的图标、标题、activeColors,并且所有的 text-align 都应该居中。

    8.9K30

    docsify快速入门

    GitHub Pages服务该站点不使用Jekyll作为构建工具 index.html:入口文件 README.md:作为首页渲染 请尽量使用docs目录来初始化docsify,原因是后面要用该目录部署GitHub...常用配置 站点标题、图标 站点标题需要修改index.html里的title标签: 1 Java-Note 站点图标要在index.html添加如下代码: 1 <link...此外,使用了无序列表或者有序列表的数据是无法生成对应索引的,也就是说搜索插件无法搜索列表里的数据。...docsify = { // docsify-copy-code (defaults) copyCode: { buttonText : 'Copy to clipboard', errorText...fontawesome 可以通过引入fontawesome来使用各种免费的矢量图标来丰富页面内容: 1 <link rel="stylesheet" href="https://cdn.jsdelivr.net

    93410

    Svg矢量图封装使用

    接下来,我们将探讨如何在 Vue 3 项目中有效地封装和引用 SVG 图标,帮助你充分发挥它们的优势。...一、如何在线使用svg图标 1、打开iconfont素材网站,集成 svg 图标 iconfont素材网站 icomoon素材网站 创建 iconfont 项目 找到合适的 svg 图标 添加购物车项目中...2、本地上传svg图标 挑选 svg 图标下载 打开iconfont上传 svg 图标 上传的svg图标添加至iconfont 项目 3、symbol 引用 官方帮助文档:查看,推荐使用 symbol...,所以尽量下载到本地项目中进行使用 4、内部引用svg图标 收集待使用的svg图标,下载放置项目的src/icons/svg/的文件夹中,放入一个vuejs_icon.svg图标 5、完成导入所有的svg...// 该函数提供了三个属性,可以通过 require.keys() 获取到所有的 svg 图标 // 遍历图标,把图标作为 request 传入 require 导入函数中,完成本地 svg 图标的导入

    12310
    领券