Una buena opción para que los usuarios naveguen por nuestra aplicación es usar Drawer, que nos permite mostrar el típico menú que aparece desde un lateral.
Es algo tan común, que el propio Widget Scaffold tiene una propiedad especialmente pensada para eso.
Si partimos de una aplicación básica con un Scaffold como la siguiente.
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
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'My app title',
home: new HomeScreen()
);
}
}
class HomeScreen extends StatelessWidget{
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(
title: Text('Mi App'),
backgroundColor: Colors.red,
),
body: Center(
child: Center(
child: Text('Mi contenido'),
)
),
);
}
}
Podemos usar la propiedad «drawer» del Scaffold para añadir un componente «Drawer». Podemeos poner dentro el contenido que queramos, pero normalmante el child de este componente será un ListView con los diferentes elementos que queremos que aparezcan en él. Vamos a crear un ejemplo básico con un par de textos dentro.
2
3
4
5
6
7
8
9
10
11
12
13
return new Scaffold(
...
drawer: Drawer(
child: new ListView(
children: <Widget>[
Text('Primero elemento!'),
Text('Segundo elemento!')
],
)
),
);
...
Tras darle valor a la propiedad drawer, vemos cómo aparece el menú de «hamburguesa» en la parde izquierda del appbar. Al pulsar sobre ese elemento o al desplazar el dedo desde la parte izquierda de la pantalla, aparece nuestro menú con los dos textos que hemos añadido.
Para que los textos del menú no queden tan cutres, podemos usar widgets ListTile. Por defecto nos dará algo de espacio entre los elementos y nos ofrecen algunas propiedades interesantes como «leading» para añadir iconos.
2
3
4
5
6
7
8
9
10
11
12
13
14
15
child: new ListView(
children: <Widget>[
ListTile(
title: Text('Primero elemento!'),
leading: Icon(Icons.home),
),
ListTile(
title: Text('Segundo elemento!'),
leading: Icon(Icons.settings),
),
],
)
),
Normalmente, los menús drawer tienen una especie de cabecera. Para crear esta cabecera existe una clase llamada DrawerHeader que podemos usar como primer elemento del ListView.
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
child: new ListView(
children: <Widget>[
DrawerHeader(
child: Text("Cabecera Drawer"),
decoration: BoxDecoration(
color: Colors.red,
),
),
ListTile(
title: Text('Primero elemento!'),
leading: Icon(Icons.home),
),
ListTile(
title: Text('Segundo elemento!'),
leading: Icon(Icons.settings),
),
],
)
),
Con las propiedades de DrawerHeader podemos definir los elementos que queramos para conseguir la cabecera que necesitemos, pero si lo que queremos es una típica cabecera con información de usuario podemos usar UserAccountsDrawerHeader, una implementación especial con algunas propiedades especialmente pensadas para eso.
Por ejemplo podemos usar las propiedades accountName, accountEmail y currentAccountPicture para añadir el nombre de usaurio, el email y la imagen respectivamente (aunque para no complicar este ejemplo simplemente mostaremos un avatar circular con un color de fondo).
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
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'My app title',
home: new HomeScreen()
);
}
}
class HomeScreen extends StatelessWidget{
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(
title: Text('Mi App'),
backgroundColor: Colors.red,
),
body: Center(
child: Center(
child: Text('Mi contenido'),
)
),
drawer: Drawer(
child: new ListView(
children: <Widget>[
UserAccountsDrawerHeader(
accountName: Text("Guillermo García"),
accountEmail: Text("email@prueba.es"),
currentAccountPicture: CircleAvatar(backgroundColor: Colors.white),
decoration: BoxDecoration(
color: Colors.red,
),
),
ListTile(
title: Text('Primero elemento!'),
leading: Icon(Icons.home),
),
ListTile(
title: Text('Segundo elemento!'),
leading: Icon(Icons.settings),
),
],
)
),
);
}
}
Como ves, puedes incluir un menú drawer con flutter de forma muy sencilla en tu app. Si quieres echarle un ojo al código de este ejemplo, lo tienes por aquí en mi github:
https://github.com/guillegarcia/flutter_samples/blob/master/lib/drawer_sample.dart