'Flutter: Showing both helpText and labelText in TextFormField

I am trying to build a login page using Flutter.

I want to have both hintText and labelText shown for the TextFormField that I'm using, however it only shows me the labelText when I click on the field, that is, when the cursor is in that field.

  TextFormField(
    keyboardType: TextInputType.emailAddress,
    decoration: const InputDecoration(
    hintText: '[email protected]',
    labelText: 'Username',
    labelStyle: TextStyle(
      color: Colors.blue,
      ),
    ),
  );

How it looks initially:

How it looks after I click on it:

flutter

Solution 1:^[1]

You set autofocus: true to to make it focused immediately after the page has been rendered.

  TextFormField(
    autofocus: true,
    keyboardType: TextInputType.emailAddress,
    decoration: const InputDecoration(
    hintText: '[email protected]',
    labelText: 'Username',
    labelStyle: TextStyle(
      color: Colors.blue,
      ),
    ),
  );

Solution 2:^[2]

There is no default properties for it but you can try with this.

    return Scaffold(
        body: Center(
            child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                CustomTextFormField(
                    labelText: 'EMAIL',
                    hintText: '[email protected]',
                    keyboardType: TextInputType.emailAddress,
                    validator: (t) {},
                ),
                SizedBox(height: 8),

                CustomTextFormField(
                    labelText: 'PASSWORD',
                    hintText: 'Enter password',
                    keyboardType: TextInputType.emailAddress,
                    validator: (t) {},
                ),
                SizedBox(height: 8),

                CustomTextFormField(
                    labelText: 'NAME',
                    hintText: 'Enter name',
                    keyboardType: TextInputType.emailAddress,
                    validator: (t) {},
                )
                ],
            ),
            )));

Created on CustomTextFormField class

        import 'package:flutter/material.dart';

        class CustomTextFormField extends StatelessWidget {

            final TextEditingController controller;
            final String hintText;
            final String labelText;
            final TextInputType keyboardType;
            final Function(String) validator;
            final bool obscureText;

            CustomTextFormField({
            this.controller,
            this.hintText,
            this.labelText,
            this.keyboardType, 
            this.validator,     
            this.obscureText: false
            });

        @override
        Widget build(BuildContext context) {

            final theme = Theme.of(context);

            return Theme(
            data: theme.copyWith(
                primaryColor: theme.accentColor, 
                hintColor: Colors.grey[500], 
                errorColor: Colors.redAccent,
            ),
            child: Container(
                width: double.infinity,
                child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                    Text(
                    labelText, 
                    textAlign: TextAlign.start, 
                    style: TextStyle(
                        color: theme.primaryColor, 
                        fontWeight: FontWeight.bold, 
                        fontSize: 15
                    )
                    ),
                    TextFormField(
                    cursorColor: Colors.grey[850],
                    style: TextStyle(color: Colors.grey[850]),
                    controller: controller,
                    decoration: InputDecoration(
                        hintText: hintText,
                        enabledBorder: UnderlineInputBorder(borderSide: BorderSide(color: theme.primaryColor)),
                        focusedBorder: UnderlineInputBorder(borderSide: BorderSide(color: theme.primaryColor)),
                        disabledBorder: UnderlineInputBorder(borderSide: BorderSide(color: theme.primaryColor))
                    ),
                    keyboardType: keyboardType,
                    obscureText: obscureText,
                    validator: validator,
                    ),            
                ],
                ),
            )
            );
        }
        }

Solution 3:^[3]

Add floatingLabelBehavior: FloatingLabelBehavior.always to InputDecoration enter image description here

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Akora Ing. DKB
Solution 2	Amit Prajapati
Solution 3	Lê Minh M?

'Flutter: Showing both helpText and labelText in TextFormField

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]