Question 232270 in Flutter Question posted in
The official Flutter documentation can be found here.

How can I Create 'TextField' where Label is inside TextFields's border in Flutter

I am looking for a way to modify TextField Widget in Flutter in a way that it’s label is displayed in it’s border. Is there any property that ‘TextField’ have to achieve this? or any other way that I could implement it.

I want to achieve something like this.
Customized TextField

Tags:

3

Answers


  1. 0

    Use the property labelText in TextFormField:

    for example:

               TextFormField(
              maxLines: null,
              keyboardType: TextInputType.text,
              textCapitalization: TextCapitalization.sentences,
              decoration: InputDecoration(
                isDense: true,
                labelText: 'Label',
                labelStyle: const TextStyle(
                    color: Colors.purple,
                    fontSize: 16.0,
                    fontWeight: FontWeight.w800),
                hintText: 'Input Text',
                hintStyle: const TextStyle(
                    color: Colors.grey,
                    fontSize: 12.0,
                    fontWeight: FontWeight.w500),
                suffixIcon: IconButton(
                  onPressed: () {},
                  icon: const Icon(Icons.edit),
                ),
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(8.0),
                ),
                contentPadding: const EdgeInsets.only(left: 16.0, top: 26.0),
              ),
              style: const TextStyle(
                  color: Colors.black,
                  fontSize: 16.0,
                  fontWeight: FontWeight.w800),
            ),

    enter image description here

    Also another way to implement it is to have a Column of title text and textfield inside a container with borders. For example:

      Container(
      margin: const EdgeInsets.all(10.0),
      padding: const EdgeInsets.all(10.0),
      decoration: BoxDecoration(
        border: Border.all(
          color: const Color(0xFF5801E4),
          width: 5.0,
        ),
        color: Colors.white,
      ),
      child: Column(
          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const Text('Label',
                style: TextStyle(
                  color: Colors.purple,
                  fontSize: 16.0,
                  fontWeight: FontWeight.w800,
                )),
            TextFormField(
              maxLines: null,
              keyboardType: TextInputType.text,
              textCapitalization: TextCapitalization.sentences,
              decoration: InputDecoration(
                isDense: true,
                labelStyle: const TextStyle(
                    color: Colors.purple,
                    fontSize: 16.0,
                    fontWeight: FontWeight.w800),
                hintText: 'Input Text',
                hintStyle: const TextStyle(
                    color: Colors.grey,
                    fontSize: 12.0,
                    fontWeight: FontWeight.w500),
                suffixIcon: IconButton(
                  onPressed: () {},
                  icon: const Icon(Icons.edit),
                ),
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(8.0),
                ),
                contentPadding: const EdgeInsets.only(left: 16.0, top: 26.0),
              ),
              style: const TextStyle(
                  color: Colors.black,
                  fontSize: 16.0,
                  fontWeight: FontWeight.w800),
            ),
          ]),
    );

    enter image description here

    Login or Signup to reply.
  2. 0 
    TextField(
            decoration: InputDecoration(
              border: OutlineInputBorder(),
              hintText: 'Input text',
              labelText: 'Label',
            ),
          ),

    The output of this code is as follows:

    enter image description here

    Login or Signup to reply.
  3. 0 
    TextField(
  decoration: InputDecoration(
  hintText: 'Enter your name',
  label: Text('Name'),
  border: OutlineInputBorder(),
  ),
),

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search