Custom Label Text in TextFormField in Flutter
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 not
Multiple 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/textfield
Single 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 } |
Contact Us