CODEWITHSUNDEEP
flutterdartflutter-layout
Pascal
Pascal

Reputation: 12855

How to set the background color for a layout element in flutter

I would like to set the background color of both columns left/right.

I thought columns/rows have similar meaning/functionality like bootstrap in web development.

But it seems everything is more laborious...

Please do not tell me I have to wrap each Expanded with the Container widget and set there the color...

Container(
  margin: EdgeInsets.all(5),
  color: Colors.orangeAccent,
  child: Column(children: <Widget>[
    Row(
      children: <Widget>[
        Expanded(
          flex: 3,
          child: Column(
            children: <Widget>[
              Text("left", textAlign: TextAlign.end,),
            ],
          ),
        ),
        Expanded(
          flex: 7,
          child: Column(
            children: <Widget>[
              Text(
                "right",
                textAlign: TextAlign.right,
              ),
            ],
          )
        ),
      ],
    ),
    Row(
      children: <Widget>[],
    )
  ]),
),

Upvotes: 3

Views: 4171

Answers (1)

Peter Haddad
Peter Haddad

Reputation: 80914

Since the container has the property color then you need to wrap the column widget with a container to change its color:

Expanded(
  flex: 3,
  child: Container(
    color : Colors.black,
    child : Column(
      children: <Widget>[
        Text("left", textAlign: TextAlign.end,),
      ],
    ),
  )
),

https://api.flutter.dev/flutter/widgets/Container-class.html

Upvotes: 3

Related Questions