Создайте два независимых друг от друга виджета - PullRequest
0 голосов
/ 06 мая 2020

Я не уверен, что мне что-то здесь не хватает, но во Flutter я хочу создать два виджета, которые можно перемещать независимо друг от друга.

Мой текущий код:

class SurpriseReveal extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      margin: EdgeInsets.all(10),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text(
            "Hi",
            style: TextStyle(fontSize: 20, color: Colors.pink[700]),
            textAlign: TextAlign.center,
          ),
          InkWell(
            onTap: null,
            splashColor: Colors.pink[900],
            child: Container(
              // set your desired height here
              height: 150,
              // set your desired width here
              width: 150,
              // decoration property gives it a color and makes it round like a floating action button
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: Colors.pink[300],
              ),
              // add your desired padding here
              padding: const EdgeInsets.symmetric(vertical: 10.0),
              // add the child element
              child: Center(
                child: Text(
                  'Hi',
                  // style of the text
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    fontSize: 22.0,
                    color: Colors.pink[900],
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Это создает что-то вроде этого: enter image description here

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

Нужно ли мне создавать две отдельные функции, возвращающие Widget?

1 Ответ

1 голос
/ 06 мая 2020

Чтобы добавить пространство между вашими виджетами, вы можете обернуть их виджетом Padding (). Однако, если вы хотите разместить свои виджеты независимо, где бы они ни находились на экране, оберните их в виджет стека и используйте виджет Positionned () для установки их ограничений.

...