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

如何在Flutter中添加TextEditingController并从动态TextFormField中获取文本值?

在Flutter中,可以通过添加TextEditingController来实现从动态TextFormField中获取文本值的功能。

TextEditingController是Flutter中用于控制TextField或TextFormField的文本输入的控制器。它提供了一些方法和属性,可以获取、设置文本值,以及监听文本的变化。

要在Flutter中添加TextEditingController并从动态TextFormField中获取文本值,可以按照以下步骤进行操作:

  1. 导入Flutter的material库,以便使用TextEditingController和TextFormField组件。
代码语言:txt
复制
import 'package:flutter/material.dart';
  1. 在StatefulWidget的状态类中定义一个TextEditingController对象。
代码语言:txt
复制
TextEditingController _controller = TextEditingController();
  1. 在build方法中,使用TextFormField组件并将定义的TextEditingController对象赋值给其controller属性。
代码语言:txt
复制
TextFormField(
  controller: _controller,
  // 其他属性和回调函数
)
  1. 在需要获取文本值的地方,可以通过访问TextEditingController的text属性来获取文本值。
代码语言:txt
复制
String textValue = _controller.text;

完整的示例代码如下:

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

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  TextEditingController _controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          TextFormField(
            controller: _controller,
            decoration: InputDecoration(
              labelText: '输入文本',
            ),
          ),
          RaisedButton(
            onPressed: () {
              String textValue = _controller.text;
              print('获取到的文本值:$textValue');
            },
            child: Text('获取文本值'),
          ),
        ],
      ),
    );
  }
}

这样,你就可以通过添加TextEditingController,并在动态TextFormField中获取文本值了。

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

  • 腾讯云Flutter开发者平台:https://cloud.tencent.com/solution/flutter
  • 腾讯云移动应用开发:https://cloud.tencent.com/product/mobileapp
  • 腾讯云云服务器(CVM):https://cloud.tencent.com/product/cvm
  • 腾讯云云数据库(TencentDB):https://cloud.tencent.com/product/cdb
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

【第21期】Flutter 文本框初始化时显示默认

刚开始做Flutter文本框时候,使用的是TextField。似乎大多数情况下都没有问题。...controller.clear(); }, child: new Text('清空'), ), ], ); } } 问题1:动态创建文本框初始...但是现在有一种情况: **问题1: **当页面文本的初始动态的,从后台获取到的时候,应该怎么办呢? 这种情况下,说明创建TextEditingController时,并不知道文本内容。...这个时候如果动态修改controller的话,会报错,根本没法使用。 这种情况我根本没遇到过,但是我觉得Flutter肯定有解决方法。...'Do not use the @ char.' : null; }, ) TextField: 例如制作一个显示文本框,框中提示输入文本的内容信息。 ?

4.5K20

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

const InputDecoration(), // 输入框样式,包括提醒字样,hint 等等 TextInputType keyboardType, // 输入文本类型,例如 数字,email...,但是还有个更加方便的方法,可以直接使用部件 TextFormField 来实现,不过需要我们在外层加一个 Form 部件,接下来,就要准备通过 TextFormField 来撸一个登录界面,但是这之前...接着新建个 third_icons.dart文件 import 'package:flutter/material.dart'; class ThirdIcons { // codePoint 通过打开...导入第三方插件 其实 Flutter 缺少很多功能,需要通过导入第三方插件来实现功能,插件就是 Flutter 和原生交互的桥梁,也就是说,要写 Flutter 的插件,需要写 Android 和 iOS...TextEditingController _usernameController = TextEditingController(); TextEditingController _passwordController

1.9K50

Flutter | 常用组件

Text ,之所以这样做,就是应为 Text 本身就是 RichText 的一个包装,而 RichText 是可以显示多种样式(富文本)的 widget,样式如下: 字体 在 flutter...是一个抽象类,主要定义了图片获取的接口 load , 从不同的数据源获取图片需要实现不同的 ImageProvider, AssetImage 就是实现了 Asset 中加载图片的 ImageProvider...textInputAction :键盘动作按钮图标,他是一个枚举,有多个可选,具体的可查看 api style:正在编辑的文本样式 textAlign:输入框内编辑文本在水平方向的对齐方式...obscureText :是否隐藏正在编辑的文本输入密码等。...在请求接口之前会对输入框的数据进行校验,如果对每个 TextField 都进行校验会非常麻烦,为此,Flutter 提供了一个 Form 组件,他可以对 输入框进行分组,然后统一进行一些操作,内容校验

11.4K30

Flutter 数据持久化存储之Hive库

NoSQL数据库: 一些Flutter插件(moor)也提供了对NoSQL数据库的支持,比如使用对象数据库(Hive)来存储数据。...创建项目之后,我们配置一下依赖库,在项目的pubspec.yaml文件添加如下所示代码: dependencies: get: hive: hive_flutter: dev_dependencies...: hive_generator: build_runner:   在dependencies添加了get和hive的库,在dev_dependencies添加了一个构建对象的依赖库。...冒号后面没有写版本号就是获取该库最新的版本。添加位置如下图所示: 然后点击Pub get获取对应的依赖库即可,到这里为止我们的配置工作就完成了。...personBox盒子对象,final personBox = Hive.box('personBox');,然后就是save()函数获取输入框的进行保存,保存之后再清空输入框,这里就没有对输入框的内容判空处理

18400

Flutter 构建完整应用手册-联网 顶

