How do I set background color in a Flutter container

user_1012797 0
Viewed 800

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

flutter
3 Answers

Thats happens due to ElevatedButton, try to change it to TextButton.

user_111098630

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'),
  ),
);
user_45933150

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'),
          ),
        ]),
      ),
    );
  }
user_10127970
Related