Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Text through border in flutter

Tags:

flutter

I want to add the text through a container border in flutter. enter image description here

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?

like image 315
rahulserver Avatar asked Jan 12 '20 09:01

rahulserver


People also ask

How do you border text in Flutter?

The example below shows you how to add a stroke (or border) to text in Flutter. Screenshot: The code: Scaffold( appBar: AppBar( title: const Text('KindaCode.com'), ), body: Center( child: Stack( children: [ // The text border Text( 'Hi There', style: TextStyle( fontSize: 70, letterSpacing: 5, fontWeight: FontWeight.

How do you change the outline input border in Flutter?

Step 1: Locate the file where you have placed the TextField widget. Step 2: Inside the TextField widget, add the decoration parameter and assign the InputDecoration widget. Step 3: Inside the InputDecoration widget, add the enabledBorder parameter and assign the OutlineInputBorder widget.

How do you make a custom border on Flutter?

To add border to image in Flutter, first, wrap the Image widget inside the Container widget. Inside the Container, add the decoration property and assign the BoxDecoration widget. Using the border property of BoxDecoration, you can provide the Border. all() widget to create border around the image.


2 Answers

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.

like image 59
Federick Jonathan Avatar answered Oct 09 '22 20:10

Federick Jonathan


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',
),
like image 3
Arash Mohammadi Avatar answered Oct 09 '22 19:10

Arash Mohammadi