Home > Blockchain >  Flutter - Customizing appeareance of input
Flutter - Customizing appeareance of input

Time:04-17

I'm trying to customize a TextFormField in Flutter. I would like to style this Widget to achieve this look:

enter image description here

I can get this style just when the field is focused with the following code:

TextFormField(
  decoration: InputDecoration(
  enabled: true,
  border: OutlineInputBorder(),
  labelText: 'Name:',
),

I wish that style above all time, even if the field is not focused.

I tried other alternatives, but I could get What I need. I tried this code:

Container(
  child: Text(
    "Name", style: TextStyle(
      fontSize: 18, 
      backgroundColor: Colors.amber, 
      height: 0.5)
    ),
),

    TextField(
      decoration: InputDecoration(
        enabledBorder: OutlineInputBorder(
          borderSide: BorderSide(width: 3, color: Colors.blue)
        ),
        focusedBorder: OutlineInputBorder(
          borderSide: BorderSide(width: 3, color: Colors.blue)
        )
      ),
    )

And I put it inside a Stack Widget. But the result was that: enter image description here

Is there any way to solve this?

CodePudding user response:

Just add floatingLabelBehavior: FloatingLabelBehavior.always to your decoration. Please accept if it solve your problem.

            TextFormField(
              decoration: InputDecoration(
                enabled: true,
                border: OutlineInputBorder(),
                labelText: 'Name:',
                floatingLabelBehavior: FloatingLabelBehavior.always,
              ),
            )

enter image description here

  • Related