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

如何在TextFormField中显示最初只允许flutter中的数字的空字符串?

在Flutter中,要在TextFormField中显示最初只允许数字的空字符串,可以通过设置TextInputFormatter来实现。

TextInputFormatter是一个用于格式化输入文本的类,可以在文本输入过程中进行过滤或修改。为了只允许输入数字,可以使用WhitelistingTextInputFormatter将非数字字符过滤掉。

下面是一个示例代码,演示如何在TextFormField中显示最初只允许数字的空字符串:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Number Input'),
        ),
        body: Center(
          child: Padding(
            padding: EdgeInsets.all(16.0),
            child: MyForm(),
          ),
        ),
      ),
    );
  }
}

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

class _MyFormState extends State<MyForm> {
  TextEditingController _controller;

  @override
  void initState() {
    super.initState();
    _controller = TextEditingController();
  }

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

  @override
  Widget build(BuildContext context) {
    return TextFormField(
      controller: _controller,
      inputFormatters: [
        WhitelistingTextInputFormatter.digitsOnly,
      ],
      decoration: InputDecoration(
        labelText: 'Number',
      ),
    );
  }
}

在上述代码中,我们创建了一个简单的表单(MyForm),其中包含一个TextFormField。通过设置inputFormatters属性,我们使用WhitelistingTextInputFormatter.digitsOnly来只允许输入数字字符。

运行上述代码,你将看到一个带有标签的文本输入框,最初只允许输入数字的空字符串。任何非数字字符都将被过滤掉。

