4
votes

Flutter: Pourquoi est-ce que j'obtiens l'erreur "Les constructeurs de routes ne doivent jamais retourner null"?

Je suis nouveau dans Flutter et voici mon code

homepage.dart

I/flutter (31115): ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
I/flutter (31115): The following assertion was thrown building Builder(dirty):
I/flutter (31115): The builder for route "null" returned null.
I/flutter (31115): Route builders must never return null.

product_page.dart strong >

import 'package:flutter/material.dart';

class ProductPage extends StatelessWidget {
  final String  title, imageUrl;

  ProductPage(this.title,this.imageUrl);

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("Choco Factory"),
      ),
      body: ProductPageUI(title, imageUrl),
    );
  }
}

class ProductPageUI extends StatefulWidget {

  String title, imageUrl;

  ProductPageUI(this.title, this.imageUrl);

  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _ProductPageUIState();
  }
}

class _ProductPageUIState extends State<ProductPageUI> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return _productPageUIBuilder(widget.title, widget.imageUrl);
  }

  Widget _productPageUIBuilder(String title, String imageUrl) {
    return Column(
      children: <Widget>[
        Text(title),
        Image.asset(imageUrl),
        Text(
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean semper sodales nisi, ac ornare nisl ullamcorper vel. Aliquam nibh libero, consequat in arcu molestie, congue scelerisque elit. Integer eu ex in tellus iaculis egestas. Aliquam a molestie ante. Etiam eget magna id neque suscipit sollicitudin. Phasellus dolor erat, sagittis ut felis quis, faucibus finibus est. Aenean nunc justo, venenatis nec urna a, vehicula lacinia odio. Ut molestie velit vitae augue pulvinar dignissim. Integer tempus nisi dignissim nisl rutrum venenatis at in leo."),
      ],
    );
  }
}

Lorsque je clique sur le bouton, j'obtiens l'erreur suivante. S'il n'y a pas d'erreur, je devrais accéder à une autre page "ProductPage".

import 'package:flutter/material.dart';

import './product_page.dart';

class Homepage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("Choco Factory"),
      ),
      body: HomepageUI(),
    );
  }
}

class HomepageUI extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _HomepageUIState();
  }
}

class _HomepageUIState extends State<HomepageUI> {
  List<Map<String, String>> productsMap = [];

  _HomepageUIState() {
    productsMap
        .add({"title": "Cappuccino", "imageUrl": "assets/cappuccino.jpg"});
    productsMap.add(
        {"title": "Chocolate Cake", "imageUrl": "assets/chocolate_cake.jpg"});
    productsMap
        .add({"title": "Chocolates", "imageUrl": "assets/chocolates.jpg"});
    productsMap.add(
        {"title": "Hot Chocolate", "imageUrl": "assets/hot_chocolate.jpg"});
    productsMap.add({"title": "Naougat", "imageUrl": "assets/nougat.jpg"});
    productsMap.add(
        {"title": "White Chocolate", "imageUrl": "assets/white_chocolate.jpg"});
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Column(
      children: <Widget>[
        Text("Select Your Choco!"),
        Expanded(
            child: ListView.builder(
          itemBuilder: _listBuilder,
          itemCount: productsMap.length,
        )

            //child: Image.asset("assets/chocolates.jpg"),
            )
      ],
    );
  }

  Widget _listBuilder(BuildContext context, int index) {
    return Card(
      child: Column(
        children: <Widget>[
          Image.asset(productsMap[index]["imageUrl"]),
          Text(productsMap[index]["title"]),
          RaisedButton(
            child: Text("Details"),
            color: Colors.green,
            onPressed: () {
              Navigator.push(context,
                  MaterialPageRoute(builder: (BuildContext context) {
                ProductPage(productsMap[index]["title"],
                    productsMap[index]["imageUrl"]);
              }));
            },
          )
        ],
      ),
    );
  }
}

Quel est le problème ici?


0 commentaires

4 Réponses :


0
votes

déplacer productsMap dans la fonction initState () pas dans le constructeur XXX

également votre Navigator.push

Navigator.push(
              context,
              MaterialPageRoute(
                  builder: (context) => ProductPage(productsMap[index]["title"],
                productsMap[index]["imageUrl"])),
            );


2 commentaires

Eh bien, cela ne semble pas être le problème.


yup vient de remarquer cela aussi et mis à jour, mais aussi pour l'initState mon point est valide car j'ai vu principalement le constructeur utilisé pour transmettre les données uniquement



4
votes

Comme le message d'erreur l'indique, vous ne renvoyez rien dans votre générateur d'itinéraire. Vous manquez la déclaration de retour

Navigator.push(context,
                  MaterialPageRoute(builder: (BuildContext context) {
                return ProductPage(productsMap[index]["title"], // you miss return here!
                    productsMap[index]["imageUrl"]);
              }));


2 commentaires

Incroyable, vous avez compris! J'ai également remarqué que si les accolades étaient remplacées autour de ProductPage (.... par une grosse flèche, le problème disparaît également!


Oui. Étant donné que votre méthode de construction est une seule ligne de code et que cette ligne renvoie un objet, la notation de la fonction flèche convient très bien. J'ai mis la déclaration de retour juste pour devenir plus visible où était le problème.



0
votes

Vous oubliez de renvoyer le widget dans votre fonction de générateur

                MaterialPageRoute(
                  builder: (BuildContext context) => ProductPage(
                      productsMap[index]["title"],
                      productsMap[index]["imageUrl"]),
                ),

ou si vous préférez utiliser la fonction lambda, la syntaxe serait:

                  MaterialPageRoute(builder: (BuildContext context) {
                return ProductPage(productsMap[index]["title"],
                    productsMap[index]["imageUrl"]);
              }));


0 commentaires

0
votes
Navigator.push(context,
                  MaterialPageRoute(builder: (BuildContext context) {
              return  PageOne();
              }));

0 commentaires