Comment créer un menu avec Flutter ?

Créer un menu latéral est très facile avec Flutter et en moins d’une minute vous serez capable d’ajouter un menu à votre application.

Création d’un menu en bas de page avec flutter

Tout d’abord, pour suivre ce tutoriel, avoir des connaissances en développement avec Flutter vous sera d’une grande aide.

Pour créer un tel menu, nous allons utiliser la class « BottomNavigationBar » .

Comme notre barre de navigation va changer d’état selon si l’utilisateur clique dessus ou non, il va falloir utiliser un « StatefulWidget ».

Commencez par coller le code suivant qui nous servira de base:

import 'package:flutter/material.dart';


void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

@override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyBottomBarWidget(),
    );
  }
} 

Nous allons donc créer une classe « MybottomBarWidget » et créer un état nouveau.

class MyBottomBarWidget extends StatefulWidget{
  MyBottomBarWidget({Key key}) : super(key: key);
  @override
  _MyBottomBarWidgetState createState() => _MyBottomBarWidgetState();

}

Ensuite nous créons le nouvel état de notre class en y ajoutant un « integer » qui vaudra zéro puisqu’il s’agit du numéro de la page qui sera sélectionné par défaut. Nous ajoutons une fonction « Void » pour que la valeur de « _pageIndex » soit égale à celle de l’index sur lequel tape l’utilisateur. Nous procédons donc comme suit en l’insérant dans la class  » _MyBottomBarWidgetState »

  int _pageIndex = 0;

  void _incrementTab(index) {
    setState(() {
      _pageIndex = index;
    });
  }

Ensuite, on créer un widget build qui accueillera notre « BottomNavigationBar »

   @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Text('Bottom Navigation bar'),
        ),
        body: new Center(
          child: new Text('Look at my fancy bottom'),
        ),
        bottomNavigationBar: BottomNavigationBar(
          currentIndex: _pageIndex,
          items: [
            BottomNavigationBarItem(
                icon: Icon(Icons.add_alarm, color: Colors.red),
                title: new Text('Page 1')),
            BottomNavigationBarItem(
                icon: Icon(Icons.ac_unit, color: Colors.yellow),
                title: new Text('Page 2')),
            BottomNavigationBarItem(
                icon: Icon(Icons.add_alert, color: Colors.blue),
                title: new Text('Page 3')),
            BottomNavigationBarItem(
                icon: Icon(Icons.add,
                    color: Colors.green),
                title: new Text('Page 4'))
          ],
          onTap: (index) {
            _incrementTab(index); 
          },
        ));
  }

Comme vous pouvez le constater, le widget « currentIndex » attend un integer en retour car il cherche à savoir quel index renvoyer. Ici, nous avons trois pages donc trois index. La fonction « Void » onTap signifie qu’à chaque fois que l’utilisateur tape sur un index, la valeur de _pageIndex change et donc que l’on passe à une nouvelle page.

          onTap: (index) {
            _incrementTab(index);
          }

Résultat

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyBottomBarWidget(),
    );
  }
}

class MyBottomBarWidget extends StatefulWidget {
  MyBottomBarWidget({Key key}) : super(key: key);
  @override
  _MyBottomBarWidgetState createState() => _MyBottomBarWidgetState();
}

class _MyBottomBarWidgetState extends State {
  int _pageIndex = 0;

  void _incrementTab(index) {
    setState(() {
      _pageIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Text('Bottom Navigation bar'),
        ),
        body: new Center(
          child: new Text('Look at my fancy bottom'),
        ),
        bottomNavigationBar: BottomNavigationBar(
          currentIndex: _pageIndex,
          items: [
            BottomNavigationBarItem(
                icon: Icon(Icons.add_alarm, color: Colors.red),
                title: new Text('Page 1')),
            BottomNavigationBarItem(
                icon: Icon(Icons.ac_unit, color: Colors.yellow),
                title: new Text('Page 2')),
            BottomNavigationBarItem(
                icon: Icon(Icons.add_alert, color: Colors.blue),
                title: new Text('Page 3')),
            BottomNavigationBarItem(
                icon: Icon(Icons.add,
                    color: Colors.green),
                title: new Text('Page 4'))
          ],
          onTap: (index) {
            _incrementTab(index);
          },
        ));
  }
}

Création d’un bottom navigation bar avec routes

Notez aussi que les  » BottomNavigationBarItem  » peuvent renvoyer à d’autres pages comme ceci:

Résultat

class MyBottomBarWidget extends StatefulWidget {
  MyBottomBarWidget();

  @override
  _MyBottomBarWidgetState createState() => _MyBottomBarWidgetState();
}

int _selectedIndex = 0;


