CODEWITHSUNDEEP
flutter
rbasniak
rbasniak

Reputation: 4964

Flutter image decoration misplaced

I'm playing around with Flutter framework, and got stuck with this problem. I have an image, and I'm adding a decoration to it, but the decoration is being drawn in the center of the screen, while the image is aligned to the left.

Here's the code for the card:

final pokemonThumbnail = new Container(
  decoration: new BoxDecoration(
    color: Colors.grey,
    shape: BoxShape.circle,
  ),
  margin: new EdgeInsets.symmetric(
    vertical: 16.0
  ),
  alignment: FractionalOffset.centerLeft,
  child: new Image(
    image: new AssetImage('assets/img/' + pokemon.id.toString() + '.png'),
    height: Theme.Dimens.pokemonHeight,
    width: Theme.Dimens.pokemonWidth,
  ),
);

And here's the image of how it's being rendered.

enter image description here

The pokemons are the image elements, and the grey circle in the middle is its decoration. I was expecting that the decoration was rendered centered to it's owner, which is the image. Am I assuming something wrong here?

Upvotes: 4

Views: 3706

Answers (1)

Raouf Rahiche
Raouf Rahiche

Reputation: 31356

You can make the Image inside a FittedBox and after that apply the decoration to the child 

final pokemonThumbnail = new Container(
margin: new EdgeInsets.symmetric(vertical: 16.0),
alignment: FractionalOffset.centerLeft,
child: new FittedBox(
  child: new Container(
    decoration: new BoxDecoration(
    color: Colors.grey,
    shape: BoxShape.circle,
  ),
    child: new Image(
      image: new AssetImage('assets/img/' + pokemon.id.toString() + '.png'),
      height: Theme.Dimens.pokemonHeight,
      width: Theme.Dimens.pokemonWidth,
    ),
  ),
),);

enter image description here

Upvotes: 1

Related Questions