腾讯云相关产品:在云计算领域,腾讯云提供了丰富的产品和服务。如果您需要在Flutter应用中集成云计算相关功能,可以考虑使用腾讯云的Serverless云函数、云数据库MySQL版等产品。您可以访问腾讯云官方网站(https://cloud.tencent.com/)了解更多信息。

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

相关·内容

Excel何在大于零数字旁边显示为“正常”?

Excel技巧:Excel何在大于零数字旁边显示为“正常”? 问题:如何在大于零数字旁边显示为“正常”? 解答:利用If函数轻松搞定。...具体操作如下:新建一个Excel工作簿,您可以自己输入一些大于0或小于0数字。等下我们要在旁边显示,凡是大于0数字显示为“正常”二字。 ?...在上图单元格处,输入If函数内容如下:=if(C4 0,“正常”,“ ”)意思是如果C4 0,这显示为正常,否者显示为空格。...输入函数完毕后,单击回车键,然后双击D4单元格数据柄(下图1处),自动向下填充函数公式即可。 ? 双击完毕后,效果如下: ? 大于零数值显示为正常,小于零数值显示为空格。...总结:注意函数参数,只要超过两个字符,就需要用半角输入法引号引用起来,否者函数公式会报错。本例中小于零数值显示为空格,是一种让单元格不显示内容一种常规方法(其实单元格有内容是空格)。

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

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

    1600

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

    刚开始做Flutter文本框时候,使用是TextField。似乎大多数情况下都没有问题。...但是现在有一种情况: **问题1: **当页面文本框初始值是动态,从后台获取到时候,应该怎么办呢? 这种情况下,说明创建TextEditingController时,并不知道文本内容。...所以我去找了一下Flutter文档,总算是没有白找,找到了一个(https://api.flutter.dev/flutter/material/TextFormField-class.html)[组件...问题2: TextField和TextFormField区别? 问题虽然解决了,但是现在又有另外一个问题了: **问题2: ** TextField和TextFormField区别是什么?...'Do not use the @ char.' : null; }, ) TextField: 例如制作一个显示文本框,框中提示输入文本框内容信息。 ?

    4.7K20

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

    ,但是还有个更加方便方法,可以直接使用部件 TextFormField 来实现,不过需要我们在外层加一个 Form 部件,接下来,就要准备通过 TextFormField 来撸一个登录界面,但是这之前...导入第三方插件 其实 Flutter 缺少很多功能,需要通过导入第三方插件来实现功能,插件就是 Flutter 和原生交互桥梁,也就是说,要写 Flutter 插件,需要写 Android 和 iOS...好在有很多现成插件已经开源,可以通过 FlutterPackage 搜索到,例如等会我们会需要用到 FlutterToast 这个插件,用来做提醒用,在 FlutterPackage 搜索到插件后,...,和 TextFormField validator条件不符合,则会显示错误文字提示 ?...,算是第一次实战了,望小伙伴能够好好写一遍 代码地址: https://github.com/kukyxs/flutter_arts_demos_app

    1.9K50

    Flutter & 鸿蒙next版本:自定义对话框与表单验证动态反馈与错误处理

    在现代移动应用开发,用户体验是至关重要一环。Flutter和鸿蒙操作系统(HarmonyOS)结合,为开发者提供了一个强大平台,以创建跨平台、高性能应用程序。...本文将探讨如何在Flutter与鸿蒙next版本创建自定义对话框,并结合表单验证实现动态反馈与错误处理,以提升用户体验。...自定义对话框重要性在Flutter,对话框(Dialog)是一种常用UI组件,它允许开发者在应用显示额外信息、确认操作或收集用户输入。...这个类将封装对话框显示逻辑,使得在不同地方调用时更加方便和一致。...在Flutter,我们可以通过Form和TextFormField组件来实现表单验证。validator函数用于检查用户输入是否符合预期,如果不符合,将显示错误信息,提供动态反馈给用户。

    1900

    Flutter』常用组件 表单

    1.前言 在上一篇文章,介绍完毕了常用组件 TextField 组件,本篇文章将继续介绍常用组件表单组件。...2.表单 2.1.介绍 在Flutter,表单(Form)是一个用于数据收集和验证容器组件。它通常与 TextField 和 FormField 等输入组件结合使用,以创建一个完整用户输入表单。...表单组件主要作用是对输入数据进行验证和管理。 2.2.常用属性 key:GlobalKey 类型,用于控制和访问表单状态,验证表单和保存表单数据。...创建了一个带有 GlobalKey 表单,它包含一个 TextFormField 用于输入和验证邮箱地址,并有一个提交按钮,当表单验证通过时会显示一个提示。...它提供了对表单控制,使得开发者可以在表单外部执行一些操作,验证表单、保存表单数据、重置表单等。 3.2.

    72410

    Flutter | 常用组件

    0.0,// 禁用时阴影 ... } 复制代码 通过设置以上属性即可设置阴影,elevation 这个属性会在很多组件见到,都是用来控制阴影 图片 在 Flutter ,我们可以通过 Image...,使用 FadeInImage 之后会在图片加载过程显示一个占位符,在图片加载完成之后显示淡入 ICON 在 Flutter ,可以直接使用 字体图标,它是将图标做成字体文件,然后通过指定不同字符而现实不同图片...在字体文件,每个字符都对应一个码,每个码对应一个显示字形,不同字体就是指字形不同,及字符对应字形是不同。...而在 iconfont ,只是将位码对应字形做成了图标,所以不同字符最终就会渲染成不同图标 在 Flutter ,iconfont 和图片相比有如下优势 1,体积小 2,矢量图标,放大不会影响清晰度...null : "用户名不能为"; }, ), TextFormField(

    11.4K30

    【老孟FlutterFlutter 2 新增功能

    此外,内置上下文菜单已添加到Material和Cupertino设计语言TextField和TextFormField小部件。最后,添加了抓手 到ReorderableListView小部件。...Flutter构建应用获利策略,以及如何在自己广告中加载广告Flutter应用。...可用修复程序列表,带小灯泡快速修复程序,可帮助您单击鼠标来更改代码。...现在,当您显示分辨率明显大于其显示尺寸图像时,该图像将上下颠倒显示,以便在您应用轻松查找。...他们分叉了Flutter团队最初开发许多受欢迎插件,并添加了null安全支持,对其他平台支持和一整套全新文档,以及开始修复flutter / plugins存储库适当问题。

    7.9K20

    Flutter》-- 4.Flutter组件基础

    FlutterWidget不仅可以表示UI元素,也可以布局元素、动画、装饰效果。 Widget不是最终显示在设备屏幕上显示元素,而是一个描述显示元素配置数据。...Flutter真正代表屏幕显示元素类是Element。 在大多数场景下,可以宽泛地认为Widget树就是指UI组件树或UI渲染树。...4.1.3 MaterialApp MaterialApp是Flutter开发符合Material设计理念Widget,可以将它类比为网页开发标签,它提供了路由、主题色和标题等功能。...具体选择哪种状态管理,可以参考如下基本原则: 1)如果状态是有关界面外观效果颜色、动画等),最好由Widget自身管理; 2)如果状态是用户数据(复选框选中状态、滑块位置等),最好由父Widget...focusNode:用于控制TextField组件是否获取输入焦点,它是用户和键盘交互一种常见方式。 decoration:用于控制TextField组件外观显示提示文本、背景颜色和边框。

    12.5K30

    Flutter 流体滑块

    原文链接:https://medium.com/flutterdevs/explore-fluid-slider-in-flutter-ba6bf2dfa21 在本文中,我们将**探讨Flutter...下面的演示视频显示了如何在颤动创建流畅滑块。它显示了如何在flutter应用程序中使用flutter_fluid_slider软件包来工作流体滑块传送带。...在内部,我们将在value方法添加一个变量;max表示最大值 是用户可以选择值,并且大于或等于最小值。添加滑块颜色和拇指颜色。在此滑块,我们将添加开始意味着小部件将显示为最小标签。...我们将显示一个附着金钱图标。如果未提供,则该max值将显示为文本。当我们运行应用程序时,我们应该获得屏幕输出,屏幕下方截图所示。 img 现在,我们将创建第三个“流体”滑块。...我们将创建一个字符串数字1到10列表并返回数字

    11.7K20

    Flutter Platform Channels(一)

    每个消息发送都涉及来自接收器异步回复。 在上面的例子,对于回传值并没有兴趣,但是回复(null)对于Dart Future完成和两个平台回调执行是必要。 线程。...---- 使用二进制消息,你需要考虑十分精细细节,字节序以及如何使用字节表示更高级别的消息,字符串或映射。 每当要发送消息或注册handler时,还需要指定正确通道名称。...以下代码显示了如何在Dart,Android和iOS两个方向上使用message channel: // String messages // Dart side const channel = BasicMessageChannel...由于各种历史原因,Flutter定义了四种不同消息编解码器: StringCodec使用UTF-8对字符串进行编码。...JSONMessageCodec 是用来处理'Json-like'数据(字符串数字,布尔值,null,元素为此类值list以及键为字符串值为此类值Map)进。List和Map是异构,可以嵌套。

    4.4K01

    TensorFlow Lite,ML Kit 和 Flutter 移动深度学习:6~11

    为了确保用户在没有输入电子邮件地址或密码情况下不要尝试登录,我们添加了一个验证器。 当尝试使用字段登录时,将显示警告“电子邮件不能为”。...action_to_string(action):此函数将玩家执行动作内部数字表示形式转换为可以以易于理解形式显示给用户字符串。 例如place_at(board, pos,。...例如,PpkB指示板上前四个正方形被白色棋子,黑色棋子,黑色国王和白色主教占据。 对于空盒子,使用整数,该数字表示可传染空盒子数量。 注意示例 FEN 字符串8。...在getPositionString()方法,我们迭代从 8 到 1 每一行,并为每行生成一个状态字符串。 对于每个非框,我们只需在's'变量添加一个表示该块字符。...对于每个框,当找到非框或到达行末时,我们将count值增加 1 并将其连接到's'字符串。 遍历每一行后,我们添加“/”以分隔两行。

    23.1K10

    Flutter TextField详解

    键盘类型 键盘类型 即 可输入类型,比如number就只能输入数字 TextField( keyboardType: TextInputType.number...TextField内容。...以上就是图标的介绍,其实除了图标之外,对应位置也可以显示文字或者自定义显示其他widget 比如出了prefixIcon之外还有其他3个属性,用法跟上面介绍到自定义计数器是一样。...From包裹TextFormField 异常 软键盘弹出之后遮盖 软键盘弹出之后高度溢出 解决办法:用滑动组件包裹起来(ListView等),这样软键盘弹出时候,输入框也会自动向上滑。...总结 以上就是全部介绍了,然后写了个登录注册小demo: github:https://github.com/yechaoa/wanandroid_flutter 官方文档:https://api.flutter.dev

    4.2K40
    领券