Ce post est une version revisité du précédent code suite à la suppression de redux du plugin menu_swipe_helpers.

Comment réaliser un menu swipe (burger) dans une application Flutter.

My helpful screenshot

Installation du plugin : menu_swipe_helpers

  1. ajout de la dépendance dans le fichier pubspec.yaml du projet
menu_swipe_helpers:
    git:
      url: https://github.com/fidelisa/flutter_plugins.git
      path: packages/menu_swipe_helpers

flutter packages get
  1. import du packet (ex: dans main.dart)
import 'package:menu_swipe_helpers/menu_swipe_helpers.dart';

Utilisation du plugin

Le déroulé présenté ici utilise tous les helpers du plugin mais vous pouvez à tout moment utiliser des classes de base (voir ThirdPage dans exemple).

Définir les menus

Créer un object de type DrawerDefinition. A noter que le builder doit permettre de construire la page à afficher.

var _firstPage = new DrawerDefinition(
    title: "First page",
    iconData: Icons.home,
    widgetBuilder: (BuildContext context) =>
        new FirstPage(title: "First Page"));

Créer un menu

Créer un objet de type DrawerHelper avec comme paramètre une liste de DrawerDefinition.

var _drawerBuilder =  new DrawerHelper(
  drawerContents: [
    _firstPage
  ]
);

Mettre en place le fournisseur de menu

Il suffit d’envelopper la première page de votre application par DrawerProvider et de lui indiquer quel menu mettre en place.

return new MaterialApp(
  title: 'Flutter Demo',
  theme: new ThemeData(
    primarySwatch: Colors.blue,
  ),
  home: new DrawerProvider(
    drawer: _drawerBuilder,
    child: new FirstPage(
      title: "First Page",
    ),
  ),
);

Et voilà …

Sources

Plugins et exemples : menu_swipe_helpers