Bouton d'alignement Flutter en bas du tiroir

Question

J'essaie de faire aligner un widget sur le bas de mon NavDrawer tout en conservant un DrawerHeader et une liste en haut du tiroir. Voici ce que j'essaye:

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

Le texte du bas doit être aligné sur le bas du tiroir, mais ce n'est pas le cas!

Answer 1

Vous devez envelopper votre widget Align dans 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'),
        ),
      ),
    ],
  ),
),

Answer 2

Un peu tard pour la fête, mais voici ma solution à ce problème:

  @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'))
                    ],
                  )
                )
              )
            )
        ],
      ),
    );
  }

Cela produit la sortie ci-dessous dans laquelle UserAccountDrawerHeader et les éléments de texte peuvent défiler à l'intérieur du tiroir, mais le séparateur et les deux ListTiles restent statiques au bas du tiroir.

Answer 3

si vous avez un problème avec votre code, vous avez ajouté une colonne en tant qu’enfant au tiroir de sorte que tout ce que vous y ajoutez soit placé verticalement et que la hauteur de la colonne soit réduite par défaut à la taille de ses enfants. il n'y a aucun intérêt à ajouter un alignement dans une colonne

La solution la plus simple consisterait à utiliser un widget développé qui prend le dernier aspect de l'espace. J'ai utilisé une colonne et ajouté un widget au-dessus et au-dessous du widget développé.

      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),)),
            ])),

Answer 4

voici ma solution d'un Row vertical avec des icônes au bout du tiroir.

@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),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }