Comment implémenter un widget de menu sur iOS équivalent au tiroir Android (Material) dans Flutter?
4 Réponses :
Il n'existe pas de widget de menu alternatif simple dans iOS, car Apple ne recommande pas du tout les tiroirs .
Un tiroir est un type d'élément d'interface qui contient des options ou des informations lié à une fenêtre spécifique. Un tiroir est masqué par défaut et peut ne sera révélé que lorsque la fenêtre parent est visible à l'écran. Lorsque révélé, généralement en réponse à un bouton, un menu ou une action, le le tiroir glisse d'un côté de la fenêtre du parent. Un tiroir ne peut pas être déplacé séparément ou détaché de sa fenêtre parente.
Évitez d'utiliser des tiroirs. Les tiroirs sont rarement utilisés dans les applications modernes et leur l'utilisation est déconseillée. Les panneaux, popovers, barres latérales et vues fractionnées sont préféré pour afficher le contenu de la fenêtre supplémentaire.
Solution rapide
Exemple
L'équipe Flutter a préparé un exemple complet de conception d'applications multiplateformes Android / iOS .
L'exemple lié est open source, mais certains extraits de code peuvent également être utiles ici dans la réponse.
Vous pouvez le construire vous-même. Vous pouvez utiliser Positioned et GestureDetector , par exemple. Que vous pouvez animer c'est en mouvement. Cela se fait très facilement.
Placez simplement le Tiroir dans l'attribut endDrawer de Scaffold , exemple:
Drawer(
child: ListView(shrinkWrap: true,
children: <Widget>[
UserAccountsDrawerHeader(
decoration: BoxDecoration(
color: myColour,
),
accountName:
Padding(child: Row(
children: <Widget>[
Text("Marcelo Augusto Elias"),
IconButton(
icon: Icon(
Icons.edit,
color: whiteColour,
),
onPressed: () {},
),
],
), padding: EdgeInsets.only(top: 10),),
accountEmail: Text("N° Cartão: XXXX XXXX XXXX 5154"),
currentAccountPicture: CircleAvatar(
backgroundColor:
Theme.of(context).platform == TargetPlatform.iOS
? myColour
: Colors.white,
child: Icon(
Icons.person,
size: 50,
),
),
),
ListTile(
dense: true,
title: Text("Fatura"),
leading: new Image.asset(
"assets/images/icon_fatura_barra_menu.png",
width: 20.0,
),
onTap: () {
Navigator.pop(context);
Navigator.push(
context,
MaterialPageRoute(builder: (context) => Fatura()),
);
},
),
ListTile(
onTap: () {
Navigator.pop(context);
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ConsultaMargem()),
);
},
dense: true,
title: Text("Extrato"),
leading: new Image.asset(
"assets/images/icon_barra_menu_extrato.png",
width: 20.0,
),
),
ListTile(
onTap: () {
Navigator.pop(context);
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => DesbloquearPrimeiraVia()),
);
},
dense: true,
title: Text("Desbloquear Cartão"),
leading: new Image.asset(
"assets/images/icon_barra_menu_desbloquearcartao.png",
width: 24.0,
),
),
ListTile(
dense: true,
title: Text("Meu Cartão"),
leading: new Image.asset(
"assets/images/icon_barra_menu_meucartao.png",
width: 20.0,
),
onTap: () {
Navigator.pop(context);
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => Contracheques()),
);
},
),
ListTile(
onTap: () {
Navigator.pop(context);
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => HistoricoConsignacoes()),
);
},
dense: true,
title: Text("Adiantamento Salarial"),
leading: new Image.asset(
"assets/images/icon_barra_menu_adiantamentosalarial.png",
width: 20.0,
),
),
/* ListTile(
onTap: () {
Navigator.pop(context);
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ConsultaMargem()),
);
},
dense: true,
title: Text("Consulta de Margem"),
leading: new Image.asset(
"assets/images/icon_consulta_margem.png",
width: 20.0,
),
), */
/* ListTile(
dense: true,
title: Text("Informe de Rendimentos"),
leading: new Image.asset(
"assets/images/icon_rendimento.png",
width: 20.0,
),
), */
/* ListTile(
onTap: () {
Navigator.pop(context);
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => SimularEmprestimos()),
);
},
dense: true,
title: Text("Simular Empréstimo"),
leading: new Image.asset(
"assets/images/Icon_cal.png",
width: 20.0,
),
), */
Divider(),
ListTile(
dense: true,
title: Text("Compartilhar"),
leading: new Image.asset(
"assets/images/icon_compartilhar.png",
width: 20.0,
),
),
ListTile(
dense: true,
title: Text("Avaliar"),
leading: new Image.asset(
"assets/images/icon_estrela.png",
width: 20.0,
),
),
Divider(),
ListTile(
onTap: () {
Navigator.pop(context);
},
dense: true,
title: Text("Sair"),
trailing: Text(
"Versão 2.0",
style:
TextStyle(fontWeight: FontWeight.bold, fontSize: 12),
),
leading: new Image.asset(
"assets/images/icon_porta_sair.png",
width: 20.0,
),
),
],
),
)
Et où est l'alternative iOS?
Btw, ListView ne semble actuellement pas fonctionner du tout sur iOS.
Si vous le souhaitez vraiment, vous pouvez contourner le problème en définissant une page que vous utilisez dans le tiroir pour Android et comme une autre page pour iOS:
onGenerateRoute: (route){
if (route.name == AppSettings.pageRoute) {
return PageTransition(
child: AppSettings(),
type: PageTransitionType.leftToRight,
settings: route,);
}
... puis lui donner un sensation "tiroir-ish" en faisant glisser la page à partir de la gauche:
Widget settingsWheel = Platform.isAndroid
? Builder(builder: (BuildContext context) => IconButton(
icon: settingsIcon,
onPressed: () => Scaffold.of(context).openDrawer(),
tooltip: "Open App Settings",
))
: Builder(builder: (BuildContext context) => CupertinoButton(
child: settingsIcon,
onPressed: () => Navigator.pushNamed(context, AppSettings.pageRoute),
));