web-dev-qa-db-fra.com

Flutter - Poussez et obtenez de la valeur entre les itinéraires

Comment envoyer la chaîne verte de la page HomePage à la page ContaPage?

Je pense que c'est tellement Navigator.of(context).pushNamed('/conta/green'); mais je ne sais pas comment accéder à la page conta la chaîne green

Ainsi, en obtenant la valeur de la chaîne, je peux par exemple changer la couleur du backgroundColor de appBar dans ContaPage.

main.Dart

import "package:flutter/material.Dart";

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: "MyApp",
      home: new HomePage(),
      routes: <String, WidgetBuilder> {
        '/home': (BuildContext context) => new HomePage(),
        '/conta': (BuildContext context) => new ContaPage()
      },
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) => new Scaffold(
    appBar: new AppBar(
      backgroundColor: new Color(0xFF26C6DA),
    ),
    body: new ListView  (
      children: <Widget>[
        new FlatButton(
          child: new Text("ok"),
          textColor: new Color(0xFF66BB6A),               
          onPressed: () {
            Navigator.of(context).pushNamed('/conta');
          },
        ),
      ],
    )
  );
}

class ContaPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) => new Scaffold(
    appBar: new AppBar(
      backgroundColor: new Color(0xFF26C6DA),
    ), 
  );
}
dartflutter
15
rafaelcb21

Vous pouvez créer un MaterialPageRoute à la demande et passer l'argument au constructeur ContaPage.

import "package:flutter/material.Dart";

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: "MyApp",
      home: new HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) => new Scaffold(
    appBar: new AppBar(
      backgroundColor: new Color(0xFF26C6DA),
    ),
    body: new ListView  (
      children: <Widget>[
        new FlatButton(
          child: new Text("ok"),
          textColor: new Color(0xFF66BB6A),
          onPressed: () {
            Navigator.Push(context, new MaterialPageRoute(
              builder: (BuildContext context) => new ContaPage(new Color(0xFF66BB6A)),
            ));
          },
        ),
      ],
    )
  );
}

class ContaPage extends StatelessWidget {
  ContaPage(this.color);
  final Color color;
  @override
  Widget build(BuildContext context) => new Scaffold(
    appBar: new AppBar(
      backgroundColor: color,
    ),
  );
}
21
Collin Jackson

Vous pouvez toujours créer une variable statique String avec du vert comme valeur dans votre HomePage et utiliser cette valeur dans vos itinéraires lorsque vous créez un nouveau ContaPage. Quelque chose comme ça:

import "package:flutter/material.Dart";

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: "MyApp",
      home: new HomePage(),
      routes: <String, WidgetBuilder> {
        '/home': (BuildContext context) => new HomePage(),
        '/conta': (BuildContext context) => new ContaPage(HomePage.color)
      },
    );
  }
}

class HomePage extends StatelessWidget {

  static String color = "green";

  @override
  Widget build(BuildContext context) => new Scaffold(
    appBar: new AppBar(
      backgroundColor: new Color(0xFF26C6DA),
    ),
    body: new ListView  (
      children: <Widget>[
        new FlatButton(
          child: new Text("ok"),
          textColor: new Color(0xFF66BB6A),               
          onPressed: () {
            Navigator.of(context).pushNamed('/conta');
          },
        ),
      ],
    )
  );
}

class ContaPage extends StatelessWidget {

  ContaPage({this.color})
  String color;

  @override
  Widget build(BuildContext context) => new Scaffold(
    appBar: new AppBar(
      backgroundColor: new Color(0xFF26C6DA),
    ), 
  );
}

Il y a probablement de meilleures solutions mais cela m'est d'abord venu à l'esprit :)

6
Bram Vanbilsen

Une meilleure solution est déjà donnée sur le site Web de Flutter, comment utiliser:

Arguments 

class ScreenArguments {
  final String title;
  final String message;

  ScreenArguments(this.title, this.message);
}

Extraire les arguments 

class ExtractArgumentsScreen extends StatelessWidget {
  static const routeName = '/extractArguments';

  @override
  Widget build(BuildContext context) {
    final ScreenArguments args = ModalRoute.of(context).settings.arguments;
    return Scaffold(
      appBar: AppBar(
        title: Text(args.title),
      ),
      body: Center(
        child: Text(args.message),
      ),
    );
  }
}

Enregistrer l'itinéraire 

MaterialApp(
  //...
  routes: {
    ExtractArgumentsScreen.routeName: (context) => ExtractArgumentsScreen(),
    //...
  },     
);

Naviguer 

Navigator.pushNamed(
      context,
      ExtractArgumentsScreen.routeName,
      arguments: ScreenArguments(
        'Extract Arguments Screen',
        'This message is extracted in the build method.',
      ),
    );

Code copié de lien .

4
Hemant Kaushik

Il est un peu tard, mais cela pourrait aider quelqu'un. Je pense que la meilleure façon est d'utiliser le projet de route flutter fluro .

définir certains où globalement:

final router = Router();

définir ensuite les itinéraires

var contaHandler = Handler(handlerFunc: (BuildContext context, Map<String, dynamic> params) {
  return ContaPage(color: params["color"][0]);
});

void defineRoutes(Router router) {
  router.define("/conta/:color", handler: contaHandler);
}

définissez onGenerateRoute dans MaterialApp pour utiliser le générateur de routeur:

 new MaterialApp (
   ...
   nGenerateRoute: router.generator
   ...
 ),

vous devez ajouter le fluro dans les dépendances:

 dependencies:
     fluro: "^1.3.4"

et effectuez la mise à niveau du package de la manière suivante ou de la manière IDE.

 flutter packages upgrade
2
karianpour

Passage des données de la 1ère page à la 2ème

En 1ère page

// sending "Foo" from 1st page
Navigator.Push(context, MaterialPageRoute(builder: (_) => Page2("Foo")));

En 2ème page.

class Page2 extends StatelessWidget {
  final String string;
  Page2(this.string); // receiving "Foo" in 2nd
}

Retour des données de la 2e page au 1er

En 2ème page

// sending "Bar" from 2nd
Navigator.pop(context, "Bar");

En 1ère page, c'est le même qui a été utilisé précédemment mais avec peu de modifications.

// receiving "Bar" in 1st
String received = await Navigator.Push(context, MaterialPageRoute(builder: (_) => Page2("Foo")));
0
CopsOnRoad