You can use this :
class FormField extends StatelessWidget {
final String label;
final bool withAsterisk;
const FormField({Key key, @required this.label, @required this.withAsterisk})
: super(key: key);
@override
Widget build(BuildContext context) {
return Stack(children: [
Container(
padding: EdgeInsets.fromLTRB(16, 16, 16, 0),
child: TextFormField(
decoration: InputDecoration(
border: OutlineInputBorder(),
focusedBorder: OutlineInputBorder(),
errorBorder: OutlineInputBorder(
borderSide: const BorderSide(color: Colors.red, width: 1),
)),
),
),
Padding(
padding: const EdgeInsets.only(left: 32, top: 10),
child: RichText(
text: TextSpan(
children: <TextSpan>[
TextSpan(
text: ' $label',
style: TextStyle(
backgroundColor:
Theme.of(context).scaffoldBackgroundColor,
color: DsColor.textColorDrkGrey,
fontWeight: FontWeight.w400,
fontSize: 12)),
TextSpan(
text: withAsterisk ? '* ' : ' ',
style: TextStyle(
fontWeight: FontWeight.w500,
fontSize: 12,
backgroundColor:
Theme.of(context).scaffoldBackgroundColor,
color: Colors.red)),
],
),
),
),
]);
}
}
<br>
Usage :
FormField(
label: "Name",
withAsterisk: true,
),
FormField(
label: "Phone",
withAsterisk: false,
)
You can use this :
class FormField extends StatelessWidget {
final String label;
final bool withAsterisk;
const FormField({Key key, @required this.label, @required this.withAsterisk})
: super(key: key);
@override
Widget build(BuildContext context) {
return Stack(children: [
Container(
padding: EdgeInsets.fromLTRB(16, 16, 16, 0),
child: TextFormField(
decoration: InputDecoration(
border: OutlineInputBorder(),
focusedBorder: OutlineInputBorder(),
errorBorder: OutlineInputBorder(
borderSide: const BorderSide(color: Colors.red, width: 1),
)),
),
),
Padding(
padding: const EdgeInsets.only(left: 32, top: 10),
child: RichText(
text: TextSpan(
children: <TextSpan>[
TextSpan(
text: ' $label',
style: TextStyle(
backgroundColor:
Theme.of(context).scaffoldBackgroundColor,
color: DsColor.textColorDrkGrey,
fontWeight: FontWeight.w400,
fontSize: 12)),
TextSpan(
text: withAsterisk ? '* ' : ' ',
style: TextStyle(
fontWeight: FontWeight.w500,
fontSize: 12,
backgroundColor:
Theme.of(context).scaffoldBackgroundColor,
color: Colors.red)),
],
),
),
),
]);
}
}
<br>
Usage :
FormField(
label: "Name",
withAsterisk: true,
),
FormField(
label: "Phone",
withAsterisk: false,
)
