Decorate TextFormField to have some Text in the border-CodePudding

I'm trying to get this result, tried to extend the InputBorder and overriden the paint method to obtain what I want, but really struggling to get it working

Example

CodePudding user response：

You can get the same result bt wrapping the label text

TextFormField(
  decoration: InputDecoration(
    label: const Center(
      child: Text(" Label Text"),
    ),
  ),
)

Or you can also use

floatingLabelAlignment: FloatingLabelAlignment.center,

CodePudding user response：

If the Address text is a label, using FloatingLabelAlignment.center should work

             TextFormField(
                decoration: const InputDecoration(
                  label: Text(" Label Text"),
                  floatingLabelAlignment: FloatingLabelAlignment.center,
                  border: OutlineInputBorder(),
                ),
              ),

But, if that is the actual UI and need that every time, you could use a stack of Input field and the text.

Below is the example.

              Stack(
                children: [
                  Container(
                    margin: const EdgeInsets.only(top: 10),
                    decoration: BoxDecoration(
                      border: Border.all(),
                      borderRadius: BorderRadius.circular(50),
                    ),
                    child: TextFormField(
                      decoration: const InputDecoration(
                        border: InputBorder.none,
                      ),
                    ),
                  ),
                  Align(
                    alignment: Alignment.topCenter,
                    child: Container(
                      color: Colors.white,
                      child: const Text("Some Text"),
                    ),
                  ),
                ],
              ),

Output: