How To Easily Change Flutter Container Color

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),
          ),
        )
Flutter container background color
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),
          ),
        )
Flutter container color
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

Flutter container 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 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.

1 thought on “How To Easily Change Flutter Container Color”

  1. It’s remarkaƅle to visit this ᴡeb site and reading the views of all colleagues
    on the topic of this piece of writing, wһile I am aⅼso zealous of getting experience.

Leave a Comment

Your email address will not be published.