Text through border in flutter
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.
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',),