在 flutter 中制作一个 TextFormField 全局小部件

Question

我正在为应用程序制作一个全局 TextFormField 小部件。但它没有在控制器中返回数据。我的全局文本表单字段小部件：请告诉我我做错了什么。我正在 SignUp person 小部件中初始化控制器。我还想在验证器中验证文本表单字段。

import 'package:flutter/material.dart';

class GlobalTextField extends StatelessWidget {
  final Widget fieldIcon;
  final String fieldText;
  final TextEditingController fieldController;
  final bool isEnabled;

  const GlobalTextField(
    this.fieldIcon,
    this.fieldText,
    this.fieldController, [
    this.isEnabled,
  ]);
  @override
  Widget build(BuildContext context) {
    return TextFormField(
      controller: fieldController,
      enabled: isEnabled ?? true,
      decoration: InputDecoration(
        hintText: fieldText,
        prefixIcon: fieldIcon,
        hintStyle: TextStyle(color: Colors.grey),
        filled: true,
        fillColor: Colors.white70,
        enabledBorder: UnderlineInputBorder(
          borderSide: BorderSide(color: Color.fromRGBO(198, 57, 93, 1)),
        ),
        focusedBorder: UnderlineInputBorder(
          borderSide: BorderSide(color: Color.fromRGBO(198, 57, 93, 1)),
        ),
      ),
      cursorColor: Color.fromRGBO(198, 57, 93, 1),
    );
  }
}

我用的很喜欢

import 'package:flutter/material.dart';
import 'package:neighbourhood_watch/ui/widgets/button_global.dart';
import 'package:neighbourhood_watch/ui/widgets/textfield_global.dart';
import 'package:neighbourhood_watch/widgets/user_image_picker.dart';
import 'dart:io';

class SignUpPerson extends StatefulWidget {
  @override
  _SignUpPersonState createState() => _SignUpPersonState();
}

class _SignUpPersonState extends State<SignUpPerson> {
  TextEditingController username = new TextEditingController();
  TextEditingController description = new TextEditingController();
  TextEditingController contact = new TextEditingController();
  TextEditingController password = new TextEditingController();
  TextEditingController area = new TextEditingController();
  TextEditingController email = new TextEditingController();
  final _formKey = GlobalKey<FormState>();
  File _userImageFile;
  void _pickedImage(File image) {
    _userImageFile = image;
  }

