CODEWITHSUNDEEP
flutter
spongyboss
spongyboss

Reputation: 8666

Fill an area with color in Flutter

I am using Flutter to develop an app and I have a row in a card with three items, I am try to fill the area for the last item with a color but there seems to be padding around the area that I just do not how to get rid of.

Here is the situation at the moment: enter image description here

Here is my code:

return new Container(
      margin: const EdgeInsets.symmetric(vertical: 4.0,horizontal: 16.0),
      child: new InkWell(
        child: new Card(
          child: new Row(
            children: <Widget>[
              new Expanded(
                child: new ListTile(
                  leading: new Image.asset("images/${aps.photo}",fit: BoxFit.contain,),
                  title: new Text(aps.university),),

              ),
              new Container(
                  padding: const EdgeInsets.all(10.0),
                  color: Colors.blue,child: new Text("${aps.aps}",style: new TextStyle(color: Colors.white),)),
            ],
          ),
        ),
      ),
    );

All I want to achieve is to fill the entire area with score with the blue color. The color must stretch to the top and bottom.

Upvotes: 6

Views: 18263

Answers (1)

R&#233;mi Rousselet
R&#233;mi Rousselet

Reputation: 276941

The trick is to set on your Row crossAxisAlignment to CrossAxisAlignment.stretch. This will force all it's children to expand vertically. But then you have to add an height constraint or else the row will expand on the vertical axis.

The easiest solution in your case is to wrap your Row into a SizedBox with a fixed height and unconstrained width. Where the height would be equal to ListTile height, as it's the biggest element of your list. So 56.0, considering you have a one line title and without dense property.

Then you may want to align your Text inside the colored container. As it's top aligned instead of vertical centered. Which can be achieved with the alignment property on Container set to Alignment.center or Alignment.centerLeft/Right depending on your need.

new Container(
  margin: const EdgeInsets.symmetric(vertical: 4.0, horizontal: 16.0),
  child: new InkWell(
    child: new Card(
      child: new SizedBox(
        height: 56.0,
        child: new Row(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            new Expanded(
              child: new ListTile(
                title: new Text('foo'),
              ),
            ),
            new Container(
                color: Colors.blue,
                alignment: Alignment.center,
                padding: const EdgeInsets.symmetric(horizontal: 10.0),
                child: new Text(
                  "foo",
                  style: new TextStyle(color: Colors.white),
                ),
            ),
          ],
        ),
      ),
    ),
  ),
)

enter image description here

Upvotes: 10

Related Questions