Форма не работает должным образом для круглого свойства во флаттере

Question

Я пытаюсь создать круглую рамку для изображения, но после использования shape: Boxshape.circle она работает правильно на моем текущем изображении.Я уверен, что свойство shape не зависит от пикселя изображения или каких-либо других вещей.

У меня есть этот код:

return Column(
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: <Widget>[
      Container(
        margin: EdgeInsets.only(right: 40.0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Container(
              height: 144.0,
              width: 144.0,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                image: DecorationImage(
                  fit: BoxFit.fill,
                  image: AssetImage('MY_IMAGE')
                )
              )
            )
          ]
        )
      )
    ],
);

Я читал о Boxdecoration по этой ссылке: Флаттер - BoxDecoration .Я уверен, что shape должен работать, но в моем случае он не работает.

Вот результат, который я получаю прямо сейчас:

Мне нужна помощь твоих друзей.Заранее спасибо.

Answer 1

Попробуйте этот код

Container(
          color: Colors.amber,// this is just for detection, rounded or not
          child: Center(
            child: new Container(
                height: 144.0,
                width: 144.0,
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(72),
                    image: DecorationImage(
                        fit: BoxFit.fill,
                        image: AssetImage('assets/img1.png')))),
          ),
        )

Answer 2

Используйте тот же код, который вы указали в вопросе. Но вместо BoxFit.contain или BoxFit.fill попробуйте использовать BoxFit.cover.

Как отмечается в комментарии Мазин Ибрагим в ответе выше, фактическая высота вашего изображения должна быть меньше радиуса круглого контейнера, поэтому, даже если контейнер имеет круглую форму Вы не можете видеть это.

Проверьте эту ссылку для более подробной информации.

Answer 3

Используйте ClipRRect внутри SizedBox:

  Container(
    child: new SizedBox(
                height: 144.0,
                width: 144.0,
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(72.0),
                  child: new Image.asset('MY_IMAGE'),
                 ),
               ),
             ),