как центрировать круг в карточке во флаттере? - PullRequest
Новая
       10

как центрировать круг в карточке во флаттере?

0 голосов
/ 01 июля 2018

Я пытался создать слой геозоны на изображении (URL карты Google)

У меня есть карточка с дочерним изображением, и я добавляю стопку кругов к изображению карты и использую ползунок, чтобы изменить размер зоны. проблема в том, что мне не удается центрировать карту в моем контейнере. Единственное решение, которое в настоящее время найдено, - это использовать поле для перехода по кругу, но когда я изменяю поле, ограничьте верхнюю часть круга, а не центр, поэтому мой центр смещается ...

вот мой пример кода: 

               new Card (

                child :new Stack(
                  children: <Widget>[

                new Container(

                  width: 200.0,
                  height: 200.0,
                ),

                    new Container(
                    alignment: new FractionalOffset(0.0, 0.0),   
                      decoration: new BoxDecoration(
                        border: new Border.all(
                          color: Colors.blue.withOpacity(0.5),
                          width: val,  // it's my slider variable, to change the size of the circle
                        ),
                        shape: BoxShape.circle,
                      ),
                    ),

                  ],
                ),
               ),

Ответы [ 3 ]

0 голосов
/ 02 июля 2018

Оберните ваш виджет в FractionalTranslation и установите значение смещения Y равным 0.5

        FractionalTranslation(
          translation: Offset(0.0, 0.5),
          child: new Container(
            alignment: new FractionalOffset(0.0, 0.0),
            decoration: new BoxDecoration(
              border: new Border.all(
                color: Colors.blue.withOpacity(0.5),
                width: 50.0, // it's my slider variable, to change the size of the circle
              ),
              shape: BoxShape.circle,
            ),
          ),
        ),

enter image description here

0 голосов
/ 02 июля 2018

Либо используйте alignment свойство Stack, как это 

new Card(
        child: new Stack(
          alignment: AlignmentDirectional.center,
          children: <Widget>[
            new Container(
              width: 200.0,
              height: 200.0,
            ),
            new Container(
              alignment: new FractionalOffset(0.0, 0.0),
              decoration: new BoxDecoration(
                border: new Border.all(
                  color: Colors.blue.withOpacity(0.5),
                  width: 50.0,
                ),
                shape: BoxShape.circle,
              ),
            ),
          ],
        ),
      ),

или просто оберните ваш контейнерный виджет с FractionalOffsetSet

 new Card(
            child: new Stack(
              alignment: AlignmentDirectional.center,
              children: <Widget>[
                new Container(
                  width: 200.0,
                  height: 200.0,
                ),
                FractionalTranslation(  
                translation: Offset(0.0, 0.5),
                child: new Container(
                     alignment: new FractionalOffset(0.0, 0.0),
                     decoration: new BoxDecoration(
                     border: new Border.all(
                     color: Colors.blue.withOpacity(0.5),
                     width: 50.0, 
                   ),
                shape: BoxShape.circle,
              ),
            ),
          ],
        ),
      ),
0 голосов
/ 01 июля 2018

Вы можете использовать свойство выравнивания стека, чтобы центрировать форму круга: 

 new Card(
        child: new Stack(
          alignment: AlignmentDirectional.center,//add this line
          children: <Widget>[
            new Container(
              width: 200.0,
              height: 200.0,
            ),
            new Container(
              alignment: new FractionalOffset(0.0, 0.0),
              decoration: new BoxDecoration(
                border: new Border.all(
                  color: Colors.blue.withOpacity(0.5),
                  width: val, // it's my slider variable, to change the size of the circle
                ),
                shape: BoxShape.circle,
              ),
            ),
          ],
        ),
      ),
...