颤动的图像装饰错位

Question

我正在玩Flutter框架，并且遇到了这个问题。我有一个图像，我正在添加一个装饰，但装饰正在屏幕中央绘制，而图像则向左对齐。

以下是该卡的代码：

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

以下是渲染方式的图像。

小精灵是图像元素，中间的灰色圆圈是它的装饰。我期待装饰呈现在它的主人的中心，这是图像。我在这里做错了吗？

Answer 1

您可以将图片放在FittedBox内，之后将装饰应用于孩子

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