class _MyBottomBarWidgetState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView(
        physics: ClampingScrollPhysics(),
        onPageChanged: (index) {
          pageChanged(index);
        },
        controller: _pageController,
        children: [
          Page1(),
          Page2(),
          Page3(),
          Page3(),
        ],
      ),
      bottomNavigationBar: navyBottomBar(),
    );
  }

  @override
  void initState() {
    super.initState();
  }

  void pageChanged(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  void bottomTapped(int index) {
    setState(() {
      _selectedIndex = index;
      _pageController.animateToPage(index,
          duration: Duration(milliseconds: 500), curve: Curves.ease);
    });
  }

  PageController _pageController = PageController(
    initialPage: 0,
    keepPage: true,
  );
  Widget navyBottomBar() {
    return BottomNavyBar(
      backgroundColor: Color(0xFF090418),
      selectedIndex: _selectedIndex,
      showElevation: true, // use this to remove appBar's elevation
      onItemSelected: (index) {
        bottomTapped(index);
      },
      items: [
        BottomNavyBarItem(
          icon: Icon(Icons.apps),
          title: Text('Page 1'),
          activeColor: Colors.white,
        ),
        BottomNavyBarItem(
            icon: Icon(Icons.pan_tool),
            title: Text('Page 2'),
            activeColor: Colors.purpleAccent),
        BottomNavyBarItem(
            icon: Icon(Icons.favorite),
            title: Text('Page 3'),
            activeColor: Colors.pink),
        BottomNavyBarItem(
            icon: Icon(Icons.settings),
            title: Text('Page 4'),
            activeColor: Colors.blue),
      ],
    );
  }
}

Création d’un menu latéral (drawer)

La création d’un menu latéral est quelque part encore plus simple. Nous allons ici utiliser le widget « drawer« .

Tout d’abord nous allons réutiliser le code précédemment défini:

 import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Menu project',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Menu project'),
        ),
        body: Center(
          child: Text('Look at my fancy bottom bar!'),
        ),
      ),
    );
  }
} 

Puis ensuite nous ajoutons notre drawer dans notre Scaffold.

Scaffold(
  drawer: Drawer(
    child: 
  )
);

N’oubliez pas que le langage Dart est un langage case sensitive c’est à dire qu’il réagit différemment s’il s’agit d’une majuscule ou d’une minuscule. Donc faite bien la différence entre le drawer qui est uniquement un widget déclaratif qui signifie que nous allons ajouter un widget en lieu et place du drawer qui concerne toute la partie latérale de notre smartphone. Nous devons ensuite ajouter un widget « ListView » au sein du child de notre widget. Le ListView est comme son nom l’indique un widget qui permet en fait de créer une liste de widgets. Comme il s’agit d’une liste de widget, cela signifie que le ListView contiendra plusieurs widgets donc nous devrons nécessairement ajouter un children à notre ListView.

Ajouter un widget ListTile

Nous insérons donc notre Listview comme suit avec un ListTile. Et oui ajouter un widget ListView n’est pas suffisant. Il faut le peupler de « row » c’est à dire de rangée pour mettre les éléments de notre menu.

Pour ajouter une rangée, vous n’avez qu’à ajouter un widget ListTile à la suite.

Drawer(
  child: ListView(
    children: [
      ListTile(
        title: Text('Page 1'),
        onTap: () {
        },
      ),
      ListTile(
        title: Text('Page 2'),
        onTap: () {
        },
      ),
    ],
  ),
);

Vous n’avez qu’a paramétrer la fonction Void « onTap » pour renvoyez votre utilisateur à une page donnée.

Pour l’exemple nous créerons une page par la suite appelée « Page2″qui sera la page vers laquelle on redirigera l’utilisateur. On insert donc la ligne de code suivante à l’intérieur de notre « onTap » fonction:

onTap: () { Navigator.push(context, MaterialPageRoute(builder: (context) => Page2()));}

Créer une seconde page

Vous devez ainsi créer une seconde page vers laquelle rediriger l’utilisateur sous le fichierlib/main.dart . Nommez le comme vous désirez.

Sur notre nouvelle page vierge on insère le code suivant pour signifier qu’il s’agit d’une nouvelle page en donnant un nom à la classe qui contiendra notre code; ici « Page2 ».

import 'package:flutter/material.dart';

class Page2 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Page 2'),
),
body: Center(
child: Text('Ceci est la page 2'),
),
);
}
}

Résultat

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Menu project',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Menu project'),
        ),
        drawer: Drawer(
          child: ListView(
            children: [
              ListTile(
                title: Text('Page 1'),
                onTap: () {},
              ),
              ListTile(
                title: Text('Page 2'),
                onTap: () {},
              ),
            ],
          ),
        ),
        body: Center(
          child: Text('Look at my fancy bottom bar!'),
        ),
      ),
    );
  }
}

Et voilà, notre page redirige l’utilisateur directement vers la deuxième page. Vous avez réussi à créer votre premier menu latéral avec flutter!

Créez un menu latéral avec Flutter

Découvrez aussi comment publiez votre application sur le Play Store

Laisser un commentaire