Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Inline flatbutton within textform field

enter image description here

Trying to add a flatbutton within textform field, below is code for current field implementation,

TextFormField(
                      textAlign: TextAlign.left,
                      obscureText: true,
                      cursorColor: Colors.white,
                      onChanged: (value) {
                        //Do something with the user input.
                        password = value;
                      },
                      style: TextStyle(color: Colors.white),
                      decoration: InputDecoration(
                        icon: Icon(Icons.help, color: Colors.white, ),
//                        contentPadding: EdgeInsets.fromLTRB(20, 20, 20, 20),
                        labelText: 'Enter your password',
                        labelStyle: TextStyle(color: Colors.white),
                        focusedBorder: UnderlineInputBorder(
                            borderSide: BorderSide(color: Colors.white)),
                        enabledBorder: UnderlineInputBorder(
                            borderSide: BorderSide(color: Colors.white)),
                      ),
                    ),

Can someone assist on adding this as per the above screenshot.

like image 982
Mohammed Ammar Nainar Avatar asked Jun 16 '26 04:06

Mohammed Ammar Nainar


1 Answers

Just add suffixIcon property inside InputDecoration implementation and pass FlatButton widget to it. Sample code below:

decoration: InputDecoration(
                  icon: Icon(Icons.help, color: Colors.black, ),
//                        contentPadding: EdgeInsets.fromLTRB(20, 20, 20, 20),
                  labelText: 'Enter your password',
                  labelStyle: TextStyle(color: Colors.black),
                  focusedBorder: UnderlineInputBorder(
                      borderSide: BorderSide(color: Colors.black)),
                  enabledBorder: UnderlineInputBorder(
                      borderSide: BorderSide(color: Colors.black)),
                    suffixIcon: FlatButton(
                      child: Text('Need Help?'),
                      onPressed: () {},
                    )
                ),

enter image description here

like image 81
Darshan Avatar answered Jun 18 '26 22:06

Darshan