Flutter textfield initial value customization. In this article, we will be discussing an implementing Flutter textfield initial value in Flutter textfield. We will be going through step by step explanation of what it’s role is in Flutter textfield and how to implement and customize Flutter textfield initial value in Flutter textfield. So let’s get right into it.
What is Flutter Textfield Initial Value?
Flutter textfield initial value in the value that we want to give our Flutter textfield by default.
For instance, you have a description and you want to add few words to the same description but don’t want to write the description all over again just to add those few words using the Flutter textfield. So in this way, Flutter textfield initial value benefit the user, it can be used to put the current description in the Flutter textfield by default so the user only focus on adding the new words to the same description and not writing the whole description again in an empty Flutter textfield.
Don’t worry, I will be using proper Flutter example code to demonstrate how Flutter textfield initial value works. So let’s get right into implementing Flutter textfield initial value using Flutter code example.
Implementing Flutter Textfield Initial Value
Let’s now implement Flutter textfield initial value in our Flutter textfield. For that we have to use the controller constructor of the Flutter textfield. Let’s see the steps of how to do it:
Step 1
TextEditingController controllerValue = TextEditingController();
Step 2
void initState() {
controllerValue.text = 'This is the initial value';
super.initState();
}Step 3
TextField( controller: controllerValue )
Beautiful Flutter Textfield 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> {
TextEditingController controllerValue = TextEditingController();
@override
void initState() {
controllerValue.text = 'This is the initial value';
super.initState();
}
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Center(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 40),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextField(
controller: controllerValue,
style: TextStyle(color: Colors.white),
cursorColor: Colors.purple,
decoration: InputDecoration(
hintText: 'This is hint text',
hintStyle: TextStyle(color: Colors.white70),
prefixIcon: Icon(
Icons.person,
color: Colors.white70,
),
suffixIcon: Icon(
Icons.edit,
color: Colors.white70,
),
border: InputBorder.none,
filled: true,
fillColor: Colors.purple.withOpacity(.6),
contentPadding: EdgeInsets.all(26),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.transparent),
borderRadius: BorderRadius.circular(30).copyWith(
topRight: Radius.circular(0),
bottomLeft: Radius.circular(0))),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.transparent),
borderRadius: BorderRadius.circular(30).copyWith(
topRight: Radius.circular(0),
bottomLeft: Radius.circular(0)))),
)
],
))),
));
}
}Conclusion
In conclusion, now you have a complete practical understanding of how to set, customize Flutter textfield initial value and how you can give your Flutter textfield a default value. I would love to have your feedback on this post. I would also encourage you to visit my other articles on Flutter app development, Flutter widgets, Flutter animations, Flutter templates and many more, links to some of them are listed below. Thanks for reading this post.
