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

Flutter multiple TextFormFields in Material App -重置文本

在Flutter中,可以使用多个TextFormField来创建一个具有重置文本功能的表单。TextFormField是一个用于接收用户输入的文本字段,可以用于收集表单数据。

要在Material App中创建多个TextFormField,可以使用Form组件来包裹这些字段。Form组件提供了表单的状态管理和验证功能。

下面是一个示例代码,演示了如何在Material App中创建多个TextFormField,并实现重置文本的功能:

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

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

class MyApp extends StatelessWidget {
  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
  final TextEditingController _textController1 = TextEditingController();
  final TextEditingController _textController2 = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Multiple TextFields'),
        ),
        body: Form(
          key: _formKey,
          child: Column(
            children: [
              TextFormField(
                controller: _textController1,
                decoration: InputDecoration(
                  labelText: 'Field 1',
                ),
                validator: (value) {
                  if (value.isEmpty) {
                    return 'Please enter some text';
                  }
                  return null;
                },
              ),
              TextFormField(
                controller: _textController2,
                decoration: InputDecoration(
                  labelText: 'Field 2',
                ),
                validator: (value) {
                  if (value.isEmpty) {
                    return 'Please enter some text';
                  }
                  return null;
                },
              ),
              RaisedButton(
                child: Text('Reset'),
                onPressed: () {
                  _formKey.currentState.reset();
                  _textController1.clear();
                  _textController2.clear();
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

在上面的代码中,我们创建了一个包含两个TextFormField的表单。每个TextFormField都有一个TextEditingController来控制文本的输入和获取。我们还使用了Form组件来管理表单的状态和验证。

在重置按钮的onPressed回调中,我们调用了_formKey.currentState.reset()来重置表单的状态,并使用_textController1.clear()和_textController2.clear()来清空文本字段的内容。

这样,当用户点击重置按钮时,表单中的文本字段将被重置为空。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云数据库(TencentDB)。您可以通过以下链接了解更多关于这些产品的信息:

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

相关·内容

Flutter』还原初始程序

什么是 Material Design?请看:https://material.io/design。就是提供了一些遵循了 Flutter 的规范的一些组件。...Typically the app's Scaffold builds a Material widget whose default Material.textStyle defines the text...大概意思就是说 MaterialApp 组件会配置它的 WidgetsApp.textStyle,这个 textStyle 是一个丑陋的红色/黄色的文本样式,旨在警告开发人员他们的应用程序没有定义默认文本样式...通常,应用程序的 Scaffold 构建一个 Material 小部件,其默认 Material.textStyle 定义整个脚手架的文本样式。...所以我们可以使用 Scaffold 小部件来实现 Material Design 布局结构,那么我们就来使用 Scaffold 小部件: import 'package:flutter/material.dart

17221

flutter 起步

flutter简介Flutter是谷歌的移动UI框架,可以运行在ios与android系统上,可以以完成app的开发,使用情况页面大多数涉及到flutter 开发的app 都是混合开发,占比并不多。...中的继承也有和Java不一样的地方:Flutter中的子类可以访问父类中的所有变量和方法,因为Flutter中没有公有、私有的区别上下文对象是整个APP Widget树结构中的Widget话柄,每个Wideget...MaterialApp:什么是MaterialAppMaterialApp是我们使用 Flutter开发中最常用的符合Material Design设计理念的入口Widget。...Text:文本组件Icon:图标组件CloseButton:关闭按钮的组件BackButton:返回按钮的组件Chip:材料设计中非常有趣的一个组件Divider:分割线的组件Card:卡片状的容器组件...热刷新无法实现更新时,执行一次热重启(Hot Restart)就可以全量更新所有代码,同样不需要重启App,区别是restart会将所有Dart代码打包同步到设备上,并且所有状态都会重置

4.4K20

Flutter】StatefulWidget 组件 ( 创建 StatefulWidget 组件 | MaterialApp 组件 | Scaffold 组件 )

Scaffold 组件 五、 相关资源 一、StatefulWidget 组件 ---- StatefulWidget 组件是 有状态组件 , 有如下常用的基础组件 : MaterialApp : 材料设计 APP...@override Widget build(BuildContext context) { // 文本组件样式 , 可以设置给 Text 文本组件 // 设置字体大小 20, 颜色红色...// 子组件, 子组件设置为一个 Column 组件 child: Column( // Column 子组件, 这里设置 Text 文本组件...Design ) APP 组件 , 通常用作页面的根节点 ; MaterialApp 组件是 StatefulWidget 的子类 ; 通过 MaterialApp 组件很容易实现符合 Material...flutter.cn/ Flutter 实用教程 : https://flutter.cn/docs/cookbook Flutter CodeLab : https://codelabs.flutter-io.cn

1.9K00

Flutter终将逆袭!1.2版本发布,或将统一江湖

以下是Flutter 1.2的一些更新,包括: 改进的Material和Cupertino小部件集 该团队一直致力于改进Material和Cupertino小部件集。...现在,开发人员在使用Material小部件时会有更大的灵活性。对于Cupertino小部件,他们增加了对iOS上浮动光标文本添加的支持。这可以通过用力按键盘或长按空格键来触发。...支持Android App Bundles Flutter 1.2支持Android App Bundles,这是一种新的上传格式,包含应用程序的所有编译代码和资源。...iOS 的支持,支持浮动光标文本编辑等等。...Flutter天生支持iOS风格的控件, 称为Cupertino, 这样我们可以一套设计, 一套code跑在两个系统上. 学习Flutter的过程会改变手机端app开发的思维.

1.2K20

完全免费、开源的Flutter,到底有哪些优势?该如何学习Flutter

Flutter独特功能: 专注于可定制的小部件,可以使用Material Design和Cupertino包(而不是android XML)中的所有小部件集来轻松开发UI。...要想创建一个新的Flutter项目,只需要键入: $ flutter create flutter_app Flutter 新项目主要包含以下几个目录: flutter_app android –生成Android...lib-主要代码文件都在这里创建,main.dart -主文件 test–用于单元测试 对于我们这个比较简单的App,我们仅需要“ main.dart”。文件。...首先重要的是导入“ material ”包。它用于引入UI组件。 import 'package:flutter/material.dart'; 就像许多其他语言一样,执行从main方法开始。..., MaterialApp 是小部件的封装,Material 是 materials 中的一种,Center 是将元素居中的小部件。Text 将添加文本字段小部件。

1.7K10

Flutter 3更新详解

△ 级联菜单示意 完整支持全桌面平台多国文本输入 全部三种桌面平台完整支持多国文本输入,包括使用文本输入法编辑器 (IME) 的语言,如中文、日文和韩文。...在您准备好分发至 TestFlight 或 App Store 时,请运行 flutter build ipa 构建 Xcode 归档 (.xcarchive 文件) 和应用软件包 (.ipa 文件)。...更多令人兴奋的更新 我们针对 Flutter 生态系统的其他更新包括: Material 3 Flutter 3 支持新一代 Material Design,即 Material Design 3。...Flutter 3 提供 Material 3 的可选支持,包括动态颜色、最新颜色系统和字体等 Material You 功能,还包含许多组件的更新,以及在 Android 12 中引入的新触摸波纹设计和拉伸滚动等全新视觉效果...我们欢迎大家通过全新的 “将枯燥无味的 Flutter 应用变得生动有趣” 的 Codelab 来尝试 Material 3 的功能特性。

3.5K20

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

ThemeData涵盖了Material Design规范的可自定义部分样式,比如应用明暗模式brightness、应用主色调primaryColor、应用次级色调accentColor、文本字体fontFamily...我们可以通过参数theme,选择改变App的主题色、字体等,设置界面在Material下的展示样式。 以下代码演示了如何设置App全局范围主题。...在Flutter中,我们可以使用Theme来对App的主题进行局部覆盖。...除了定义Material Design规范中那些可自定义部分样式外,主题的另一个重要用途是样式复用。...与其他平台类似,Flutter也提供了集中式管理主题的机制,可以在遵循Material Design规范的ThemeData中,定义那些可定制化的样式。

2.6K30

Flutter中构建布局 顶

对于非Material应用程序,您可以将Center小部件添加到应用程序的build()方法中: // This app doesn't use any Material Components, such...This app changes its background // to white and its text color to dark grey to mimic a Material app....如果您想在非Material应用程序中使用这些功能,您必须自己构建它们。 此应用程序将背景颜色更改为白色,将文本更改为深灰色以模仿Material应用程序。 而已!...Dart code (Material app): main.dart Dart code (widgets-only app): main.dart 垂直和水平放置多个小部件 最常见的布局模式之一是垂直或水平排列小部件...Flutter 画廊:演示应用程序展示了许多Material Design小部件和其他Flutter功能。 Flutter API文档:所有Flutter库的参考文档。

43K10

Flutter概述、原理 & 跨平台历史及各方案比较 & Dart概述

Application:Dart运用; Platform:Flutter渲染机制; ios、Android:渲染成ios、Android APP; 开发调试工具 flutter视图预览、视图调试...、Dart语言分析; web上调试Dart的工具; 内置丰富的组件 提供了 适用于Android的Material Design风格的组件 以及 适用于IOS的组件; 还可以在IOS上使用Material...Flutter基本原理 Dart语言编写的框架层【Framework】, Material、Cupertino:两套风格组件; Widgets:组件; Rendering:渲染层; Animation...Foundation:基础库; 引擎层【Engine】(C++编写) Skia:图形渲染引擎库【最基本的核心部分】; Dart:Dart VM(虚拟机),用于编译和运行Dart代码; Text:文本渲染...语言文件编译成本地字节码文件, 去掉断点、调试工具,安装包会小很多; 静态类型, 帮助我们在编译时捕获错误, 并在代码增长时管理代码; 易于移植, Dart可编译成ARM和X86代码, 让移动端App

1.9K20

Flutter】362- 让前端开发者失业的技术,Flutter Web 初体验

Flutter 的顶层是用 dart 编写的框架,包含 Material(Android 风格 UI)和 Cupertino(iOS 风格)的 UI 界面,下面是通用的 Widgets(组件),之后是一些动画...因此只需要重新实现一下引擎和嵌入层,不用变动 Flutter API 就可以完全可以将 UI 代码从 Android / IOS Flutter App 移植到 Web。.../material.dart 库而非 flutter/material.dart,这是因为目前 App 的接口并非和 Web 的完全通用,不过随着谷歌开发的继续,它们最终会被合并到一块。...文本可以像 css 一样设置外观样式。...总结 FLutter web 是 Flutter 的一个分支,在开发完 App 之后,UI 层面的 FLutter 代码在不修改的情况下可以直接编译为 Web 版,基本可以做到代码 100% 复用,体验还不错

2.1K20

Flutter 3.7更新详解

增强对 Material 3 的支持 在 Flutter 3.7 中,以下的 widget 已经进行了 Material 3 的适配: Badge BottomAppBar Filled and Filled...只有在完整的颜色方案下才能展现出 Material 3 最完整的细节,你可以使用新的 Material 主题构建器 生成你的主题配置,也可以通过 Flutter ThemeData 构造中的 colorSchemeSeed...iOS 发布校验 当你在构建一个发布版本的 iOS 应用时,Flutter 会为你提供 项目设置检查清单 来确保你的应用已经准备好发布到 App Store。...文本放大镜 在 Android 和 iOS 上进行文本选择时会出现的放大镜现在也会在 Flutter 中出现了。...最后 Flutter精彩课程推荐 Flutter高级进阶实战 仿哔哩哔哩APP Flutter从入门到进阶实战携程网App ---- 上一篇

3.1K00
领券