web-dev-qa-db-fra.com

Comment mettre en place un menu latéral qui glisse depuis la gauche?

Je suis nouveau sur Flutter et je viens de terminer le didacticiel de prise en main. J'aimerais créer un menu latéral, qui apparaîtra du côté gauche lorsque vous balayez (comme Gmail sur Android). 

Malheureusement, je ne trouve pas une telle disposition dans la documentation et l'exemple de la galerie Flutter est un peu compliqué.

Quelqu'un pourrait-il m'expliquer comment implémenter un tel widget?

menudartflutter
6
Alexi Coard

Voici un exemple pour un tiroir simple (je viens d’adapter la configuration de projet par défaut à partir de flutter create):

import 'package:flutter/material.Dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('TestProject'),
      ),
      drawer: new Drawer(
        child: new ListView(
          children: <Widget> [
            new DrawerHeader(child: new Text('Header'),),
            new ListTile(
              title: new Text('First Menu Item'),
              onTap: () {},
            ),
            new ListTile(
              title: new Text('Second Menu Item'),
              onTap: () {},
            ),
            new Divider(),
            new ListTile(
              title: new Text('About'),
              onTap: () {},
            ),
          ],
        )
      ),
      body: new Center(
        child: new Text(
          'Center',
        ),
      ),
    );
  }
}

Les docs sont un bon endroit pour commencer;) 

Btw: y compris un tiroir dans votre échafaud prend également en charge le bouton de menu et le geste de balayage gauche pour vous.

18
Rainer Wittmann

L'exemple Actions utilise un peu moins compliqué de Drawer .

3
Collin Jackson

Dans l'échafaudage, spécifiez simplement la drawer: Drawer()

Exemple:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: Drawer(   // this will set the drawer
        child: MyWidget // render your drawer Widget here
      ),
      ... // props hidden
    );
  }
}
0
Aravind Vemula