Make a TextFormField global widget in flutter

Viewed 1981

I am making a global TextFormField widget for the App. But it is not returning data in the controller. My Global text form field Widget: Kindly tell me what I am doing wrong. I am initializing the controller in the SignUp person widget. I also want to validate the text form field in the validator.

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

I used it like

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

3 Answers

Please create a static (Global) function like below, and just use it in your regular form widget. You will have the validator function, pass it and it will work:

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

Please let me know if things go well. Have a good day.

thanks to all the developers. This is because I am using the const GlobalTextWidget constructor, I just remove the const keyword and it is now working fine.

If you want to return data from your TextField then you can try the below code this will help for you.

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