How to replicate an OutlineInputBorder around a FlatButton in Flutter - dart

Question

I have a few fields taking info from a user. Some of which are TextFormFields, and others are buttons (FlatButton and PopupMenuButton). I would like to replicate the OutlineInputBorder hint style that is present around the TextFormFields to be displayed around my button fields. I've gotten pretty close:
empty fields
and with info inside the fields
filled fields
How can I make the help text of "Select Birthday" go inside the border like "First Name"? Here is the relevant code:
Padding(
padding: EdgeInsets.all(paddingStandard),
child: TextFormField(
textCapitalization: TextCapitalization.words,
decoration: InputDecoration(
contentPadding: EdgeInsets.all(0),
prefixIcon: Icon(Icons.person, color: colorMuted),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: colorPrimary)),
border: OutlineInputBorder(
borderSide: BorderSide(color: colorMuted)),
labelText: "First Name",
labelStyle: textMuted,
),
controller: nameController,
autofocus: false,
),
),
Padding(
padding: EdgeInsets.all(paddingStandard),
child: Container(
decoration: BoxDecoration(
border: Border.all(color: colorMuted),
borderRadius: BorderRadius.circular(5),
),
child: FlatButton(
padding: EdgeInsets.all(paddingStandard),
onPressed: () async {
var selectedDate = await _getBirthday();
selectedDate ??= birthday;
setState(() {
birthday = selectedDate;
});
},
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
children: <Widget>[
Padding(
padding: EdgeInsets.only(
right: paddingStandard * 2),
child: Icon(Icons.cake, color: colorMuted),
),
RichText(
textAlign: TextAlign.left,
text: TextSpan(
text: birthday == null
? "Select Birthday"
: DateFormat('dd-MMM-yyyy')
.format(birthday),
style: birthday == null
? textMuted
: textDark))
]),
Icon(
Icons.keyboard_arrow_down,
color: textColorMuted,
)
],
))),
)

Answer 1

You can wrap the birthday button with a stack and display some text on top of the border if birthday != null.
Here is a code demo, (replace it with the birthday button container):
Stack(
children: <Widget>[
Container(
decoration: BoxDecoration(
border: Border.all(color: colorMuted),
borderRadius: BorderRadius.circular(5),
),
child: FlatButton(
padding: EdgeInsets.all(paddingStandard),
onPressed: () async {
var selectedDate = await _getBirthday();
selectedDate ??= birthday;
setState(() {
birthday = selectedDate;
});
},
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(children: <Widget>[
Padding(
padding:
EdgeInsets.only(right: paddingStandard * 2),
child: Icon(Icons.cake, color: colorMuted),
),
RichText(
textAlign: TextAlign.left,
text: TextSpan(
text: birthday == null
? "Select Birthday"
: DateFormat('dd-MMM-yyyy')
.format(birthday),
style: birthday == null
? textMuted
: textDark))
]),
Icon(
Icons.keyboard_arrow_down,
color: textColorMuted,
)
],
))),
Align(
alignment: Alignment.topLeft,
child: Transform.translate(
offset: Offset(50, -12),
child: birthday != null
? Container(
padding: EdgeInsets.symmetric(horizontal: 3),
color: Theme.of(context).canvasColor,
child: Text("birthday"),
)
: Container(),
),
),
],
),