Custom Label Text in TextFormField in Flutter
Last Updated :
10 Apr, 2023
Today we will explore how to make a custom label above the text field whose style will change according to your tap on the text field/text form field. So that user can easily understand which text field is currently active.
Example:
In this, there are two fields, the first is email and the second is password. Currently, you easily understand that the email field is active and I am writing in that field because it is highlighting. But what if the email field is not highlighted even when you are typing in it? You can do this easily using text field input decorations property like this but what if you want to make a custom label for the text field You can do these with a few steps.
1. Create Stateful Widgets
Dart
import 'package:flutter/material.dart';
class CustomLabel extends StatefulWidget {
const CustomLabel({
Key ? key
}): super(key: key);
@override
State < CustomLabel > createState() => _CustomLabelState();
}
class _CustomLabelState extends State < CustomLabel > {
@override
Widget build(BuildContext context) {
return const Scaffold();
}
}
2. Create a variable as of the Focus node, bool
Single Textfield
final FocusNode focusNode = FocusNode(); // focusnode for textfield
bool isFocus = false; // local variable
Multiple Fields
final FocusNode focusNode1 = FocusNode();
final FocusNode focusNode2 = FocusNode();
final FocusNode focusNode3 = FocusNode();
// Different focus nodes for different textfield
final Map<String, bool> _focusUnfocus = {
"focus_node_1": false,
"focus_node_2": false,
"focus_node_3": false,
};3. In the init state add Listener to the focus node and change the bool variable value depending upon whether the text field is tapped or not.
Single Text Field
@override
void initState() {
super.initState();
// Add listener to textfield to change variable value depending upon it has focus or not
focusNode.addListener(() {
if (focusNode.hasFocus) {
isFocus = true;
} else {
isFocus = false;
}
setState(() {});
});
}Multi TextField
// Add listener to textfield to change variable value in map depending upon it has focus or not
addListenerToNode(FocusNode focusNode, String key) {
focusNode.addListener(() {
if (focusNode.hasFocus) {
_focusUnfocus[key] = true;
} else {
_focusUnfocus[key] = false;
}
setState(() {});
});
}
@override
void initState() {
super.initState();
addListenerToNode(focusNode1, "focus_node_1");
addListenerToNode(focusNode2, "focus_node_2");
addListenerToNode(focusNode3, "focus_node_3");
}4. Made and label of your choice just add color in that label text style on a condition like this.
Single text field
Text(
"Single Text Field",
style: TextStyle(color: isFocus ? Colors.blue : Colors.grey),
), // Condition to change color depending upon textfield has focus or notMultiple text field
Dart
@override
Widget build(BuildContext context) {
return Scaffold(
body: Padding(
padding: const EdgeInsets.all(18.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
getLabel(
title: "Multiple Text Field 1",
key: "focus_node_1",
),
TextFormField(
focusNode: focusNode1,
),
getLabel(
title: "Multiple Text Field 2",
key: "focus_node_2",
),
TextFormField(
focusNode: focusNode2,
),
getLabel(
title: "Multiple Text Field 3",
key: "focus_node_3",
),
TextFormField(
focusNode: focusNode3,
),
],
),
),
);
}
Widget getLabel({required String title, required String key}) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 8.0),
child: Text(
title, style: TextStyle(
color: _focusUnfocus[key] ? ? false ? Colors.blue : Colors.grey
// Condition to change color depending upon textfield has focus or not in multitextfield
)),
);
}
5. Add that focus node to your text field
TextFormField(
focusNode: focusNode,
),
// Add focusnode in textformfield/textfieldSingle Textfield
Dart
import 'package:flutter/material.dart';
class CustomLabel extends StatefulWidget {
const CustomLabel({
Key ? key
}): super(key: key);
@override
State < CustomLabel > createState() => _CustomLabelState();
}
class _CustomLabelState extends State < CustomLabel > {
final FocusNode focusNode = FocusNode(); //focusnode for textfield
bool isFocus = false; //local variable
@override
void initState() {
super.initState();
// Add listener to textfield to change variable value depending upon it has focus or not
focusNode.addListener(() {
if (focusNode.hasFocus) {
isFocus = true;
} else {
isFocus = false;
}
setState(() {});
});
}
// Add listener to textfield to change variable value in map depending upon it has focus or not
@override
Widget build(BuildContext context) {
return Scaffold(
body: Padding(
padding: const EdgeInsets.all(18.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Single Text Field",
style: TextStyle(color: isFocus ? Colors.blue : Colors.grey),
),
TextFormField(
focusNode: focusNode,
),
],
),
),
);
} // Condition to change color depending upon textfield has focus or not in multitextfield
}
Multi TextField
Dart
import 'package:flutter/material.dart';
class CustomLabel extends StatefulWidget {
const CustomLabel({
Key ? key
}): super(key: key);
@override
State < CustomLabel > createState() => _CustomLabelState();
}
class _CustomLabelState extends State < CustomLabel > {
//local variable
final FocusNode focusNode1 = FocusNode();
final FocusNode focusNode2 = FocusNode();
final FocusNode focusNode3 = FocusNode();
final Map < String,
bool > _focusUnfocus = {
"focus_node_1": false,
"focus_node_2": false,
"focus_node_3": false,
};
@override
void initState() {
super.initState();
// Add listener to textfield to change variable value depending upon it has focus or not
addListenerToNode(focusNode1, "focus_node_1");
addListenerToNode(focusNode2, "focus_node_2");
addListenerToNode(focusNode3, "focus_node_3");
}
// Add listener to textfield to change variable value in map depending upon it has focus or not
addListenerToNode(FocusNode focusnode, String key) {
focusnode.addListener(() {
if (focusnode.hasFocus) {
_focusUnfocus[key] = true;
} else {
_focusUnfocus[key] = false;
}
setState(() {});
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Padding(
padding: const EdgeInsets.all(18.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
getLabel(
title: "Multiple Text Field 1",
key: "focus_node_1",
),
TextFormField(
focusNode: focusNode1,
),
getLabel(
title: "Multiple Text Field 2",
key: "focus_node_2",
),
TextFormField(
focusNode: focusNode2,
),
getLabel(
title: "Multiple Text Field 3",
key: "focus_node_3",
),
TextFormField(
focusNode: focusNode3,
),
],
),
),
);
}
Widget getLabel({
required String title,
required String key
}) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 8.0),
child: Text(title,
style: TextStyle(
color: _focusUnfocus[key] ? ? false ? Colors.blue : Colors.grey)),
);
} // Condition to change color depending upon textfield has focus or not in multitextfield
}
Similar Reads
Multiline TextField in Flutter
Multiline TextField is the input TextField which takes the input in more than one line, This type of TextField is used in the scenario like taking Feedback from the user, User Comments, and Description, etc., We can achieve multiline TextField by setting the property keyBoardType and maxLines of the
2 min read
Retrieve Data From TextFields in Flutter
In this article, we'll learn how to retrieve data from TextFields. TextField() widget is the most common widget used in flutter apps to take user input. We'll talk about two major methods used to extract text from TextField.Using VariablesThe TextField widget has various callback properties through
4 min read
Flutter - Prefix and Suffix Icon in TextField
In this article, we will implement how to add prefix and Suffix icons in the TextField. A sample image is given below to get an idea about what we are going to do in this article. Â Step by Step Implementation Step 1: Create a New Project in Android Studio To set up Flutter Development on Android Stu
2 min read
Flutter - Disable Cut, Copy, Paste and Select All Options in TextFormField
Every app uses TextFields in one place or another in their apps. In this article, we will see how to disable the native cut, copy, paste, and select all options when the user long-presses on the text.ApproachFor the TextFormField widget in Flutter, the enableInteractiveSelection property states whet
2 min read
Custom Paint Widget in Flutter
Flutter gives developers the full freedom to use every pixel on the screen and draw custom shapes. This has been one of the key selling points of Flutter. To achieve this, we use the CustomPainter class. In this article, we'll try to create the GeeksforGeeks Logo using Flutter's CustomPaint widget.
5 min read
Flutter - Show/Hide Password in TextField
In this article, we will Implement how to show/hide the password in the Textfield. A sample video is given below to get an idea about what we are going to do in this article. Step by Step Implementation Step 1: Create a New Project in Android Studio To set up Flutter Development on Android Studio pl
3 min read
Flutter - Gradient TextFields
Decorating text fields can be a big task if you have a large application. There is a package gradient_textfield that could make this time-consuming task pretty simple and fast. Although in Flutter we can create text fields using TextField, for beginners especially, it takes time to understand decora
3 min read
Flutter - Restrict TextField to Input Special Characters
In Flutter, user input validation is essential for maintaining data integrity and ensuring a smooth user experience. One common requirement is to restrict the input of special characters in a TextField to prevent unwanted characters in certain fields, such as usernames or any other text-based input.
3 min read
Flutter - Auto size text
An adaptive UI is an integral part of any application. As applications nowadays have to function on a wide range of devices ranging from tablets, PCs, and mobile with varying screen sizes. This is where the application needs to adjust itself according to the size of the screen irrespective of the si
3 min read
Autofill Hints Suggestion List in Flutter
You must have noticed that the majority of websites and mobile applications provide an autofill list. These features can now be added to your Flutter app without importing any packages. Just read the article for this amazing property in the text form field/text field. Example: We need to display sev
2 min read