How To Easily Change Flutter Container Color

In this Flutter post, we will be practically understanding how to change Flutter container color. A detailed and step by step explanation of the customization of Flutter container color will be provided so you can easily change Flutter container color in your own Flutter app projects with ease.

So why are we waiting for? Let’s just get right into it.

What is Flutter Container Color?

Flutter container color is the background color of the Flutter container widget. We will first see the default Flutter container color, then we will change the color using proper Flutter example.

Default Flutter Container Color

To see the default color of the Flutter container, we have to implement a simple Flutter container with some height and width and also we will use a Flutter text widget so we can be clear that the Flutter container is there in the screen. See the below code:

Container(
          width: 280,
          height: 60,
          alignment: Alignment.center,
          child: Text(
            'Flutter Container default background color',
            style: TextStyle(color: Colors.black, fontSize: 15),
          ),
        )

You can see the default background color of Flutter container in the above image.

Change Flutter Container Color

Let’s now see how to give color to the Flutter container of our own choice. For that, we just have to use the color constructor of the Flutter container widget class. This color constructor takes a color so we will pass a purple color to it for demonstration. See the below code:

Container(
          color: Colors.purple,
          width: 280,
          height: 60,
          alignment: Alignment.center,
          child: Text(
            'Flutter Container custom background color',
            style: TextStyle(color: Colors.white, fontSize: 15),
          ),
        )

You can see in the above image that we have successfully changed the Flutter container color.

One important point is that when you are using the decoration constructor the use the color constructor of the box decoration only. If not then it will throw an error. Examples are given below:

Example 1: Error

Container(
          color: Colors.purple,
          decoration: BoxDecoration())

Example 2: All Good

Container(
          decoration: BoxDecoration(
            color: Colors.purple,
          ))

By following the steps mentioned above, you can easily change the Flutter container color. Don’t hesitate to ask if you still have any questions related to the customization of Flutter container color. I would love to answer all.

Below section has the complete Flutter source code of the above customized Flutter container color.

Flutter Container Color Customization 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 StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
      body: Center(
        child: Container(
          color: Colors.purple,
          width: 280,
          height: 60,
          alignment: Alignment.center,
          child: Text(
            'Flutter Container custom background color',
            style: TextStyle(color: Colors.white, fontSize: 15),
          ),
        ),
      ),
    ));
  }
}

Conclusion

To conclude, hope after reading this Flutter post, you will now easily change Flutter container color in your Flutter apps. I would be looking forward at your valuable feedback on this post. Thanks for reading this post.