CODEWITHSUNDEEP
androidiosflutterdarttextfield
user13860711
user13860711

Reputation:

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

Upvotes: 2

Views: 11655

Answers (3)

Quick learner
Quick learner

Reputation: 11457

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

Upvotes: 2

Madhavam Shahi
Madhavam Shahi

Reputation: 1192

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

Upvotes: 2

timilehinjegede
timilehinjegede

Reputation: 14043

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

Upvotes: 3

Related Questions