Text through border in flutter - flutter

Question

I want to add the text through a container border in flutter.
I just want that Address to appear through a gap between the top border. It doesn't seem possible using a positioned widget, because then the border lines would appear through the "Address" text.
Is it at all possible?

Answer 1

Is this what you want?
class MainPage extends StatefulWidget {
#override
_MainPageState createState() => _MainPageState();
}
class _MainPageState extends State<MainPage> {
FocusNode focusNode = FocusNode();
bool isFocused = false;
#override
void initState() {
focusNode.addListener(_onFocusChange);
super.initState();
}
void _onFocusChange() {
setState(() => isFocused = !isFocused);
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
margin: const EdgeInsets.symmetric(horizontal: 500, vertical: 300),
child: Stack(
children: <Widget>[
Container(
padding: const EdgeInsets.only(top: 10),
child: TextFormField(
focusNode: focusNode,
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(30)),
),
),
),
Align(
alignment: Alignment.topCenter,
child: Container(
color: Colors.white,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: Text(
'Address',
style:
isFocused ? TextStyle(color: Colors.blue[800]) : null,
),
),
),
),
],
),
),
);
}
}
As far as I know there is no way to centerized labelText in InputDecoration.

Answer 2

Does it have to be the container border? If not, you can use the TextField with InputDecoration like this:
TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Label Text',
),
textAlign: TextAlign.center,
),
But Sadly the TextField dose not support the centered label text (textAlign: TextAlign.center, only centers the hint text). If you want to center the label text you have to change the TextField.dart.
This is TextField so it's not like a usual Text because it is editable. If you want it to be like a Text,set enabled: false and give a controller to it and set an initial value. Or you can use TextFormField so you don't have to use a controller. Like this:
TextFormField(
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Address',
),
textAlign: TextAlign.center,
enabled: true,
initialValue: 'Address Here',
),