Flutter reusable text field and and it's style

0
votes

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),
                            ),
                          ),
2
flutterdart

2 Answers

2
votes

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

Do it like this,

Create a function which returns a widget (..textfield)

 Widget getTextField(String hintText){

                          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,
                                hintStyle: TextStyle(color: tcolor),
                              ),
                              style: TextStyle(color: icolor),
                            );

Now, wherever you need textfield, call this method and pass your hintText, Example,

getTextField("this is hint text");