by @kodeazy
flutter How to add background color to a Row Widget?
In this blog we will discuss on how to add background color to a Row widget in flutter.
In flutter Row widget does not have Color property to add the color to the widget.
so we need to wrap inside the widget that has color property.
so to add Row widget inside the widget that has color property.
we use Container widget.
Below is an example syntax of adding Row widget inside Container widget by adding color as black.
Container(
color: Colors.black,
child: Center(child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children:<Widget> [
TextButton(
child: Text("Button 1"),
onPressed: (){},
style: TextButton.styleFrom(backgroundColor: Colors.red),
)
])));Below is an example program for adding color to Row Widget in flutter.
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(
home: Scaffold(
appBar: AppBar(title: Text('Row Color Example'),),
backgroundColor: Colors.white,
body: Container(
color: Colors.black,
child: Center(child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children:<Widget> [
TextButton(
child: Text("Button 1"),
onPressed: (){},
style: TextButton.styleFrom(backgroundColor: Colors.red),
),
TextButton(
child: Text("Button 2"),
onPressed: (){},
style: TextButton.styleFrom(backgroundColor: Colors.yellow),
),
TextButton(
child: Text("Button 3"),
onPressed: (){},
style: TextButton.styleFrom(backgroundColor: Colors.green.shade100),
)
],
))),
),
);
}
}Output:
Share:
