（十一）Flutter 表单验证与提交。 Theme的定制使用重置，TextField文本字段。

本文详细介绍如何在Flutter中创建并使用表单组件，包括TextField的实现与验证，以及如何自定义主题颜色，通过实例演示了注册表单的构建过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

修改main.dart

import 'package:flutter/material.dart';
import 'package:nihao_flutter/demo/form_demo.dart';
import 'package:nihao_flutter/demo/navigator_demo.dart';
import 'package:nihao_flutter/demo/home_demo.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) { 
    // TODO: implement build
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      // home: NavigatorDemo(),
      initialRoute: '/form',
      routes: {
        '/':(context)=>HomeDemo(), 
        '/form':(context)=>FormDemo(), 
        },
      theme: ThemeData(
          primarySwatch: Colors.yellow,
          highlightColor: Color.fromRGBO(255, 255, 255, 0.5),
          splashColor: Colors.red),
    );
  }
}

新建form_demo.dart

import 'package:flutter/material.dart';

class FormDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Theme(
        data: Theme.of(context).copyWith(
          primaryColor: Colors.black,
        ),
        child: Container(
          padding: EdgeInsets.all(16.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              RegisterForm(),
            ],
          ),
        ),
      ),
    );
  }
}

class RegisterForm extends StatefulWidget {
  @override
  RegisterFormState createState() => RegisterFormState();
}

class RegisterFormState extends State<RegisterForm> {
  final registerFormKey = GlobalKey<FormState>();
  String username, password;
  bool _autovalidate=false;
  void submintRegisterForm() {


    if(registerFormKey.currentState.validate()){
      registerFormKey.currentState.save();
      debugPrint('username $username');
      debugPrint('password $password');
      Scaffold.of(context).showSnackBar(
          SnackBar(
            content: Text('Registering...'),
          )
      );
    }else{
      setState(() {
        _autovalidate=true;
      });
    }

  }

  String validateUsername(value) {
    if (value.isEmpty) {
      return "Username  os required.";
    }
    return null;
  }

  String validatePassword(value) {
    if (value.isEmpty) {
      return "Password is required.";
    }
    return null;
  }

  @override
  Widget build(BuildContext context) {
    return Form(
      key: registerFormKey,
      child: Column(
        children: <Widget>[
          TextFormField(
            decoration: InputDecoration(
              labelText: 'Username',
              helperText: 'please input Username',
            ),
            onSaved: (value) {
              username = value;
            },
            validator: validateUsername,
            autovalidate: _autovalidate,
          ),
          TextFormField(
            obscureText: true,
            decoration: InputDecoration(
              labelText: 'Password',
              helperText: 'please inputPassword',
            ),
            onSaved: (value) {
              password = value;
            },
            validator: validatePassword,
            autovalidate: _autovalidate,
          ),
          SizedBox(
            height: 32.0,
          ),
          Container(
            width: double.infinity,
            child: RaisedButton(
              color: Colors.green,
              child: Text('Register', style: TextStyle(color: Colors.white)),
              elevation: 0.0,
              onPressed: submintRegisterForm,
            ),
          ),
        ],
      ),
    );
  }
}

class ThemeDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Theme.of(context).splashColor,
    );
  }
}

class TextFieldDemo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return TextFieldDemoState();
  }
}

class TextFieldDemoState extends State<TextFieldDemo> {
  final textEditingController = TextEditingController();
  @override
  void dispose() {
    textEditingController.dispose();
    super.dispose();
  }

  @override
  void initState() {
    super.initState();
    // textEditingController.text='hi';
    textEditingController.addListener(() {
      debugPrint('input ${textEditingController.text}');
    });
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return TextField(
      controller: textEditingController,
      // onChanged: (value){
      //   debugPrint('input：$value');
      // },
      onSubmitted: (value) {
        debugPrint('submit:$value');
      },
      decoration: InputDecoration(
          icon: Icon(Icons.subject),
          labelText: 'Title',
          hintText: 'Enter the post title.',
          // border: InputBorder.none,
          // border: OutlineInputBorder(),
          filled: true,
          fillColor: Colors.green),
    );
  }
}

vscode f5运行看效果

android studio shift+f10