Flutter textformfield text color customization. In this article, I will be changing the Flutter textformfield text color with the help of an easy Flutter example code so you can have a better idea of how to customize it in your Flutter project. So let’s start customizing Flutter textformfield text color in Flutter textformfield.
What is Flutter Textformfield Text Color?
Flutter textformfield text color is the color of the input that the user provides to the Flutter textformfield. When the user input something in the Flutter textformfield, it is called the input. It can be number, text etc. Let’s see how we can change the color of that Flutter textformfield text.
Default Flutter Textformfield Text Color
To see the default Flutter textformfield text color, we have to define a simple Flutter textformfield. See the below code:
TextFormField()
Change Flutter Textformfield Text Color
Now to change the Flutter textformfield text color, we have to use the style constructor of the Flutter textformfield. Then pass it the text style class and by using the color constructor of the text style class, we can change the color of Flutter textformfield text. See the below code:
style: TextStyle(color: Colors.green)
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: TextFormField(
style: TextStyle(color: Colors.white),
decoration: InputDecoration(
border: InputBorder.none,
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(50)
.copyWith(bottomRight: Radius.circular(0)),
borderSide: BorderSide(color: Colors.purple)),
filled: true,
fillColor: Colors.purple.shade200,
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(50)
.copyWith(bottomRight: Radius.circular(0)),
borderSide: BorderSide(color: Colors.purple)),
),
))),
));
}
}Conclusion
In this post, we have discussed how to implement and customize Flutter textformfield text color with proper Flutter example code. I would love to have your feedback and encourage you to take a look at my other articles on Flutter app development, Flutter widgets, amazing Flutter templates, Flutter animations and more. That’s for this post. Thanks for reading.
