Flutter: menu swipe

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

My helpful screenshot

Installation du plugin : menu_swipe_helpers

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

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).

Créer une page

Créer un Widget Stateful, la partie state doit implémenter le mixin DrawerStateMixin.

Le mixin va gérer pour vous la mise en page, vous pouvez surcharger tous les éléments (buildBody, buildAppBar, buildActions, buildPersistentFooterButtons, buildFloatingButton) afin de personnaliser les affichages.

class FirstPage extends StatefulWidget {
  @override
  _FirstPage createState() => new _FirstPage();
}

class _FirstPage extends State<FirstPage> with DrawerStateMixin {
  @override
  String get title => "First Page";
}

Définir les menus

Créer une classe qui implemente l’interface DrawerDefinition. A noter que le builder doit permettre de construire la page à afficher.

class FirstPageDefinition implements DrawerDefinition {
  @override
  Icon get icon => const Icon(Icons.home);

  @override
  String get subtitle => null;

  @override
  String get title => "First page";

  @override
  Widget builder(BuildContext context) {
    return new FirstPage();
  }
}

Créer instancier la classe DrawerHelper avec comme paramètre une liste de DrawerDefinition.

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

Le mécanisme de mise à jour du menu et de la page est basé sur le package flutter_redux. Il faut créer quelques classes qui seront utilisées par ce package.

Commençons par le Store, il doit étendre l’interface DrawerStore.

class AppState implements DrawerStore {
  final Widget activeDrawer;
  final DrawerDefinition activePage;
  
  AppState({this.activeDrawer, this.activePage});
}

Créer maintenant un ‘reducer’, c’est lui qui sera chargé de propager les actions.

AppState appReducer(AppState state, action) {
  return new AppState(
      activeDrawer: drawerReducer(state.activeDrawer, action),
      activePage: pageReducer(state.activePage, action));
}

Créer l’instance du Store.

final store = new Store<AppState>(
  appReducer,
  initialState: new AppState(
      activeDrawer: _drawerBuilder,
      activePage: _drawerBuilder.drawerContents.first
  )
);

Il ne reste plus qu’a créer le composant racine de notre application. Il faut encadrer le composant MaterialApp par un StoreProvider qui embarquera le Store créé précédemment.

  @override
  Widget build(BuildContext context) {
    return new StoreProvider(
      store: store,
      child: new MaterialApp(
          title: 'Flutter Demo',
          theme: new ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: new ActivePage()),
    );
  }

Et voilà …

Sources

Plugins et exemples : menu_swipe_helpers