Creating a custom text box-CodePudding

I'm required to create a custom flutter text box which shows the hint text and the label of the text box as below when not focused

How can I achieve this?

CodePudding user response：

you can use floatingLabelBehavior: FloatingLabelBehavior.always in input decoratin

TextField(
    decoration: InputDecoration(
        labelText: "your lable",
        labelStyle: TextStyle(fontSize: 20.0, height: 0.8),
      hintText: 'this is hint',
      floatingLabelBehavior: FloatingLabelBehavior.always // <-- use this
     ),
  )

CodePudding user response：

You can find here documentation: https://docs.flutter.dev/cookbook/forms/text-input

    return Scaffold(
      appBar: AppBar(
        title: Text('Example of Texfield'),
      ),
      body: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 16),
        child: TextFormField(
          decoration: const InputDecoration(
            border: UnderlineInputBorder(),
            labelText: 'Enter something',
            hintText: 'Enter a search term',
          ),
        ),
      ),
    );

You can also wrap the TextField in a Container or a Sized Box, and customize all you need inside.