Je sais que je peux utiliser Drawer pour le menu de gauche mais comment puis-je le personnaliser pour le côté droit. J'ai besoin de deux menus des deux côtés.
Réponses
Trop de publicités?
Vous pouvez utiliser endDrawer
Vous pouvez copier coller le code complet ci-dessous
Extrait de code
endDrawer: Drawer(
elevation: 16.0,
child: Column(
children: [
UserAccountsDrawerHeader(
accountName: Text("xyz"),
accountEmail: Text("xyz@gmail.com"),
currentAccountPicture: CircleAvatar(
backgroundColor: Colors.white,
child: Text("xyz"),
),
otherAccountsPictures: [
CircleAvatar(
backgroundColor: Colors.white,
child: Text("abc"),
)
],
),
ListTile(
title: new Text("Toutes les boîtes de réception"),
leading: new Icon(Icons.mail),
),Démonstration en direct
Code complet
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// Ce widget est la racine de votre application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Exemple Flutter',
theme: ThemeData(
// C'est le thème de votre application.
//
// Essayez de lancer votre application avec "flutter run". Vous verrez
// que l'application a une barre d'outils bleue. Ensuite, sans quitter l'application, essayez
// de changer le primarySwatch ci-dessous en Colors.green puis invoquez
// le "hot reload" (appuyez sur "r" dans la console où vous avez lancé "flutter run",
// ou simplement enregistrez vos modifications pour un "hot reload" dans un IDE Flutter).
// Remarquez que le compteur n'est pas remis à zéro; l'application
// n'est pas redémarrée.
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Exemple de page d'accueil Flutter'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
// Ce widget est la page d'accueil de votre application. Il est stateful, ce qui signifie
// qu'il contient un objet State (défini ci-dessous) qui contient des champs qui affectent
// son apparence.
// Cette classe est la configuration pour l'état. Elle contient les valeurs (dans ce
// cas le titre) fournies par le parent (dans ce cas le widget App) et
// utilisées par la méthode build de l'État. Les champs d'une sous-classe de Widget
// sont toujours marqués "final".
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State {
int _counter = 0;
void _incrementCounter() {
setState(() {
// Cet appel à setState indique au framework Flutter qu'il y a quelque chose de
// qui a changé dans cet État, ce qui le force à relancer la méthode build ci-dessous
// pour que l'affichage puisse refléter les valeurs mises à jour. Si nous avions changé
// _counter sans appeler setState(), alors la méthode build ne serait pas
// relancée, et donc il semblerait qu'il ne se passe rien.
_counter++;
});
}
@override
Widget build(BuildContext context) {
// Cette méthode est relancée à chaque fois que setState est appelé, par exemple comme ceci
// par la méthode _incrementCounter ci-dessus.
//
// Le framework Flutter a été optimisé pour rendre les méthodes de construction plus rapides
// de sorte que vous pouvez simplement reconstruire tout ce qui a besoin d'être mis à jour plutôt
// que de devoir modifier individuellement les instances de widgets.
return Scaffold(
appBar: AppBar(
// Ici, nous prenons la valeur de l'objet MyHomePage qui a été créé
// par la méthode build de l'App, et l'utilisons pour définir le titre de notre appbar.
title: Text(widget.title),
),
drawer: Drawer(
elevation: 16.0,
child: Column(
children: [
UserAccountsDrawerHeader(
accountName: Text("xyz"),
accountEmail: Text("xyz@gmail.com"),
currentAccountPicture: CircleAvatar(
backgroundColor: Colors.white,
child: Text("xyz"),
),
otherAccountsPictures: [
CircleAvatar(
backgroundColor: Colors.white,
child: Text("abc"),
)
],
),
ListTile(
title: new Text("Toutes les boîtes de réception"),
leading: new Icon(Icons.mail),
),
Divider(
height: 0.1,
),
ListTile(
title: new Text("Primaire"),
leading: new Icon(Icons.inbox),
),
ListTile(
title: new Text("Social"),
leading: new Icon(Icons.people),
),
ListTile(
title: new Text("Promotions"),
leading: new Icon(Icons.local_offer),
)
],
),
),
endDrawer: Drawer(
elevation: 16.0,
child: Column(
children: [
UserAccountsDrawerHeader(
accountName: Text("xyz"),
accountEmail: Text("xyz@gmail.com"),
currentAccountPicture: CircleAvatar(
backgroundColor: Colors.white,
child: Text("xyz"),
),
otherAccountsPictures: [
CircleAvatar(
backgroundColor: Colors.white,
child: Text("abc"),
)
],
),
ListTile(
title: new Text("Toutes les boîtes de réception"),
leading: new Icon(Icons.mail),
),
Divider(
height: 0.1,
),
ListTile(
title: new Text("Primaire"),
leading: new Icon(Icons.inbox),
),
ListTile(
title: new Text("Social"),
leading: new Icon(Icons.people),
),
ListTile(
title: new Text("Promotions"),
leading: new Icon(Icons.local_offer),
)
],
),
),
body: Center(
// Center est un widget de mise en page. Il prend un seul enfant et le positionne
// au milieu du parent.
child: Column(
// Column est également un widget de mise en page. Il prend une liste d'enfants et
// les arrange verticalement. Par défaut, il se redimensionne pour s'adapter à
// horizontalement à ses enfants, et essaie d'être aussi haut que son parent.
//
// Invoquez "debug painting" (appuyez sur "p" dans la console, choisissez
// l'action "Toggle Debug Paint" de l'inspecteur Flutter dans Android Studio,
// ou la commande "Toggle Debug Paint" dans Visual Studio Code)
// pour voir le wireframe de chaque widget.
//
// Column a diverses propriétés pour contrôler comment il se redimensionne et
// comment il positionne ses enfants. Ici, nous utilisons mainAxisAlignment pour
// centrer les enfants verticalement; l'axe principal ici est l'axe vertical
// car les colonnes sont verticales (l'axe transversal serait
// horizontal).
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Vous avez appuyé sur le bouton autant de fois :',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Incrémenter',
child: Icon(Icons.add),
), // Cette virgule finale rend la mise en forme automatique plus agréable pour les méthodes de construction.
);
}
}
Boby
Points
687
Vous pouvez utiliser `endDrawer, https://api.flutter.dev/flutter/material/Scaffold/endDrawer.html
Scaffold(
endDrawer:populateDrawer()
);et voici le populateDrawer()
populateDrawer() {
return Theme(
data: Theme.of(context).copyWith(canvasColor: Colors.white),
child: Drawer(
child: Column(
children: [
DrawerHeader(
child: Center(
child: Image.asset("assets/images/lf_logo.png",
height: 100, width: 100),
),
),
Divider(color: Configuration.PrimaryColor),
ListTile(
leading: Icon(Icons.access_time),
title: Text('Your Activity'),
onTap: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => ActivityPage(),
),
);
},
),
ListTile(
leading: Icon(Icons.lock_outline),
title: Text('Change Password'),
onTap: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => ChangepasswordPage(userId: userId),
),
);
},
),
ListTile(
leading: Icon(Icons.feedback),
title: Text('Feedback'),
onTap: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => FeedbackPage(),
),
);
},
),
ListTile(
leading: Icon(Icons.map),
title: Text('Address Lists'),
onTap: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => AddAddress(),
),
);
},
),
Divider(
height: 50,
color: Configuration.PrimaryColor,
),
ListTile(
leading: Icon(Icons.info_outline),
title: Text('Privacy And Policy'),
onTap: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => PrivacyPolicy(),
),
);
},
),
ListTile(
leading: Icon(Icons.exit_to_app),
title: Text('Logout'),
onTap: () {
logout();
},
),
],
),
),
);
}
