Comment naviguez-vous vers un nouvel écran dans Flutter?
Ces questions sont similaires, mais demandent plus que moi.
J'ajoute une réponse ci-dessous.
7 Réponses :
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(primarySwatch: Colors.blue),
home: HomeScreen(),
);
}
}
class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Home Screen')),
body: Center(
child: RaisedButton(
child: Text(
'Navigate to a new screen >>',
style: TextStyle(fontSize: 24.0),
),
onPressed: () {
_navigateToNextScreen(context);
},
),
),
);
}
void _navigateToNextScreen(BuildContext context) {
Navigator.of(context).push(MaterialPageRoute(builder: (context) => NewScreen()));
}
}
class NewScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('New Screen')),
body: Center(
child: Text(
'This is a new screen',
style: TextStyle(fontSize: 24.0),
),
),
);
}
}
où context est le BuildContext d'un widget et NewScreen est le nom de la deuxième disposition de widget.
main.dart
Navigator.of(context).push(MaterialPageRoute(builder: (context) => NewScreen()));
et quelle en est la raison? tu fais ça tous les deux jours ... pourquoi? peut-être devriez-vous écrire un blog ou quelque chose?
@westdabestdb il le fait 3 à 4 fois par semaine, je n'ai aucune idée de ce à quoi ça sert ...
@westdabestdb "and we all know Flutter has well-written documentation." - eh bien, je dirais que ... ;-(
@pskink J'aime honnêtement leur documentation. C'était pire que l'actuel, mais leur dernier polissage et amélioration de flutter.io ont beaucoup amélioré les choses.
@westdabestdb est sûr que vous avez raison, mais quand même, je me retrouve assez souvent après avoir lu de nouveaux documents pendant environ 10 minutes, je vais aux fichiers source de la classe et ils me disent ce qui se passe mieux et plus vite que les documents correspondants ...
@pskink Certes, la lecture du code source est 10 fois meilleure que de passer du temps avec des documents, donc faire les deux est le chemin vers la solution.
Je réponds aux questions sur le SO car cela m'aide à mieux apprendre. Presque chaque question à laquelle je réponds est une question que je me pose moi-même. Quand j'ai une question, je la recherche sur Google. Si je ne trouve pas de réponse rapide ou de duplicata sur SO, j'écris une paire de questions / réponses.
Vous pouvez essayer avec le code suivant
Navigator.pushReplacement(context, MaterialPageRoute(builder: (context) => YourNextScreen())),
onTap: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) => NextScreenName()));
}
Bien que votre réponse puisse être correcte (je ne sais pas si elle l'est), il serait beaucoup plus utile aux futurs chercheurs d'expliquer ce que cela fait et pourquoi cela fonctionne
Bonjour @MindSwipe, veuillez vous référer à la question. Donc, fondamentalement, il est utilisé pour naviguer d'un écran à un autre écran
Accédez à l'écran suivant avec le dos en utilisant Navigator.push()
Navigator.pushReplacement( context,MaterialPageRoute(builder: (context) => SecondRoute()),);
Accédez à l'écran suivant sans retour en utilisant Navigator.pushReplacement()
Navigator.push( context, MaterialPageRoute(builder: (context) => SecondRoute()),);
J'ai trouvé un bon tutoriel que j'ai suivi, il est très complet avec des captures d'écran et étape par étape, vous pouvez également télécharger le code et simplement l'exécuter. Très utile pour moi d'apprendre Flutter, en particulier je suis totalement un débutant.
https://medium.com/@misterflutter/lesson-5-creating-new-screens-f740994190c7
Si vous êtes familier avec le développement Web, cette approche est similaire au routage.
main.dart
onPressed: (){
Navigator.pushReplacementNamed(context, '/register');
},
Vous pouvez ajouter un bouton onPressed événement à partir de la homepage.dart d' onPressed pour naviguer dans register.dart comme suit.
void main() {
setupLocator();
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
routes: {
'/' : (BuildContext context)=>HomePage(),
'/register' : (BuildContext context)=>RegisterPage(),
},
);
}
}
Vous pouvez également éviter complètement Navigator / MaterialPageRoute. La raison principale est les animations.
Le problème avec le routage des matériaux est que, à l'exception de l'animation Hero, il n'a qu'une animation de diapositives pour la plupart des transitions de page.
Considérez maintenant le package d' animation en conserve Flutter.
Pour avoir quelque chose comme ça, vous devez coder votre page sans utiliser Material Route. Toutes les transitions de page ici fonctionnent à l'aide de la transformation de conteneur ou du commutateur de widget de tri.
Donc, personnellement, je structurerais mon application en fonction de la transition des pages. Si la page vers laquelle je navigue a des éléments partagés avec la page précédente, j'irais avec Material Route. Un exemple serait la galerie d'images (qui partage l'image avec l'icône cliquée). Pour les transitions de page normales, je m'en passerais réellement.
Je ne sais pas ce que je ressens à ce sujet. Je pense qu'il y a une limite au niveau bas d' une question. Je veux dire si cette question / réponse est bonne, alors nous pourrions en faire une pour littéralement tous les widgets du framework
Bien sûr, mais votre question relève de l'OMI «trop large».
Je pense qu'il doit y avoir une limite au niveau de la question. Comme @ RémiRousselet le dit, nous pouvons le faire pour n'importe quel widget du framework, plus la documentation pour cette question est assez évidente.
Le flutter doc est assez simple sur ce sujet. flutter.dev/docs/cookbook/navigation/navigation-basics