УкрашениеImage / Изображение как ребенок, выходящий за пределы контейнера?

Question

Я попробовал это 1. Украшение изображения 2. Изображение 3. CircleAvatar

Я использовал стек, так как будет фоновое изображение.Но я не могу понять, почему изображение так расширяется.

Мне нужно круглое изображение для аватарки.

Если я использую Column вместо ListView, тогда изображения не растягиваются вот так ... но мне нужен ListView.

Код: -

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          ListView(
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Container(
                  height: 80.0,
                  width: 80.0,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    image: new DecorationImage(
                      image: AssetImage(Assets.cool),
                      fit: BoxFit.cover,
                    ),
                    color: Colors.red,
                  ),
                ),
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Container(
                  height: 50.0,
                  width: 50.0,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                  ),
                  child: Image(
                    image: AssetImage(Assets.cool),
                    fit: BoxFit.cover,
                  ),
                ),
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: CircleAvatar(
                  radius: 50.0,
                  backgroundImage: AssetImage(Assets.cool),
                ),
              )
            ],
          )
        ],
      ),
    );
  }

Answer 1

Чтобы получить круглое изображение, просто оберните весь свой виджет ListView в виджет Column и поместите столбец в ListView.Вы получите прокручиваемый столбец.

ListView(
    children: <Widget>[
      Column(
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Container(
              height: 80.0,
              width: 80.0,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                image: new DecorationImage(
                  image: AssetImage(Assets.cool),
                  fit: BoxFit.cover,
                ),
                color: Colors.red,
              ),
            ),
          ),
          //.....
        ],
      )
    ],
  ),s

Answer 2

Насколько я понимаю, вы хотите, чтобы изображение в круге не было эллипсом.Вы можете достичь этого, обернув элементы в вашем listview элементом Row.

return Scaffold(
  body: Stack(
    children: <Widget>[
      ListView(
        children: <Widget>[
          // Wrap with a row
          Row(
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Container(
                  height: 80.0,
                  width: 80.0,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    image: new DecorationImage(
                      image: AssetImage("a.jpg"),
                      fit: BoxFit.cover,
                    ),
                    color: Colors.red,
                  ),
                ),
              ),
              //...
            ],
          ),
        ],
      )
    ],
  ),
);