Reputation: 41
Don't worry about the icon, but the important is the label inside outline border when the TextFormField is focused.
I didn't want it like that:
Upvotes: 0
Views: 340
Reputation: 121
You can use like this:
Form(
key: _formKey,
child: ListView(
//physics: const NeverScrollableScrollPhysics(),
children: <Widget>[
Center(
child: Text(
'Token',
style: TextStyle(fontSize: 36, fontWeight: FontWeight.w300),
),
),
Container(
height: 40,
),
TextFormField(
style: textStyle,
controller: authControllername,
// ignore: missing_return
validator: (String value) {
if (value.isEmpty) {
return 'Please enter name';
}
},
decoration: InputDecoration(
labelText: 'Name',
hintText: 'Enter name',
labelStyle: textStyle,
errorStyle: TextStyle(color: Colors.red, fontSize: 14.0),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(5.0))),
),
Container(
height: 20,
),
TextFormField(
style: textStyle,
controller: authController,
validator: (String value) {
if (value.isEmpty) {
return 'Please enter OAuth token';
}
},
decoration: InputDecoration(
labelText: 'OAuth token',
hintText: 'Enter OAuth token',
labelStyle: textStyle,
errorStyle: TextStyle(color: Colors.red, fontSize: 14.0),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(5.0))),
),
],
),
),
Upvotes: 0
Reputation: 1658
If I understood your question, you want something like this:
In that case you achieve this by using Container with decoration and a Column that has Text and of course TextFromField, like so:
Container(
padding: EdgeInsets.all(8),
decoration: new BoxDecoration(
border: new Border.all(
color: Colors.black,
width: 1.0,
style: BorderStyle.solid
),
borderRadius: BorderRadius.circular(8.0),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text("Label", style: TextStyle(color: Colors.black54),),
TextFormField(
decoration: const InputDecoration(
suffixIcon: Icon(Icons.remove_red_eye),
hintText: "Input text",
// if you want to remove bottom border that changes color when field gains focus
// then uncomment the line bellow
// border: InputBorder.none,
)
)
]
)
)
Not the shortest solution... but it gets the job done.
Upvotes: 2