【问题标题】:Make a TextFormField global widget in flutter在颤动中制作一个 TextFormField 全局小部件
【发布时间】:2021-04-03 23:27:15
【问题描述】:

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

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

【问题讨论】:

    标签: flutter dart reusability textformfield


    【解决方案1】:

    如果您想从 TextField 返回数据,那么您可以尝试以下代码,这将对您有所帮助。

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

    【讨论】:

      【解决方案2】:

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

      【讨论】:

      • 当您自己找到答案时,删除问题或将您自己的答案标记为正确的答案
      • @dm_tr 我会将我的答案标记为正确答案。因为堆栈说你可以在 2 天内接受你自己的答案。所以,我想我必须等待。
      【解决方案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),
            ),
          );
        }
      

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

      【讨论】:

        猜你喜欢
        • 2019-07-18
        • 2020-06-02
        • 2019-12-20
        • 2021-07-12
        • 1970-01-01
        • 2020-10-11
        • 1970-01-01
        • 2019-09-08
        • 2019-10-27
        相关资源
        最近更新 更多