In this post, we will practically understand how to implement and change Flutter textformfield label text using an easy and proper Flutter example. We will understand everything about Flutter textformfield label text, what it is, its role and usage in Flutter textformfield.
What is Flutter Textformfield Label Text?
Flutter textformfield label text is used as a hint for the user about the type of input that user should be inputting in that Flutter textformfield. It is shown at the same position when the inputted text will be shown, only if the Flutter textformfield is empty and unfocused and as soon as the user starts inputting then this Flutter textformfield label text move to the top left position of the Flutter textformfield.
Let’s now understand the implementation of Flutter textformfield label text using a proper Flutter example.
Implementing Flutter Textformfield Label Text
To implement Flutter textformfield label text, we have to first implement a simple Flutter textformfield widget and then use its decoration constructor. After that, we have to pass input decoration class to that decoration constructor. Now using the label text constructor of the input decoration class. we can give Flutter textformfield label text as a string. The reason is that the label text constructor takes only string. See the below code:
TextFormField( decoration: InputDecoration( labelText: 'This is label text', ), )
Custom Flutter Textformfield Design Source Code
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Homepage(),
);
}
}
class Homepage extends StatefulWidget {
@override
State<Homepage> createState() => _HomepageState();
}
class _HomepageState extends State<Homepage> {
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Center(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 40),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextFormField(
style: TextStyle(color: Colors.blue),
cursorColor: Colors.blue,
decoration: InputDecoration(
border: InputBorder.none,
filled: true,
fillColor: Colors.blue.withOpacity(.08),
prefixIcon: Icon(
Icons.person,
color: Colors.blue,
),
suffixIcon: Icon(
Icons.visibility,
color: Colors.blue,
),
labelText: 'The is the label text',
labelStyle:
TextStyle(color: Colors.blue.withOpacity(.8)),
enabledBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.blue.withOpacity(.05)),
borderRadius: BorderRadius.circular(30).copyWith(
bottomRight: Radius.circular(0),
topLeft: Radius.circular(0))),
focusedBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.blue.withOpacity(.05)),
borderRadius: BorderRadius.circular(30).copyWith(
bottomRight: Radius.circular(0),
topLeft: Radius.circular(0)))),
)
],
))),
));
}
}Conclusion
Now that you know how to use and change Flutter textformfield label text in Flutter textformfield, hope it will now be easy for you to implement Flutter textformfield label text in your Flutter projects. I would love to see you check out our other posts as well. These posts are related to Flutter app development, Flutter animations explained in detail, Flutter widgets, amazing Flutter templates, and many more. Thank you for reading this post.
