androidiosflutterdarttextfield

How to create a common Textfield widget for a reusable text field and and it's style?


I have started learning Flutter recently and wanted to know how to write code that displays multiple text field of same sized box, text style, decoration. I have written code where i use Text Field for every new input is required instead want to code a dummy and call it where i want the text field and change the hint text. Let say i want to use these structure in all my text field, but don't want to write the whole code once again with different hintText

                          SizedBox(height: 20),
                          Container(
                            //Type TextField
                            width: width * 0.8,
                            height: height * 0.053,
                            color: fcolor,
                            child: TextField(
                              decoration: InputDecoration(
                                contentPadding: EdgeInsets.all(10.0),
                                enabledBorder: UnderlineInputBorder(
                                  borderSide: BorderSide(color: Colors.white),
                                ),
                                hintText: 'Type',
                                hintStyle: TextStyle(color: tcolor),
                              ),
                              style: TextStyle(color: icolor),
                            ),
                          ),

Solution

  • You can create a Widget and pass the hintText and other properties you would like to(as parameters) like below:

    Widget _buildTextField({String hintText, // add other properties here}) { // new 
      return Container(
        //Type TextField
        width: width * 0.8,
        height: height * 0.053,
        color: fcolor,
        child: TextField(
          decoration: InputDecoration(
            contentPadding: EdgeInsets.all(10.0),
            enabledBorder: UnderlineInputBorder(
              borderSide: BorderSide(color: Colors.white),
            ),
            hintText: hintText, // pass the hint text parameter here
            hintStyle: TextStyle(color: tcolor),
          ),
          style: TextStyle(color: icolor),
        ),
      );
    }
    
    

    Then use the _buildTextField method in your StatelessWidget or StatefulWidget like below:

    class StackOver extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
              body: Column(
            children: [
              _buildTextField(hintText: 'First Name'),
              SizedBox(height: 20,),
              _buildTextField(hintText: 'Last Name'),
            ],
          ),
        );
      }
    }