Кнопка выравнивания флаттера до нижней части ящика
Я пытаюсь установить виджет в нижней части моего 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'),
),
],
),
),
Нижний текст должен быть выровнен в нижней части ящика, но это не так!
Ответы
Ответ 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 остаются неподвижными в нижней части ящика.
Ответ 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),)),
])),
Ответ 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),
],
),
),
),
),
],
),
);
}