颤振：为什么我会收到错误"Route builders must never return null"？

Question

我是新手的flutter，以下是我的代码

homepage.dart

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"]);
              }));
            },
          )
        ],
      ),
    );
  }
}

product_page.dart

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."),
      ],
    );
  }
}

当我单击按钮时，我会收到以下错误。如果没有错误，我应该导航到另一页" productPage"。

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.

这里有什么问题？

Answer 1

正如错误消息所说的那样，您在路线构建器中没有返回任何内容。您错过了返回语句

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

Answer 2

您忘记返回构建器功能中的小部件

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

，或者如果您喜欢使用lambda函数，则语法为：

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

Answer 3

在Initstate（）函数中移动productsmap

中

  initState() {
    super.initState();
    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"});
  }

也是您的Navigator.push

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

Answer 4

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

而不仅仅是在构建器方法中实例化要推开的页面，而是将其添加为返回参数

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