Je développe une application utilisant le flutter, je dois afficher la première page et j'ai créé des sous-pages. Mon problème est que je ne sais pas comment afficher une deuxième page lorsque vous cliquez sur un élément. Exemple: j'ai créé une grille de 8 boîtes et chaque boîte doit afficher une page unique en le clic. I.E. Point 1 retourne page 1, élément 2 renvoie la page 2, élément 3 retourne page 3 ... etc.
Voici une capture de la première page
3 Réponses :
Ce dont vous avez besoin est le navigateur objet. En flutter, il est utilisé pour naviguer dans l'utilisateur entre les écrans en ayant un écran initial, puis en empilez davantage sur le dessus. C'est un bon tutoriel sur les bases .
En général bonne pratique consiste à utiliser des itinéraires nommés ( Tutoriel ici ) Mais vous n'avez pas besoin d'utiliser des itinéraires nommés pour utiliser le navigateur. Dans votre exemple, vous pouvez mettre ci-dessous les éléments suivants dans un argument traformé sur chaque élément:
Vous pouvez y parvenir avec l'exemple de code suivant. Avec le navigateur, vous pouvez passer à la page suivante et l'afficher.
class NavigatorPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: GridView.builder(
itemCount: 4,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
itemBuilder: (BuildContext context, int index) {
return GestureDetector(
onTap: () => nextPage(context, index),
child: Card(
...
),
);
},
),
),
);
}
void nextPage(BuildContext context, int index) {
if (index == 0) {
Navigator.push(context, MaterialPageRoute(builder: (context) => Page1()));
} else if (index == 1) {
Navigator.push(context, MaterialPageRoute(builder: (context) => Page2()));
}
...
}
}
sur le premier écran, écrivez ce code.
Navigator.push(
context,
MaterialPageRoute(
builder: (BuildContext context) {
return SecondScreen()
);
},
);
Pouvez-vous ajouter du code. Faire peut-être que ce sera clair.
Avez-vous résolu votre problème avec le code ci-dessous?