Кнопка выравнивания флаттера до нижней части ящика - программирование
Подтвердить что ты не робот

Кнопка выравнивания флаттера до нижней части ящика

Я пытаюсь установить виджет в нижней части моего NavDrawer, сохраняя при этом DrawerHeader и список в верхней части ящика. Вот что я пытаюсь:

drawer: new Drawer(
    child: new Column(
      mainAxisSize: MainAxisSize.max,
      children: <Widget>[
        new Text('Top'),
        new Align(
          alignment: FractionalOffset.bottomCenter,
          child: new Text('Bottom'),
        ),
      ],
    ),
  ),

Нижний текст должен быть выровнен в нижней части ящика, но это не так!

4b9b3361

Ответ 1

Вам нужно обернуть свой виджет Align в Expanded.

drawer: new Drawer(
  child: new Column(
    mainAxisSize: MainAxisSize.max,
    children: <Widget>[
      new Text('Top'),
      new Expanded(
        child: new Align(
          alignment: Alignment.bottomCenter,
          child: new Text('Bottom'),
        ),
      ),
    ],
  ),
),

Ответ 2

Немного опоздал на вечеринку, но вот мое решение этой проблемы:

  @override
  Widget build(BuildContext context) {
    return Drawer(
      // column holds all the widgets in the drawer
      child: Column(
        children: <Widget>[
          Expanded(
            // ListView contains a group of widgets that scroll inside the drawer
            child: ListView(
              children: <Widget>[
                UserAccountsDrawerHeader(),
                Text('In list view'),
                Text('In list view too'),
              ],
            ),
          ),
          // This container holds the align
          Container(
              // This align moves the children to the bottom
              child: Align(
                  alignment: FractionalOffset.bottomCenter,
                  // This container holds all the children that will be aligned
                  // on the bottom and should not scroll with the above ListView
                  child: Container(
                      child: Column(
                    children: <Widget>[
                      Divider(),
                      ListTile(
                          leading: Icon(Icons.settings),
                          title: Text('Settings')),
                      ListTile(
                          leading: Icon(Icons.help),
                          title: Text('Help and Feedback'))
                    ],
                  )
                )
              )
            )
        ],
      ),
    );
  }

Это приводит к выводу ниже, где UserAccountDrawerHeader и текстовые элементы можно прокручивать внутри ящика, но Divider и две ListTiles остаются неподвижными в нижней части ящика.

Output

Ответ 3

Посмотрите, в чем проблема с вашим кодом, вы добавили столбец как дочерний элемент в Drawer, поэтому все, что вы добавляете в него, размещается вертикально, а высота столбца по умолчанию уменьшается до его дочерней высоты, и она становится больше по мере роста дочернего элемента, поэтому нет смысла добавлять Align внутри столбца

Более простое решение - использовать расширенный виджет, который берет оставшийся вид пространства. Я использовал столбец и добавил виджет выше и ниже расширенного виджета.

      Drawer(
            elevation: 1.5,
            child: Column(children: <Widget>[
              DrawerHeader(
                  decoration: BoxDecoration(
                color: Colors.redAccent,
              )),
              Expanded(
                  child: ListView(
                padding: EdgeInsets.zero,
                children: <Widget>[
                  ListTile(
                    title: Text('My Cart'),
                    leading: Icon(Icons.shopping_cart),
                    onTap: () {},
                  ),
                  ListTile(
                    title: Text('My Orders'),
                    leading: Icon(Icons.add_shopping_cart),
                    onTap: () {},
                  ),
                  ListTile(
                      title: Text('Logout'),
                      leading: Icon(Icons.exit_to_app),
                      onTap: () {})
                ],
              )),
              Container(
                color: Colors.black,
                width: double.infinity,
                height: 0.1,
              ),
              Container(
                  padding: EdgeInsets.all(10),
                  height: 100,
                  child: Text("V1.0.0",style: TextStyle(fontWeight: FontWeight.bold),)),
            ])),

Heres The Ouptut

Ответ 4

вот мое решение по вертикали Row с иконками в конце ящика.

@override
  Widget build(BuildContext context) {
    return Drawer(
      child: Column(
        children: <Widget>[
          Expanded(
            child: ListView(
              children: <Widget>[
                DrawerHeader(
                  padding: const EdgeInsets.all(7),
                  decoration: BoxDecoration(
                    color: AppColors.menuHeaderColor,
                  ),
                  child: buildHeader(),
                ),
                AccountDrawerRow(),
                ListTile(
                  leading: Icon(Icons.directions_car),
                  title: Text(translations.button.vehicles),
                ),
                ListTile(
                  leading: Icon(Icons.calendar_today),
                  title: Text(translations.button.appointments,),
                ),
              ],
            ),
          ),
          Container(
            child: Align(
              alignment: FractionalOffset.bottomCenter,
              child: Container(
                padding: EdgeInsets.all(15.0),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: <Widget>[
                    InkWell(
                        onTap: () => Navigator.of(context).push(MaterialPageRoute(
                            builder: (context) => SettingsPage())),
                        child: Icon(Icons.settings)),
                    Icon(Icons.help),
                    Icon(Icons.info),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }