Reputation: 65
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
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
Unfocused
Upvotes: 0
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: () {},
)
),
Upvotes: 3