In this article, I will be discussing Flutter textfield onChanged in detail, why it is used in Flutter textfield and how to use it. I will be implementing it step by step with proper example so you have a complete understanding of what Flutter textfield onChanged is and how to use it in Flutter textfield. Now let’s leave the boring part and start implementing Flutter textfield onChanged in Flutter app.
Outline
- What is Flutter Textfield OnChanged?
- Implementing Flutter Textfield OnChanged
- Beautiful Flutter Textfield Source Code
- Conclusion
What is Flutter Textfield OnChanged?
Flutter textfield onChanged is called whenever the user input or delete the input from the Flutter textfield. It is called for each input made to the Flutter textfield. It can be used to store the input in a variable. Don’t worry I will implement it using a proper example so you can understand everything about Flutter textfield onChanged.
Implementing Flutter Textfield OnChanged
To implement Flutter textfield onChanged, you have to use the onChanged constructor of the Flutter textfield. It takes a function with a string parameter, by using that string we can take the input value and store it in some variable.
TextField(
onChanged: (value) {},
)Step 1
String inputValue = '';
Step 2
onChanged: (value) {
setState(() {
inputValue = value;
});
},Step 3
Text(
inputValue,
style: TextStyle(fontSize: 18, fontWeight: FontWeight.w600),
)
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> {
String inputValue = '';
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Center(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 40),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
inputValue,
style: TextStyle(
fontSize: 18,
color: Colors.pink,
fontWeight: FontWeight.w600),
),
SizedBox(
height: 10,
),
TextField(
onChanged: (value) {
setState(() {
inputValue = value;
});
},
style: TextStyle(color: Colors.pink),
cursorColor: Colors.pink,
decoration: InputDecoration(
filled: true,
fillColor: Colors.pink.withOpacity(.08),
prefixIcon: Icon(
Icons.email,
color: Colors.pink,
),
suffixIcon: Icon(
Icons.visibility,
color: Colors.pink,
),
labelText: 'Enter your email',
labelStyle:
TextStyle(color: Colors.pink.withOpacity(.8)),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.pink),
borderRadius: BorderRadius.circular(30).copyWith(
bottomRight: Radius.circular(0),
topLeft: Radius.circular(0))),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.pink),
borderRadius: BorderRadius.circular(30).copyWith(
bottomRight: Radius.circular(0),
topLeft: Radius.circular(0)))),
)
],
))),
));
}
}Conclusion
In conclusion, you have learned how to implement Flutter textfield onChanged in Flutter app. I would love to receive your valuable feedback and also I would love to see you at my other articles on amazing Flutter widgets, beautiful Flutter templates, and amazing Flutter animations. That’s it for this article. Thanks for reading.
