Почему за моим изображением в контейнере стоит фигура?

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

Card(
                child: InkWell(
                  splashColor: Colors.blue.withAlpha(30),
                  onTap: () {
                    Navigator.of(context).push(MaterialPageRoute(
                      builder: (context) => BodyConstruction(),
                    ));
                  },
                  child: ClipRRect(
                    borderRadius: BorderRadius.all(Radius.circular(30)),
                    child: Image.asset('images/Bild1.jpg'),
                  )
                ),
              ),

2 ответа

Решение

Вы забыли добавить форму своей карты. Также вы можете упростить свой borderRadius:

Card(shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(30)
      ),
      child: InkWell(
            splashColor: Colors.blue.withAlpha(30),
            onTap: () {
               Navigator.of(context).push(MaterialPageRoute(
                  builder: (context) => BodyConstruction(),
                ));
            },
            child: ClipRRect(
              borderRadius: BorderRadius.circular(30),
              child: Image.asset('images/Bild1.jpg'),
            ),
          ),
        )

Ваш результат будет следующим:

https://stackru.com/image s/bd4184a5c6a399167a66bd2ba1841d6aa8f35dd6.png

Попробуйте что-то вроде этого:

Карточка (форма: RoundedRectangleBorder( borderRadius: BorderRadius.circular(15.0),),

Есть несколько атрибутов формы, с которыми вы можете поиграть. Вот документ для этого:

https://api.flutter.dev/flutter/painting/ShapeBorder-class.html

Код, который у вас есть, применяется только к изображению, а не к самой карте. Надеюсь, это поможет.

Другие вопросы по тегам