Mohammed Ammar Nainar
Mohammed Ammar Nainar

Reputation: 65

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.

Upvotes: 3

Views: 1027

Answers (2)

Ravinder Kumar
Ravinder Kumar

Reputation: 8010

Although @Drashan answer is Correct, In case someone needs to show 'Need help' only when it is focused, try this

         TextFormField(
            controller: messageController,
            decoration: InputDecoration(
              labelText: 'Message*',
                suffix: InkWell(onTap:(){},child: Text('Need Help?',style: 
                TextStyle(color: Colors.black,fontSize: 14),)),
            ),
            keyboardType: TextInputType.multiline,
          ),

Focused

enter image description here

Unfocused

enter image description here

Upvotes: 0

Darshan
Darshan

Reputation: 11679

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

Upvotes: 3

Related Questions