CODEWITHSUNDEEP
flutterdartinput
3squad
3squad

Reputation: 385

Flutter input text field with custom label position

I would like to create below input in Flutter

enter image description here

TextFormField(
      decoration: InputDecoration(
        labelText: "Label",
        border: OutlineInputBorder(
          borderRadius: BorderRadius.all(
            Radius.circular(getPt(4)),
          ),
        ),
      ),
    );

But when using default behaviour Label goes to the top of border. Setting height for label breaks the whole input, so input text goes down, so this not helping.

I think I can put this to stack and position Label on my required position, but it want be part of input anymore, and will require watch value change on all fields, but maybe there is some other option?

Upvotes: 3

Views: 9616

Answers (4)

Hamid Waezi
Hamid Waezi

Reputation: 897

It seems a little bit late, I refactor TextFiledFrom for my issue and it will solve this problem in advanced. it just config like origin TextFiledForm with the same properties. you can find it in this link TextFiledForm_BoxedLabelInside

enter image description here

Upvotes: 0

杨情妍
杨情妍

Reputation: 11

After adapting the previous solution, I couldn't adjust the position of label as I wanted, so I tried this now I can customize the position:

Container(
  height: 65, // can customize height 
  alignment: Alignment.center, 
  padding: const EdgeInsets.symmetric(horizontal:18),
  decoration: BoxDecoration(
  borderRadius: BorderRadius.circular(10),
  color: Colors.grey[100],
),
child: TextFormField(
  decoration: InputDecoration(
  labelText: 'Email',
  labelStyle: TextStyle(
    color: Colors.grey[700],
    fontSize: 16.0,
    letterSpacing: 0,
  ),
  border: InputBorder.none,
  contentPadding: const EdgeInsets.only(bottom: 3.0, top:-2.0), // this can adjust the label and text position
  filled: true,
  fillColor: Colors.grey[100], //or transparent
),
  textAlignVertical: TextAlignVertical.bottom, 
),
),

Upvotes: 1

osewe
osewe

Reputation: 1

This is just an addition to the answer provided by @miftakhul-arzak

    Container(
        padding: EdgeInsets.symmetric(horizontal: 8),
        decoration: BoxDecoration(
          border: Border.all(color: Colors.grey),
          borderRadius: BorderRadius.all(
            Radius.circular(10),
          ),
        ),
        child: TextFormField(
          decoration:
              InputDecoration(
                 labelText: "Label", 
                 border: InputBorder.none,
                 border: InputBorder.none,
                 focusedBorder: InputBorder.none,
                 enabledBorder: InputBorder.none,
                 errorBorder: InputBorder.none,
                 disabledBorder: InputBorder.none,
                 focusedErrorBorder: InputBorder.none,
         ),
     ),
);

Upvotes: 0

Miftakhul Arzak
Miftakhul Arzak

Reputation: 1857

You can wrap it using Container,

Container(
    padding: EdgeInsets.symmetric(horizontal: 8),
    decoration: BoxDecoration(
      border: Border.all(color: Colors.grey),
      borderRadius: BorderRadius.all(
        Radius.circular(10),
      ),
    ),
    child: TextFormField(
      decoration:
          InputDecoration(labelText: "Label", border: InputBorder.none),
    ),
  );

enter image description here

Upvotes: 5

Related Questions