GridView dans Flutter

Après avoir créé un menu drawer dans notre article précédent, nous allons voir comment faire une GridView dans Flutter. On peut retrouver la mise en place officielle dans la doc Flutter.

Tout d’abord, un peu d’explications. La Gridview va nous permettre d’ajouter des éléments sous forme de grille, plutôt que sous forme de liste, même si on peut très bien créer une grille d’un seul élément. Les éléments vont s’afficher les uns après les autres automatiquement.

C’est l’un des composants incontournables dans une application mobile. Il nous offre la possibilité de faire une liste récapitulative de plusieurs informations, et offre le choix de cliquer dessus pour afficher plus de détails. Dans notre exemple, nous allons faire une liste d’images avec un titre qui redirige sur une page avec plus de contenus.

Créer un objet pour ma GridView

Avant de mettre en place notre GridView dans Flutter, nous allons créer une liste d’objects. Notre object sera très simple : juste un id, une image et un titre. Notre liste contiendra plusieurs objects de ce type. Nous pouvons tout à fait la rendre dynamique avec la récupération d’un json à travers un webservice, mais restons sur les bases pour l’instant.

Voici mon object Artiste. Dans un premier temps, vous pouvez créer un nouveau fichier Dart et le lier à votre fichier qui contient la gridview.

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

class Artiste {

int _id;
String _image;
String _title;

Artiste(int id, String images, String title) {
this._id = id;
this._image = images;
this._title = title;
}

int get id => _id;

set id(int value) {
_id = value;
}

String get image => _image;

set image(String value) {
_image = value;
}

String get title => _title;

set title(String value) {
_title = value;
}
}

Une fois votre object créé, vous pouvez remplir votre liste, qui sera appelée dans notre gridview.

1
2
3
4
5
6
7
8
9
10
11

List<Artiste> data = [
new Artiste(1,"https://musikplease.com/wp-content/uploads/sites/17/2016/08/Alborosie_Freedom_Fyah.jpg", "La pochette de l'album en vente ce 28 mars"),
new Artiste(2,"https://musikplease.com/wp-content/uploads/sites/17/2016/08/Alborosie_Freedom_Fyah.jpg", "La pochette de l'album en vente ce 28 mars"),
new Artiste(3,"https://musikplease.com/wp-content/uploads/sites/17/2016/08/Alborosie_Freedom_Fyah.jpg", "La pochette de l'album en vente ce 28 mars"),
new Artiste(4,"https://musikplease.com/wp-content/uploads/sites/17/2016/08/Alborosie_Freedom_Fyah.jpg", "La pochette de l'album en vente ce 28 mars"),
new Artiste(5,"https://musikplease.com/wp-content/uploads/sites/17/2016/08/Alborosie_Freedom_Fyah.jpg", "La pochette de l'album en vente ce 28 mars"),
new Artiste(6,"https://musikplease.com/wp-content/uploads/sites/17/2016/08/Alborosie_Freedom_Fyah.jpg", "La pochette de l'album en vente ce 28 mars"),
new Artiste(7,"https://musikplease.com/wp-content/uploads/sites/17/2016/08/Alborosie_Freedom_Fyah.jpg", "La pochette de l'album en vente ce 28 mars"),
new Artiste(8,"https://musikplease.com/wp-content/uploads/sites/17/2016/08/Alborosie_Freedom_Fyah.jpg", "La pochette de l'album en vente ce 28 mars"),
new Artiste(9,"https://musikplease.com/wp-content/uploads/sites/17/2016/08/Alborosie_Freedom_Fyah.jpg", "La pochette de l'album en vente ce 28 mars")
];

Utiliser une GridView dans flutter

Maintenant que nous avons notre object et notre liste d’objects, nous allons pouvoir créer notre GridView dans Flutter.

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

@override
Widget build(BuildContext context) {

return new GridView.count(
crossAxisCount: 2,
children: List.generate(data.length, (index) {

return new GestureDetector(

child: new Stack(

children: <Widget>[

Align(
alignment: Alignment.center,
child: new Image.network(
data[index]._image,
fit: BoxFit.fill,
),
),

Align(
alignment: Alignment.bottomLeft,

child: Padding(
padding: EdgeInsets.all(5.0),
child: Text(
data[index]._title,
style: TextStyle(
fontSize: 14.0,
color: Colors.white,
),
),
),

),

]

),

onTap: () {

Navigator.push(
context,
MaterialPageRoute(
builder: (context) => InfoScreen(idArtiste: data[index]._id),
),
);
},
);

}),
);

Navigation vers nouvelle page

Enfin, nous pouvons ajouter un GestureDetector pour rendre cliquable la cellule de notre grille.

Dans le onTap() nous faisons une page route vers une nouvelle vue en envoyant l’id de notre object.
Pour récupérer l’id dans notre vue détails, il vous suffit d’ajouter :

1 2	final int idArtiste; InfoScreen({Key key, @required this.idArtiste}) : super(key: key);

VOUS EN VOULEZ ENCORE ?

CHANGER D'UNIVERS !

Archives Vidéos

The Blog

L’instagrume

Application Mobile |