In this post, you will learn how to set background color of Row in Flutter.
Row does not have any default attribute to set background color.
So what we do then?
Just wrap Row with other widgets, give color to them and it will affect in Row’s background.
Wraping a widget with other widget is very common in Flutter :-).
so let’s start.
If you don’t know how to setup Flutter and create project – use this link
Contents
1. Flutter Row Background Color Using Container
- Container used for painting and positioning widgets.
- Use color property to set color. This will be Row‘s background color. If we wrap the Row widget.
- Colors.blue a constant value which gives blue color.
Container(
color: Colors.blue,
padding: const EdgeInsets.all(8.0),
margin: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: const [
Text(
'Example 1',
style: TextStyle(
color: Colors.white,
fontSize: 20,
),
),
SizedBox(
width: 5,
),
Text(
'Text 1',
style: TextStyle(
color: Colors.white,
fontSize: 20,
),
)
],
),
),
2. Using Container Decoration Property
- Container decoration property can be used to set background color and also decorate the borders.
- Just like above example, just use it as parent of Row widget.
- By the way you can not use both color and BoxDecoration color property, it leads you to get error – Because color is a shorthand for BoxDecoration color.
Container(
decoration: const BoxDecoration(
color: Colors.pinkAccent,
borderRadius: BorderRadius.all(
Radius.circular(8),
),
),
height: 100,
width: double.infinity,
margin: const EdgeInsets.all(15),
padding: const EdgeInsets.all(15),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Text(
'Example 2',
style: TextStyle(
color: Colors.white,
fontSize: 20,
),
textAlign: TextAlign.center,
),
SizedBox(
width: 5,
),
Text(
'Text 2',
style: TextStyle(
color: Colors.white,
fontSize: 20,
),
textAlign: TextAlign.center,
),
],
),
),
3. Using Ink
- We can use Ink widget to draw decorations on Material widgets.
- Here, you can use Ink class color property to set color.
- That’s all.
Ink(
color: Colors.brown,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: const [
Text(
'Example 3',
style: TextStyle(
color: Colors.white,
fontSize: 24,
),
),
Text(
'Text 3',
style: TextStyle(
color: Colors.white,
fontSize: 24,
),
),
],
),
),
4. Using ColoredBox
- Just like Container, you can use ColoredBox to set background Color.
- It fills the color using color property and draw the child widget over it.
ColoredBox(
color: Colors.red,
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: const [
Text(
'Example 4',
style: TextStyle(color: Colors.white, fontSize: 24),
),
SizedBox(
width: 10,
),
Text(
'Text 4',
style: TextStyle(
color: Colors.white,
fontSize: 24,
),
),
],
),
),
Using DecoratedBox
- DecoratedBox is a lighter widget when compared to Container.
SizedBox(
width: double.infinity,
height: 100,
child: DecoratedBox(
decoration: const BoxDecoration(
color: Colors.purple,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Expanded(
child: Text(
'Example 5',
style: TextStyle(
color: Colors.white,
fontSize: 24,
),
textAlign: TextAlign.center,
),
),
SizedBox(
height: 30,
),
Expanded(
child: Text(
'Text 5',
style: TextStyle(
color: Colors.white,
fontSize: 24,
),
textAlign: TextAlign.center,
),
),
],
),
),
),
Create a complete project with above examples.
Complete Source Code
- You can use SizedBox for making empty spaces or use Flutter Padding Widget
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: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyPage(),
);
}
}
class MyPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Futter Row Background Color'),
),
body: Column(
children: [
SizedBox(
height: 10,
),
Container(
color: Colors.blue,
padding: const EdgeInsets.all(8.0),
margin: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: const [
Text(
'Example 1',
style: TextStyle(
color: Colors.white,
fontSize: 20,
),
),
SizedBox(
width: 5,
),
Text(
'Text 1',
style: TextStyle(
color: Colors.white,
fontSize: 20,
),
)
],
),
),
const SizedBox(
height: 10,
),
Container(
decoration: const BoxDecoration(
color: Colors.pinkAccent,
borderRadius: BorderRadius.all(
Radius.circular(8),
),
),
height: 100,
width: double.infinity,
margin: const EdgeInsets.all(15),
padding: const EdgeInsets.all(15),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Text(
'Example 2',
style: TextStyle(
color: Colors.white,
fontSize: 20,
),
textAlign: TextAlign.center,
),
SizedBox(
width: 5,
),
Text(
'Text 2',
style: TextStyle(
color: Colors.white,
fontSize: 20,
),
textAlign: TextAlign.center,
),
],
),
),
SizedBox(
height: 10,
),
Ink(
color: Colors.brown,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: const [
Text(
'Example 3',
style: TextStyle(
color: Colors.white,
fontSize: 24,
),
),
Text(
'Text 3',
style: TextStyle(
color: Colors.white,
fontSize: 24,
),
),
],
),
),
SizedBox(
height: 25,
),
ColoredBox(
color: Colors.red,
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: const [
Text(
'Example 4',
style: TextStyle(color: Colors.white, fontSize: 24),
),
SizedBox(
width: 10,
),
Text(
'Text 4',
style: TextStyle(
color: Colors.white,
fontSize: 24,
),
),
],
),
),
SizedBox(
height: 25,
),
SizedBox(
width: double.infinity,
height: 100,
child: DecoratedBox(
decoration: const BoxDecoration(
color: Colors.purple,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Expanded(
child: Text(
'Example 5',
style: TextStyle(
color: Colors.white,
fontSize: 24,
),
textAlign: TextAlign.center,
),
),
SizedBox(
height: 30,
),
Expanded(
child: Text(
'Text 5',
style: TextStyle(
color: Colors.white,
fontSize: 24,
),
textAlign: TextAlign.center,
),
),
],
),
),
),
],
),
);
}
}
If you like this post, please share it with your family and friends.
Thanks.