Блог

Я пытаюсь переместиться RaisedButton() из центра экрана в нижний центр. Я пробовал с Align() , но не работает. Как это сделать?

Скриншот моего приложения

И вот мой код:

 body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              width: 200,
              height: 200,
              child: Image(
                image: AssetImage('images/Logoku (Dark).jpg'),
              ),
            ),
            Align(
              alignment: Alignment.bottomCenter,
              child: RaisedButton(
                child: Text('Go to First Page'),
                onPressed: () {
                  Navigator.pop(context);
                },
              ),
            )
          ],
        ),
      ),
  

Замените столбец на Stack и расположите центральный виджет в правильном порядке.

 body: Stack(

        children: [
          Center(
            child: Container(
            
              width: 200,
              height: 200,
              child: Image(
                image: AssetImage('images/Logoku (Dark).jpg'),
              ),
            ),
          ),
          Align(
            alignment: Alignment.bottomCenter,
            child: RaisedButton(
              child: Text('Go to First Page'),
              onPressed: () {
                Navigator.pop(context);
              },
            ),
          )
        ],
      ),
  

Центр приложит все усилия для центрирования дочернего элемента. Однако, поскольку вы используете столбец, это сделает возможным минимальную высоту столбца. Поскольку кажется, что вы хотите разместить изображение посередине, я бы не использовал центр, я бы использовал разделители.

 body:  Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Spacer(),
            Container(
              width: 200,
              height: 200,
              child: Image(
                image: AssetImage('images/Logoku (Dark).jpg'),
              ),
            ),
            Spacer(),
            RaisedButton(
                child: Text('Go to First Page'),
                onPressed: () {
                  Navigator.pop(context);
                },
              ),
            
          ],
        ),
  

Это не должно сработать, потому что вы установили для столбца значение mainAxisALignment.center, которое вынуждает его дочерних элементов быть центром, и вы знаете, что основная ось столбца расположена сверху вниз.Удалите MainAxisALignment.center.

Я думаю, что это могло бы сработать,

  body: Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Container(),
              Container(
                width: 200,
                height: 200,
                child: Image(
                  image: NetworkImage('https://picsum.photos/200'),
                ),
              ),
              Align(
                alignment: Alignment.bottomCenter,
                child: RaisedButton(
                  color: Colors.green,
                  child: Text('Go to First Page'),
                  onPressed: () {},
                ),
              )
            ],
          ),
  

Вывод: