Hi, Welcome to AndroidRide.
In this post, you will learn how to set background color of the Container.
without wasting time, let’s start.
Contents
Flutter Container Background Color – Using color property
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
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
- 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.