在 flutter 中創建一個 TextFormField 全局小部件

Question

我正在為應用程序制作一個全局 TextFormField 小部件。 但它沒有返回 controller 中的數據。 我的全局文本表單字段小部件：請告訴我我做錯了什么。 我正在注冊人員小部件中初始化 controller。 我還想驗證驗證器中的文本表單字段。

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

請創建一個static (Global) function 如下所示，然后在常規表單小部件中使用它。 您將擁有validator function，通過它，它將起作用：

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),
      ),
    );
  }

如果事情 go 好，請告訴我。 祝你有美好的一天。

Answer 2

如果您想從 TextField 返回數據，那么您可以嘗試下面的代碼，這將對您有所幫助。

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

Answer 3

感謝所有的開發者。 這是因為我使用的是 const GlobalTextWidget 構造函數，我只是刪除了 const 關鍵字，它現在工作正常。