Hi, Welcome to AndroidRide.

In this post, you will learn how to set background color of the Container.
without wasting time, let’s start.

Flutter Container Background Color – Using color property

flutter background color container
By default, Container comes with a color property. Not only property, Flutter also provides lots of default colors to make our UI better.

  • Here, I have used Colors.blue. You can use any other colors.
  • Check it out other colors provided by Colors class.
Container(
                  width: 200,
                  height: 80,
                  color: Colors.red,
                  child: const Center(
                    child: Text(
                      'color property',
                      style: TextStyle(
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                ),

Container Background color with Hex Code

  • If you want to use any of the color code you like. For example, you got #FA8072 on the web. Just remove # and replace it with 0xff
  • so #FA8072 becomes 0xffFA8072
  • Now pass it to Color class -> Color(0xffFA8072)

Container(
                  width: 200,
                  height: 80,
                  color: const Color(0xffFA8072),
                  child: const Center(
                    child: Text(
                      'Hex color code',
                      style: TextStyle(
                        fontWeight: FontWeight.bold,
                      ),
                      textAlign: TextAlign.center,
                    ),
                  ),
                ),

Background Color With Opacity


Sometimes, you don’t need fully opaque color for your container, so you can use opacity with colors to reduce the opaqueness.

  • By default, Colors class provides colors like White70, black54.
  • The number after the color name is opacity.
  • Here, white70 means white color with 70% opacity.

Container(
                  width: 200,
                  height: 80,
                  //color: Colors.red.withOpacity(0.5),
                  color: Colors.black54,
                  child: const Center(
                    child: Text(
                      'color with opacity',
                      style: TextStyle(
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                ),

  • Or you can use withOpacity() method with the value.
  • Just like given below.

Container(
                  width: 200,
                  height: 80,
                  color: Colors.red.withOpacity(0.5),
                  child: const Center(
                    child: Text(
                      'color with opacity',
                      style: TextStyle(
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                ),



Background Color Using BoxDecoration


Container’s decoration property can be used to set Background color. BoxDecoration also provides color property.

Container(
                  width: 200,
                  height: 80,
                  decoration: const BoxDecoration(
                    color: Colors.yellow,
                  ),
                  child: const Center(
                    child: Text(
                      'decoration property',
                      style: TextStyle(
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                ),

Container Background Color as Gradient

flutter container background color gradient

You can set gradient color as Container background. By using gradient, we can give our container a different look.

  • So we can use BoxDecoration and it’s gradient property to make background color.
  • Let’s give starting and ending color in an array as value of colors property.
  • Container(
                      width: 200,
                      height: 80,
                      decoration: const BoxDecoration(
                        gradient: LinearGradient(
                          colors: [
                            Color(0xFF0061ff),
                            Color(0xFF60efff),
                          ],
                        ),
                      ),
                      child: const Center(
                        child: Text(
                          'Gradient color',
                          style: TextStyle(
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ),
                    ),

    Complete Source code

    flutter container background color

    • Here, I included all containers told above with SizedBox.
    • You can also use Padding widget or You can use Container margin property for extra free space.
    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,
          title: 'Container Background Color Example',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: ContainerBackgroundColorEx(),
        );
      }
    }
    
    class ContainerBackgroundColorEx extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return SafeArea(
          child: Scaffold(
            appBar: AppBar(
              title: Text('Container Background Color Example'),
            ),
            body: Center(
              child: SingleChildScrollView(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Container(
                      width: 200,
                      height: 80,
                      color: Colors.red,
                      child: const Center(
                        child: Text(
                          'color property',
                          style: TextStyle(
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ),
                    ),
                    SizedBox(
                      height: MediaQuery.of(context).size.height * 0.01,
                    ),
                    Container(
                      width: 200,
                      height: 80,
                      color: const Color(0xffFA8072),
                      child: const Center(
                        child: Text(
                          'Hex color code',
                          style: TextStyle(
                            fontWeight: FontWeight.bold,
                          ),
                          textAlign: TextAlign.center,
                        ),
                      ),
                    ),
                    SizedBox(
                      height: MediaQuery.of(context).size.height * 0.01,
                    ),
                    Container(
                      width: 200,
                      height: 80,
                      //color: Colors.red.withOpacity(0.5),
                      color: Colors.black54,
                      child: const Center(
                        child: Text(
                          'color with opacity',
                          style: TextStyle(
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ),
                    ),
                    SizedBox(
                      height: MediaQuery.of(context).size.height * 0.01,
                    ),
                    Container(
                      width: 200,
                      height: 80,
                      decoration: const BoxDecoration(
                        color: Colors.yellow,
                      ),
                      child: const Center(
                        child: Text(
                          'decoration property',
                          style: TextStyle(
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ),
                    ),
                    SizedBox(
                      height: MediaQuery.of(context).size.height * 0.01,
                    ),
                    Container(
                      width: 200,
                      height: 80,
                      decoration: const BoxDecoration(
                        gradient: LinearGradient(
                          colors: [
                            Color(0xFF0061ff),
                            Color(0xFF60efff),
                          ],
                        ),
                      ),
                      child: const Center(
                        child: Text(
                          'Gradient color',
                          style: TextStyle(
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ),
                    ),
                    SizedBox(
                      height: MediaQuery.of(context).size.height * 0.01,
                    ),
                  ],
                ),
              ),
            ),
          ),
        );
      }
    }
    
    

    okay, that’s all for now.

    If you like this post, please share it with your family and friends.
    Thanks.

Please disable your adblocker or whitelist this site!