从互联网上获取数据 从大多数应用程序获取互联网上的数据是必要的。 幸运的是,Dart和Flutter为这类工作提供了工具!...路线 使用http包发出网络请求 将响应转换为自定义Dart对象 用Flutter获取并显示数据 1.使用http包发出网络请求 http包提供了从互联网获取数据的最简单方法。...在这个例子,我们将使用http.get方法从JSONPlaceholder REST API获取示例文章。...现在我们有一个功能,我们可以调用从互联网上获取Post! 3.用Flutter获取并显示数据 为了获取数据并将其显示在屏幕上,我们可以使用FutureBuilder小部件!...Flutter附带FutureBuilder部件,可以轻松处理异步数据源。 我们必须提供两个参数: 使用的Future。 在我们的例子,我们将调用我们的fetchPost()函数。

2.6K20

Flutter 截图上传

在上一篇文章,我们谈了 Flutter 中下载并保存图片为文件 的内容,今天,我们来说说怎么将 widget 生成截图,并且怎么通过接口上传。...buffer.asUint8List()); } getTemporaryDirectory() 用于获取临时文件目录的路径。不同操作系统,获取的临时文件目录路径可能会有所不同,这个我们不需要关心。...接口上传 为了方便理解,我们扩展演示,随便增加一个字段,上传的 Form 表单内容如下: final TextEditingController _descriptionController = TextEditingController...buffer.asUnit8List(), fit: BoxFit.fill, ), ), TextFormField( controller...我们可以在 FileState 文件,定义接口执行的状态,并在页面监听该状态的更改来展示接口操作成功与否的 Toast。

12010

Flutter 专题】08 小小优化【登录】页面

和尚查了一下官网,调整方式很简单,将根 widget 调整为 body: new ListView(),Flutter 的 ListView 不仅代表列表 (ListView/RecycleView)...优化二:文本框 TextField 尾部添加【清空数据】图标 方式一:使用层布局 Stack,在输入文本框 TextField 上一层添加一个【清空数据】图标; new Padding( padding...优化三:调整键盘弹出样式 设置文本框 TextField keyboardType: TextInputType.phone, Flutter 提供了多种弹出键盘的方式:text/datetime...优化四:根据输入文本添加【温馨提示】对话框 Flutter 提供了创建和显示弹出对话框的功能,:showDialog/showMenu/showModalBottomSheet 等,和尚采用的是对话框方式..._phonecontroller = new TextEditingController(); TextEditingController _pwdcontroller = new TextEditingController

1.4K51

《深入浅出Dart》Flutter实战之TODO应用

这个TODO应用将具备添加、编辑、删除任务,以及任务的状态管理等功能。让我们一步一步地构建这个TODO应用。 步骤 1:创建Flutter项目 首先,我们需要创建一个Flutter项目。...在lib/screens/todo_list_screen.dart创建一个新的Dart文件,并添加以下代码: import 'package:flutter/material.dart'; import...在lib/screens/todo_edit_screen.dart创建一个新的Dart文件,并添加以下代码: import 'package:flutter/material.dart'; import...在initState方法,我们初始化了文本编辑器的控制器,并根据传入的任务初始化了相应的。 在build方法,我们使用Scaffold和Column来显示标题、描述和完成状态的输入字段。...您可以点击浮动按钮添加新的 任务,点击任务列表项编辑任务的标题、描述和完成状态。 参考资料 Dart官方文档 Flutter官方文档 Flutter实战教程

20220

flutter 输入框组件TextField的实现代码

TextField 顾名思义文本输入框,类似于iOS的UITextField和Android的EditText和Web的TextInput。主要是为用户提供输入文本提供方便。...相信大家在原生客户端上都用过这个功能,就不在做具体介绍了,接下来还是具体介绍下FlutterTextField的用法。...输入框获取焦点/输入框有内容 会移动到左上角,否则在输入框内,labelTex的位置. suffixIcon: 输入框内侧右面的图标. icon : 输入框左侧添加个图标 在多个输入框内切换焦点 介绍一下...当按下一个未完成操作(“next”或“previous”)时,用户的内容被提交给[controller],但不会放弃焦点,因为开发人员可能希望立即将焦点转移到[onsubmit]的另一个输入小部件。...FocusScope.of(context).requestFocus(secondTextFieldNode), 方法来让第二个输入框请求获取焦点, 当然你也可以添加个按钮 , 点击按钮执行这个方法来实现切换焦点的功能

4.7K11

Flutter 快速解析 TextField 的内部原理

在 TextSelectionGestureDetectorBuilder 的内部主要是通过 editableTextKey 这个 GlobalKey 去获取到 EditableTextState,从而将各种手势事件和...例如在 _TextFieldSelectionGestureDetectorBuilder ,可以看到 onSingleTapUp 的处理流程: image 如上代码所示: 1、收起已经弹出的 Toolbar...RootRestorationScope ,所以我们只需要给 MaterialApp 设置 restorationScopeId,而 TextFild 通过内置 UnmanagedRestorationScope 相关的逻辑,最终实现了文本内容的保存与恢复...所以本篇主要是通过介绍 TextField 的组成,以及解释内部各组成部分的作用,让开发者可以更清晰的了解 Flutter 里常用的文本输入框的实现,当遇上问题或者需求时,可以快速定位和解决问题,例如:...最后介绍一个简单的问题,之前有人刚好问我:如何在 Flutter 上实现类似微信聊天输入框从一行到多行的输入框效果,如下图代码所示,就是这么简单: TextField( focusNode: _focusNode

2.3K30
领券