  @override
  Widget build(BuildContext context) {
    double width = MediaQuery.of(context).size.width;
    double height = MediaQuery.of(context).size.height;
    return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        child: Container(
          height: height,
          width: width,
          child: SingleChildScrollView(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Container(
                  height: height * 0.05,
                  width: width,
                ),
                Container(
                  height: height * 0.25,
                  width: width,
                  child: Image.asset(
                    'assets/images/nhwlogo_global.png',
                    fit: BoxFit.contain,
                  ),
                ),
                Text(
                  'Create an Account',
                  style: TextStyle(
                    fontSize: 22,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                SizedBox(
                  height: 30.0,
                ),
                Container(
                  height: height * 0.12,
                  width: width * 0.5,
                  child: UserImagePicker(
                    imagePickFn: _pickedImage,
                  ),
                ),
                SizedBox(
                  height: 10.0,
                ),
                Padding(
                  padding: const EdgeInsets.only(left: 25.0, right: 25.0),
                  child: GlobalTextField(
                      Icon(
                        Icons.person,
                        color: Color.fromRGBO(198, 57, 93, 1),
                      ),
                      'Username',
                      username),
                ),
                SizedBox(
                  height: 15.0,
                ),
                Padding(
                  padding: const EdgeInsets.only(left: 25.0, right: 25.0),
                  child: GlobalTextField(
                      Icon(
                        Icons.edit,
                        color: Color.fromRGBO(198, 57, 93, 1),
                      ),
                      'Description',
                      description),
                ),
                SizedBox(
                  height: 15.0,
                ),
                Padding(
                  padding: const EdgeInsets.only(left: 25.0, right: 25.0),
                  child: GlobalTextField(
                      Icon(
                        Icons.call,
                        color: Color.fromRGBO(198, 57, 93, 1),
                      ),
                      'Contact No.',
                      contact),
                ),
                SizedBox(
                  height: 15.0,
                ),
                Form(
                  key: _formKey,
                  child: Padding(
                    padding: const EdgeInsets.only(left: 25.0, right: 25.0),
                    child: GlobalTextField(
                        Icon(
                          Icons.cake,
                          color: Color.fromRGBO(198, 57, 93, 1),
                        ),
                        'Date of Birth',
                        password),
                  ),
                ),
                SizedBox(
                  height: 15.0,
                ),
                Padding(
                  padding: const EdgeInsets.only(left: 25.0, right: 25.0),
                  child: GlobalTextField(
                      Icon(
                        Icons.location_on,
                        color: Color.fromRGBO(198, 57, 93, 1),
                      ),
                      'Area',
                      area),
                ),
                SizedBox(
                  height: 15.0,
                ),
                Padding(
                  padding: const EdgeInsets.only(left: 25.0, right: 25.0),
                  child: GlobalTextField(
                      Icon(
                        Icons.email,
                        color: Color.fromRGBO(198, 57, 93, 1),
                      ),
                      'Email',
                      email),
                ),
                SizedBox(
                  height: 15.0,
                ),
                Padding(
                  padding: const EdgeInsets.only(left: 25.0, right: 25.0),
                  child: GlobalTextField(
                      Icon(
                        Icons.lock,
                        color: Color.fromRGBO(198, 57, 93, 1),
                      ),
                      'Password',
                      password),
                ),
                SizedBox(
                  height: 15.0,
                ),
                Padding(
                  padding: const EdgeInsets.only(left: 25.0, right: 25.0),
                  child: GlobalTextField(
                      Icon(
                        Icons.lock,
                        color: Color.fromRGBO(198, 57, 93, 1),
                      ),
                      'Confirm Password',
                      password),
                ),
                SizedBox(
                  height: 70.0,
                ),
                GlobalButton('CONTINUE', () {
                  print('userName: ${username}');
                }, width * 0.7),
                SizedBox(
                  height: 50.0,
                ),
                Text(
                  'By creating an account you agree to our',
                  style: TextStyle(
                    fontSize: 18,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                Text(
                  'Terms of Service and Privacy Policy',
                  style: TextStyle(
                    fontSize: 18,
                    fontWeight: FontWeight.bold,
                    color: Color.fromRGBO(198, 57, 93, 1),
                  ),
                ),
                SizedBox(
                  height: 50.0,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Answer 1

如果您想 return 来自您的 TextField 的数据，那么您可以尝试下面的代码，这会对您有所帮助。

           GlobalButton('CONTINUE', () {
              print("Username${username.text.toString()}");
              print("Descriptiom${description.text.toString()}");
            }, width * 0.7),

Answer 2

感谢所有开发人员。这是因为我使用的是 const GlobalTextWidget 构造函数，我只是删除了 const 关键字，它现在工作正常。

Answer 3

请像下面这样创建一个 static（全局）函数，并在您的常规表单小部件中使用它。您将拥有 validator 函数，传递它，它就会起作用：

static Widget MyInputField(
      {String initialValue = "",
      Function(String) onSaved,
      String hint,
      bool hide = false,
      Icon prefixIcon,
      Widget suffixIcon,
      bool enabled = true,
      TextInputType textInputType = TextInputType.emailAddress,
      Function(bool) onSuffixIconClick,
      Function(String) validator}) {
    return SizedBox(
      child: TextFormField(
        initialValue: initialValue,
        obscureText: hide,
        onSaved: onSaved,
        enabled: enabled,
        decoration: new InputDecoration(
          prefixIcon: prefixIcon,
          suffixIcon: suffixIcon,
          fillColor: enabled ? MyColor.white : MyColor.disabledColor,
          filled: true,
          contentPadding:
              EdgeInsets.symmetric(vertical: 10.0, horizontal: 10.0),
          focusedBorder: OutlineInputBorder(
            borderSide: BorderSide(color: MyColor.accentColor, width: 1.0),
          ),
          errorBorder: OutlineInputBorder(
            borderSide: BorderSide(color: Colors.red, width: 1.0),
          ),
          enabledBorder: OutlineInputBorder(
            borderSide: BorderSide(color: MyColor.primaryColor, width: 1.0),
          ),
          disabledBorder: OutlineInputBorder(
            borderSide: BorderSide(color: Colors.green, width: 1.0),
          ),
          hintText: hint,
        ),
        validator: validator,
        keyboardType: textInputType,
        style:
            MyStyle.titleStyle(enabled ? MyColor.primaryColor : Colors.white),
      ),
    );
  }

如果一切顺利，请告诉我。祝你有个美好的一天。

在 flutter 中制作一个 TextFormField 全局小部件

Make a TextFormField global widget in flutter

flutter

dart

reusability

textformfield