1
votes

Navigation flottante par nom de route dans un widget complet

J'essaye d'aller sur une autre page en utilisant la navigation, mais j'obtiens une erreur;

Opération de navigateur demandée avec un contexte qui n'inclut pas Navigateur.

J'essaie juste de passer à la page suivante, j'ai suivi les documentations flottantes pour ce widget sans état mais comment faire avec le widget d'état complet.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  State createState() => new MyApp1();
}

class MyApp1 extends State<MyApp> {
  List<Widget> _listSection = [];

  Widget build(BuildContext context) {
   return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Share IDEASS',
      initialRoute: '/',
  routes: {
    '/second': (context) => SecondScreen(),
  },
      home: Scaffold(
        appBar: AppBar(
          title: Text('IDEAS'),
        ),
        body: Container(
          child: Stack(
            children: [
              floatingButton(),
            ],
          ),
        ),
      ),
    );
  }



  Widget floatingButton() {
    return Container(
      padding: const EdgeInsets.all(30),
      alignment: Alignment.bottomRight,
      child: FloatingActionButton(
        onPressed: () {
            Navigator.pushNamed(context, "/SecondScreen");
          },
        child: Text("+"),
        backgroundColor: Colors.blue,
      ),
    );
  }
}
class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Second Route"),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Go back!'),
        ),
      ),
    );
  }
}

flutter flutter-layout

2 commentaires

remplacez simplement "SecondScreen" par "second"

@HarshvardhanJoshi encore une fois la même erreur

3 Réponses :

3
votes

Vous devez utiliser la route nommée que vous avez créée.

body: Container(
          child: Stack(
            children: [
              floatingButton(context),
            ],
          ),
        ),

puis utilisez ce qui suit

Widget floatingButton(BuildContext context) { // added context as a parameter
    return Container(
      padding: const EdgeInsets.all(30),
      alignment: Alignment.bottomRight,
      child: FloatingActionButton(
        onPressed: () {
            Navigator.pushNamed(context, "/second"); // Changed this to use the named route
          },
        child: Text("+"),
        backgroundColor: Colors.blue,
      ),
    );
  }
}

0 commentaires

2
votes

La situation ici est que le floatingButton () utilise un contexte avec le navigateur pour pousser l'itinéraire de page donné. Mais le contexte utilisé est fourni dans le widget parent ( MaterialApp ) lui-même, qui n'inclut pas de navigateur, d'où l'erreur.

Alors, essayez cette approche: Séparez le widget Accueil de MaterialApp, comme ci-dessous:

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('IDEAS'),
      ),
      body: Container(
        child: Stack(
          children: [
            floatingButton(),
          ],
        ),
      ),
    );
  }
}

Créez un widget sans état contenant l'échafaudage:

return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Share IDEASS',
      initialRoute: '/',
      routes: {
        '/second': (context) => SecondScreen(),
      },
      home: HomePage(),
    );

Hope ça aide. Faites-moi savoir si cela ne fonctionne pas.

6 commentaires

Le bouton flottant est fonction de la classe de widget avec état, comment puis-je l'appeler dans une classe sans état?

Je l'ai, je l'ai juste mis en dehors de la classe

vous avez utilisé home: HomePage (), j'ajoutais différentes sections dans l'échafaudage de ma maison sous la propriété enfant qui changeait d'état, comment puis-je les ajouter maintenant? car je n'ai plus d'échafaud avec état. nous le déplaçons en classe apatride

si vous voulez la méthode dans le widget sans état, tout ce que vous avez à faire est de passer le contexte de la méthode de construction en tant que paramètre à la méthode comme floatingButton (contexte) .

Je ne suis pas sûr de comprendre votre question sur l'ajout de widgets avec état dans l'échafaudage en tant qu'enfants. pouvez-vous exprimer votre doute avec plus de détails?

Merci, compris.

1
votes

Vous avez commis deux erreurs à cause desquelles votre code ne fonctionne pas:

Vous avez utilisé un nom de route incorrect. Remplacez / SecondScreen par / seconde
Vous avez utilisé un mauvais contexte. Vous ne pouvez obtenir Navigator que si votre widget a MaterialApp comme parent et que vous utilisez ici le contexte de MyApp1 pour qu'il ne fonctionne pas.

Voici un code de travail pour votre référence.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  State createState() => new MyApp1();
}

class MyApp1 extends State<MyApp> {
  List<Widget> _listSection = [];

  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Share IDEASS',
      initialRoute: '/',
      routes: {
        '/second': (context) => SecondScreen(),
      },
      home: AppContent(),
    );
  }
}

class AppContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('IDEAS'),
      ),
      body: Container(
        child: Stack(
          children: [
            floatingButton(context),
          ],
        ),
      ),
    );
  }

  Widget floatingButton(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(30),
      alignment: Alignment.bottomRight,
      child: FloatingActionButton(
        onPressed: () {
          Navigator.pushNamed(context, "/second");
        },
        child: Text("+"),
        backgroundColor: Colors.blue,
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Second Route"),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Go back!'),
        ),
      ),
    );
  }
}

2 commentaires

bonne explication

Je suis heureux que cela vous ait aidé :)