Flutter: Showing both helpText and labelText in TextFormField - flutter

Question

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: 'example#email.com',
labelText: 'Username',
labelStyle: TextStyle(
color: Colors.blue,
),
),
);
How it looks initially:
How it looks after I click on it:

Answer 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: 'example#email.com',
labelText: 'Username',
labelStyle: TextStyle(
color: Colors.blue,
),
),
);

Answer 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: 'example#email.com',
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,
),
],
),
)
);
}
}

Answer 3

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