How To Change Flutter Textformfield Background Color

Leave a Comment / Flutter Textformfield
flutter textformfield background color

How to change Flutter textformfield background color. In this post, I will be explaining how to change Flutter textformfield background color in our Flutter textformfield. Step by step explanation and a proper implementation through example code for Flutter textformfield background color customization in our Flutter textformfield.

What is Flutter Textformfield Background Color?

Flutter textformfield background color is as the names suggests, it is the background color of our Flutter textformfield. In this post, I will be explaining how to change it in Flutter textformfield.

Default Flutter Textformfield Background Color

To see the default Flutter textformfield background color in our Flutter textformfield. We have to set true the boolean constructor named filled of the input decoration class. Let’s implement it using code:

TextFormField(
            decoration: InputDecoration(
            filled: true
                     ),
                  )
default flutter textformfield background color
You can see in the above code that I have used the filled constructor which you have to make it true if your want to see the default Flutter textformfield background color in our Flutter textformfield or give it a custom color. In the image above, you can see that the default Flutter textformfield background color is light grey, the black underline you see is the underline border, changing its color or removing it is also explained in my previous articles.
Now let’s see how to change the Flutter textformfield background color in our Flutter textformfield.

Change Flutter Textformfield Background Color

Let’s see how to change Flutter textformfield background color in our Flutter textformfield. For that, you have to use the fill color constructor of the input decoration class and also as mentioned above, making the filled constructor set to true is necessary to see the default or custom Flutter textformfield background color in our Flutter textformfield.

 TextFormField(
             decoration: InputDecoration(
                  filled: true, 
                  fillColor: Colors.red.shade100
                   ),
                  )
flutter textformfield background color change
In the above code, you can see that I have used the fill color constructor and have given it a red color with a shade of 100. In the image above, you can see that the Flutter textformfield background color is now red which satisfies the reason you are reading this post. Now you know that you need to set the filled constructor to true and pass the color to the fill color constructor of the input decoration class to give custom Flutter textformfield background color to your Flutter textformfield.
Now as a treat, I have prepared a custom Flutter textformfield for you in which Flutter textformfield background is also implemented. I would love to see you use it in your own Flutter projects and also would love to have your feedback. The complete source code of that custom Flutter textformfield is given in the next section.

Custom Flutter Textformfield Source Code

flutter textformfield background color

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.purple),
                    cursorColor: Colors.purple,
                    decoration: InputDecoration(
                        border: InputBorder.none,
                        filled: true,
                        fillColor: Colors.purple.withOpacity(.08),
                        prefixIcon: Icon(
                          Icons.person,
                          color: Colors.purple,
                        ),
                        suffixIcon: Icon(
                          Icons.visibility,
                          color: Colors.purple,
                        ),
                        labelText: 'Enter your name',
                        labelStyle:
                            TextStyle(color: Colors.purple.withOpacity(.8)),
                        enabledBorder: OutlineInputBorder(
                            borderSide: BorderSide(
                                color: Colors.purple.withOpacity(.05)),
                            borderRadius: BorderRadius.circular(30).copyWith(
                                bottomRight: Radius.circular(0),
                                topLeft: Radius.circular(0))),
                        focusedBorder: OutlineInputBorder(
                            borderSide: BorderSide(
                                color: Colors.purple.withOpacity(.05)),
                            borderRadius: BorderRadius.circular(30).copyWith(
                                bottomRight: Radius.circular(0),
                                topLeft: Radius.circular(0)))),
                  )
                ],
              ))),
    ));
  }
}

Conclusion

In conclusion, hope you don’t have any queries left on how to change change Flutter textformfield background color in Flutter textformfield. I would love to see you in my other posts on Flutter app development, Flutter widgets, Flutter templates, Flutter animations and many more. That’s all for this blog post. Thank you for reading.

Leave a Comment

Your email address will not be published.