l’atelier 20 May 2019

Menu BottomNavigationBar dans Flutter

Menu BottomNavigationBar dans Flutter Vous avez certainement lu notre dernier article sur le menu drawer dans Flutter. Aujourd’hui, nous allons donc voir son Outsider, le menu BottomNavigationBar dans Flutter. Adoptant quasiment la même méthodologie de création que son confrère, nous…

Menu BottomNavigationBar dans Flutter

Vous avez certainement lu notre dernier article sur le menu drawer dans Flutter. Aujourd’hui, nous allons donc voir son Outsider, le menu BottomNavigationBar dans Flutter. Adoptant quasiment la même méthodologie de création que son confrère, nous utiliserons cette fois-ci le widget BottomNavigationBar, déjà présent dans le SDK de Flutter.

À l’inverse d’utiliser une ListTile, nous allons nous servir d’items. Nous garderons la logique de title et leading, remplacé par une icone pour afficher notre texte et notre image. Pour bien le comparer à notre premier article, nous allons reprendre les mêmes variables, les mêmes méthodes et les mêmes « fragments. »

Création du menu Bottom Navigation Bar

À l’intérieur de votre scaffold, instanciez votre bottomNavigationBar et votre body. Vous pouvez également ajouter une appBar si besoin.

Dans votre bottomNavigationBar, ajoutez un currentIndex pour définir l’item en cours, un onTap pour l’action au clic, et votre liste d’items avec une icone et un title. Notre icone est un new ImageIcon. Pour utiliser une image custom de notre asset, vous pouvez utiliser une simple Icon.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

import ‘package:flutter/material.dart’;
import ‘first_fragment.dart’;
import ‘second_fragment.dart’;
import ‘third_fragment.dart’;

class HomeScreen extends StatefulWidget {
@override
_HomeScreenState createState() => new _HomeScreenState();
}

class _HomeScreenState extends State {

int _selectedDrawerIndex = 0;

_getDrawerItemWidget(int pos) {
switch (pos) {
case 0:
return new FirstFragment();
case 1:
return new SecondFragment();
case 2:
return new ThirdFragment();

default:
return new Text("");
}
}

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

@override
Widget build(BuildContext context) {
return new Scaffold(

bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
currentIndex: _selectedDrawerIndex,
onTap: (int index) {
setState(() {
_selectedDrawerIndex = index;
});
},

items: [
new BottomNavigationBarItem(
icon: new ImageIcon(
AssetImage(‘images/ic_logo_large.png’)
),
title: new Text(‘Home’)
),

new BottomNavigationBarItem(
icon: new ImageIcon(
AssetImage(‘images/ic_logo_large.png’)
),
title: new Text(‘Messages’)
),

new BottomNavigationBarItem(
icon: new ImageIcon(
AssetImage(‘images/ic_logo_large.png’)
),
title: Text(‘Profile’)
)

body: _getDrawerItemWidget(_selectedDrawerIndex),

);
}
}

Création des Fragments

Et voici l’équivalent des fragments qui vous permettent de définir l’intérieur de votre vue des onglets 1, 2 et 3. Dans notre exemple, nous affichons un simple texte composé de hello fragment 1…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

import ‘package:flutter/material.dart’;

class FirstFragment extends StatefulWidget {
@override
_FirstFragmentState createState() => _FirstFragmentState();
}

class _FirstFragmentState extends State {

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

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

@override
Widget build(BuildContext context) {
return new Center(
child: new Text("Hello Fragment 1"),
);
}
}