Text through border in flutter Text through border in flutter flutter flutter

Text through border in flutter


Is this what you want?

enter image description here

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.


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',),