Flutter教程：如何创建仅支持数字输入的文本框？

你的代码报错核心原因是在Container的参数内部直接声明了TextEditingController变量，这违反了Dart语法规则——Widget的属性区域内不允许编写变量声明语句。以下是修正后的完整实现方案：

错误原因分析 #

你在Container内部直接写了TextEditingController _numberController = TextEditingController();，这种写法相当于在Widget的参数列表里插入变量定义，Flutter的Widget树构建逻辑不支持这种操作，变量声明应放在Widget构建方法的外部（State类成员）或者构建方法的起始位置。

修正后的代码示例 #

1. 推荐的StatefulWidget实现（适合需要处理输入值的场景） #

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:google_fonts/google_fonts.dart';

class NumberInputField extends StatefulWidget {
  const NumberInputField({super.key});

  @override
  State<NumberInputField> createState() => _NumberInputFieldState();
}

class _NumberInputFieldState extends State<NumberInputField> {
  // 将控制器声明为State类的成员变量
  final TextEditingController _numberController = TextEditingController();

  @override
  void dispose() {
    // 销毁控制器避免内存泄漏
    _numberController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 310,
      child: TextField(
        controller: _numberController,
        // 用phone类型键盘更适配手机号输入，纯数字输入可改用TextInputType.number
        keyboardType: TextInputType.phone,
        inputFormatters: const <TextInputFormatter>[
          FilteringTextInputFormatter.digitsOnly,
        ],
        decoration: InputDecoration(
          enabledBorder: const UnderlineInputBorder(
            borderSide: BorderSide(color: Color(0xffbcbcbc)),
          ),
          focusedBorder: const UnderlineInputBorder(
            borderSide: BorderSide(color: Colors.cyan),
          ),
          hintText: '+919876567876',
          hintStyle: GoogleFonts.lato(
            color: const Color(0xff000000),
            fontSize: 20,
            letterSpacing: 0.5,
            decorationThickness: 3,
          ),
        ),
      ),
    );
  }
}

2. 无状态Widget简化实现（无需维护状态时使用） #

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:google_fonts/google_fonts.dart';

class NumberInputField extends StatelessWidget {
  const NumberInputField({super.key});

  @override
  Widget build(BuildContext context) {
    // 在build方法起始位置声明控制器
    late final TextEditingController _numberController = TextEditingController();
    
    return Container(
      width: 310,
      child: TextField(
        controller: _numberController,
        keyboardType: TextInputType.phone,
        inputFormatters: const <TextInputFormatter>[
          FilteringTextInputFormatter.digitsOnly,
        ],
        decoration: InputDecoration(
          enabledBorder: const UnderlineInputBorder(
            borderSide: BorderSide(color: Color(0xffbcbcbc)),
          ),
          focusedBorder: const UnderlineInputBorder(
            borderSide: BorderSide(color: Colors.cyan),
          ),
          hintText: '+919876567876',
          hintStyle: GoogleFonts.lato(
            color: const Color(0xff000000),
            fontSize: 20,
            letterSpacing: 0.5,
            decorationThickness: 3,
          ),
        ),
      ),
    );
  }
}

关键实现要点 #

• 键盘类型选择：TextInputType.phone会弹出带快捷输入键的数字键盘，更适合手机号场景；纯数字输入可使用TextInputType.number
• 输入限制：FilteringTextInputFormatter.digitsOnly确保文本框仅接受数字输入
• 控制器管理：StatefulWidget中需在dispose方法销毁控制器，避免内存泄漏；无状态Widget则在build方法内声明控制器

内容的提问来源于stack exchange，提问作者Priya