Flutter reusable text field and and it's style - flutter

Question

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

Answer 1

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

Answer 2

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");

Answer 3

Declare common textfield widget like this
class CsCommonTextFieldWidget extends StatefulWidget {
const CsCommonTextFieldWidget(
{this.titleText = '',
this.titleTextAlign = TextAlign.center,
required this.isPassword,
required this.hintText,
required this.textController});
final String titleText;
final TextAlign titleTextAlign;
final bool isPassword;
final String hintText;
final TextEditingController textController;
#override
_CsCommonTextFieldWidgetState createState() =>
_CsCommonTextFieldWidgetState();
}
class _CsCommonTextFieldWidgetState extends State<CsCommonTextFieldWidget> {
#override
Widget build(BuildContext context) {
return TextField(
obscureText: widget.isPassword,
decoration: InputDecoration(
contentPadding: EdgeInsets.all(10.0),
hintText: widget.hintText, // pass the hint text parameter here
hintStyle: TextStyle(color: Colors.black26),
),
style: TextStyle(color: Colors.black),
);
}
}
Usage
Container(
width: double.infinity,
margin: const EdgeInsets.fromLTRB(0, CsDimens.SPACE40, 0, 0),
child: CsCommonTextFieldWidget(
isPassword: false,
hintText: Languages.of(context)!.labelEmail,
textController: emailController,
),
),