Flutter图像装饰错位

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 中制作图像，然后将装饰应用到 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,
    ),
  ),
),);

Flutter图像装饰错位

Flutter image decoration misplaced

flutter