How to set the background color of a Row() in Flutter?
Just wrap your Row with a Container with colour property like below:
Container(
color: Colors.black,
child: Row(
children: <Widget>[
Expanded(
child: Text('Demo', style: TextStyle(color: Colors.white),),
)
],
),
)
You can try this, it will work.
return DataRow.byIndex(
index: row.key,
color: MaterialStateColor.resolveWith(
(states) {
if (row.key % 2 == 0) {
return Colors.blue[50];
} else {
return Colors.white;
}
},
),
I use my own custom row and column with so may customizable options:
Widget column({
final EdgeInsets padding = EdgeInsets.zero,
final EdgeInsets margin = EdgeInsets.zero,
final List<Widget> children = const <Widget>[],
final MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
final MainAxisSize mainAxisSize = MainAxisSize.max,
final CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
final VerticalDirection verticalDirection = VerticalDirection.down,
final BoxDecoration? decoration,
final double? width,
final double? height,
final bool isScrollable = false,
final VoidCallback? onTap,
}) =>
Container(
width: width,
height: height,
decoration: decoration,
padding: padding,
margin: margin,
child: isScrollable
? SingleChildScrollView(
child: Column(
mainAxisAlignment: mainAxisAlignment,
mainAxisSize: mainAxisSize,
crossAxisAlignment: crossAxisAlignment,
verticalDirection: verticalDirection,
children: children,
),
)
: GestureDetector(
onTap: onTap,
child: Column(
mainAxisAlignment: mainAxisAlignment,
mainAxisSize: mainAxisSize,
crossAxisAlignment: crossAxisAlignment,
verticalDirection: verticalDirection,
children: children,
),
),
);
Widget row({
final EdgeInsets padding = EdgeInsets.zero,
final EdgeInsets margin = EdgeInsets.zero,
final List<Widget> children = const <Widget>[],
final MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
final MainAxisSize mainAxisSize = MainAxisSize.max,
final CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
final VerticalDirection verticalDirection = VerticalDirection.down,
final BoxDecoration? decoration,
final double? width,
final double? height,
final bool isScrollable = false,
final VoidCallback? onTap,
}) =>
Container(
width: width,
height: height,
decoration: decoration,
padding: padding,
margin: margin,
child: isScrollable
? SingleChildScrollView(
child: Row(
mainAxisAlignment: mainAxisAlignment,
mainAxisSize: mainAxisSize,
crossAxisAlignment: crossAxisAlignment,
verticalDirection: verticalDirection,
children: children,
),
)
: GestureDetector(
onTap: onTap,
child: Row(
mainAxisAlignment: mainAxisAlignment,
mainAxisSize: mainAxisSize,
crossAxisAlignment: crossAxisAlignment,
verticalDirection: verticalDirection,
children: children,
),
),
);
Wrap Row
in a Container
or a ColoredBox
and provide it a color
.
Container(
color: Colors.red, // <-- Red color provided to below Row
child: Row(...), /
)
or
ColoredBox(
color: Colors.red, // <-- Red color provided to below Row
child: Row(...), /
)