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.

Outline

1. What is Flutter Container Color?
2. Default Flutter Container Color
3. Change Flutter Container Color
4. Flutter Container Color Customization Source Code
5. Conclusion

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 https://letmeflutter.com/container-customization-in-flutter-app/Flutter container color in your Flutter apps. I would be looking forward at your valuable feedback on this post.

I would also highly encourage you to visit my other articles on Flutter templates including free source code, customized Flutter app development, Flutter books, Flutter widgets, Flutter web, beautiful custom animations in Flutter and many more.

Listed below are few post links to the above mentioned topics. More can be found by using this site menu bar or the search box if this site. Thanks for reading this post.

Flutter app articles you might like to read: flutter appbar title center, why learn react native framework, react native jobs, react native elements, unique flutter development. beautiful gradient login UI, Dart Vs JavaScript, flutter login UI form, flutter basics for beginners, explanation of widgets in flutter, flutter architecture, flutter vs native, flutter sliverappbar customization, mobile app marketing tips, flutter bottom navigation bar, flutter appbar actions,

You might also like:

How To Easily Change Flutter Container Border Radius

How To Easily Change Flutter Container Shadow Color

How To Easily Customize Flutter Container Shadow

How To Easily Change Flutter Container Size

Acer Predator Helios 300 PH315 54 760S Gaming Laptop Amazing Specs

How To Easily Change Flutter Text Underline Color

How To Easily Align Flutter Text Justify

How To Easily Set Space Between Flutter Text And Underline

How To Easily Set Flutter Text Letter Spacing

Acer Nitro 5 AN515 57 79TD Gaming Laptop Amazing Specs-Best Gaming Laptop

How To Easily Set Flutter Text Underline

How To Easily Add Flutter Text Shadow

Samsung 13.3 Galaxy Book 2 Pro Laptop Amazing Hidden Specs

Amazing Specs Of Galaxy Chromebook Mercury Gray Laptop