I have a container widget that I can't get to show a background color. This widget is the first in a Column so the width is the full screen. I should be able to see the background to the right of the button.
class HomeNavBar extends StatelessWidget {
const HomeNavBar({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
height: 100,
color: Colors.green, // <---------------- NOT WORKING
child: ElevatedButton(
onPressed: () => null,
child: Text('Home'),
),
);
}
}
Here's a link to a dartpad example: https://dartpad.dev/fc5fdd6c227747abe039d73a07d00a54
Thats happens due to ElevatedButton, try to change it to TextButton.
ElevatedButton's primary color hides the Container's green color. You can use style
property of ElevatedButton
and assign Colors.green
like this:
return Container(
height: 100,
child: ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.green
),
onPressed: () => null,
child: Text('Home'),
),
);
Both answers above lead me to the solution.
For anyone else wanted to do something like this, putting a DecoratedBox fixed it.
@override
Widget build(BuildContext context) {
return Container(
height: 48,
child: DecoratedBox(
decoration: const BoxDecoration(color: Colors.red),
child: Row(mainAxisAlignment: MainAxisAlignment.start, children: [
ElevatedButton(
onPressed: () => null,
child: Text('Next'),
),
]),
),
);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.