Флаттер: - Создать круглую рамку вокруг иконок - PullRequest
0 голосов
/ 07 ноября 2019

Я хочу создать круглые рамки вокруг значков, как показано на рисунке. layout

Container(
              margin: EdgeInsets.all(20),
              padding: EdgeInsets.all(10),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(100),
                color: Colors.white,
                border: Border.all(
                  width: 2
                )
              ),
              child: Icon(Icons.arrow_downward,color: Colors.white,),
            )

Мне не нужны срезы на круглых границах, поскольку они показаны на изображении, но на всей круговой границе, я также пробовал этот код => Этот ответ

Ответы [ 2 ]

0 голосов
/ 09 ноября 2019

Я делаю некоторые ошибки в моем коде выше. но я понял, и вот новый код.

Container(
                  margin: EdgeInsets.all(20),
                  padding: EdgeInsets.all(10),
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(100),
                      border: Border.all(width: 2, color: Colors.white)),
                  child: Icon(
                    Icons.cancel,
                    color: Colors.white,
                  ),
                )),

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

GestureDetector(
            onTap: () {
              //Navigator.of(context).pop();

            },
            child: new Align(
                alignment: Alignment.bottomRight,
                child: Container(
                  margin: EdgeInsets.all(20),
                  padding: EdgeInsets.all(10),
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(100),
                      border: Border.all(width: 2, color: Colors.white)),
                  child: Icon(
                    Icons.cancel,
                    color: Colors.white,
                  ),
                )),
          ),
0 голосов
/ 07 ноября 2019
Container(
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              border: Border.all(color: Colors.white)
            ),
            child: Icon(Icons.check, color: Colors.white,),
          )

или вы можете использовать Материал, если вам понадобятся необычные эффекты:

Material(
            color: Colors.transparent,
            shape: CircleBorder(
              side: BorderSide(color: Colors.white)
            ),
            child: Icon(Icons.check, color: Colors.white,),
          )
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...