Flutter: круглая рамка показывает нежелательные контуры - PullRequest
Новая
       10

Flutter: круглая рамка показывает нежелательные контуры

1 голос
/ 04 августа 2020

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

 Stack(
   overflow: Overflow.visible,
   children: <Widget>[
         Positioned(
             child: Image.asset(
                      "assets/v2/small/messenger-icon.png",
                      width: 28,
                      fit: BoxFit.cover,
         )),
         Positioned(
             top: -2,
             right: -2,
             child: Container(
                       width: 12,
                       height: 12,
                       decoration: BoxDecoration(
                              color: MyColors.accentColor,
                              borderRadius: BorderRadius.circular(8),
                              border: Border.all(
                                  color: Colors.white,
                                  width: 1,
                                  style: BorderStyle.solid)),
                        ),
              )
   ],
)

введите описание изображения здесь

Все работает нормально, но есть ненужная круглая линия MyColors.accentColor поверх белого контура.

Ответы [ 2 ]

0 голосов
/ 04 августа 2020

введите описание изображения здесь Два контейнера с разницей в размере в 1 пиксель - это решение 

Stack(
    overflow: Overflow.visible,
    children: <Widget>[
      Positioned(
          child: Image.asset(
        "assets/mes1.png",
        width: 280,
        fit: BoxFit.cover,
      )),
      Positioned(
        top: -2,
        right: -2,
        child: Container(
          width: 121,
          height: 121,
          decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(121),
              border: Border.all(
                  color: Colors.white, width: 1, style: BorderStyle.solid)),
          child: Container(
            width: 120,
            height: 120,
            decoration: BoxDecoration(
                color: Colors.deepOrange,
                borderRadius: BorderRadius.circular(120),
                border: Border.all(
                    color: Colors.deepOrange,
                    width: 1,
                    style: BorderStyle.solid)),
          ),
        ),
      )
    ],
  )
0 голосов
/ 04 августа 2020

Это потому, что сама граница накладывается на украшение контейнера. Возможный обходной путь - использовать 2 контейнера. Верхний с рамкой и нижний с фоном. 

Positioned(
                top: -2,
                right: -2,
                child: Container(
                  width: 12,
                  height: 12,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    border: Border.all(
                      color: Colors.white,
                      width: 1,
                      style: BorderStyle.solid,
                    ),
                  ),
                  child: Container(
                    decoration: BoxDecoration(
                      color: Colors.purpleAccent,
                      shape: BoxShape.circle,
                    ),
                  ),
                ),
              ),
...