Флаттер, как сделать ряд, чтобы придерживаться в нижней части

Question

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

                      Align(
                        alignment: Alignment.bottomCenter,
                        child: Container(
                          decoration: BoxDecoration(
                            border: Border(
                                top: BorderSide(color: Color(0xF6F6F6F6))),
                          ),
                          child: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                              children: <Widget>[
                                Container(
                                  height: 30,
                                  child: FlatButton.icon(
                                    color: Colors.white,
                                    icon: Icon(Icons.bookmark_border,
                                        size: 18, color: Colors.black38),
                                    label: Text('Bookmark',
                                        style: TextStyle(
                                            fontSize: 13,
                                            color: Colors.black54)),
                                    onPressed: () {},
                                  ),
                                ),
                                Container(
                                  height: 30,
                                  child: FlatButton.icon(
                                    color: Colors.white,
                                    icon: Icon(Icons.share,
                                        size: 18, color: Colors.black38),
                                    label: Text('Share',
                                        style: TextStyle(
                                            fontSize: 13,
                                            color: Colors.black54)),
                                    onPressed: () {},
                                  ),
                                )
                              ])),
                      )],

Снимок экрана

Answer 1

Без дополнительной информации я не уверен, что то, что я предлагаю, сработает. Но вы можете использовать виджет Stack в сочетании с Align для достижения того, что вы хотите. Стек документы с примерами, ознакомьтесь с этой статьей о индексированных стопках .

Answer 2

Вы можете поместить Строка в Столбец и выше Строка , у вас есть Расширенная , оборачивающая виджет. В этом случае я использовал Контейнер и установил оранжевый цвет.

class BarStaysDown extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Expanded(
              child: Container(
                color: Colors.orange,
              ),
            ),
            Container(
              color: Colors.white,
              child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: <Widget>[
                    Container(
                      height: 30,
                      child: FlatButton.icon(
                        color: Colors.white,
                        icon: Icon(Icons.bookmark_border,
                            size: 18, color: Colors.black38),
                        label: Text('Bookmark',
                            style:
                                TextStyle(fontSize: 13, color: Colors.black54)),
                        onPressed: () {},
                      ),
                    ),
                    Container(
                      height: 30,
                      child: FlatButton.icon(
                        color: Colors.white,
                        icon: Icon(Icons.share, size: 18, color: Colors.black38),
                        label: Text('Share',
                            style:
                                TextStyle(fontSize: 13, color: Colors.black54)),
                        onPressed: () {},
                      ),
                    )
                  ]
              ),
            )
          ],
        ),
      ),
    );
  }
}

Выход:

Answer 3

Попробуйте добавить crossAxisAlignment: CrossAxisAlignment.end в строку.

Надеюсь, это помогло.