dart - 具有 Ink.image 中图像的 Material 的 Flutter Grid 布局给出错误 "A build function returned null. The..."

Question

我正在创建一个 4x3 的游戏板。该板应该由不同的图像组成。一开始我只是试图为所有片段加载相同的图像，但是我在应用程序中收到一条错误消息:

"A build function returned null. The..."

 @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: new AppBar(
          title: new Text("Cat Attack"),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            Expanded(
              child: GridView.builder(
                padding: const EdgeInsets.all(10.0),
                gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 4, // 4 columns of board buttons
                    childAspectRatio: 1.0,
                    crossAxisSpacing: 9.0,
                    mainAxisSpacing: 9.0),
                itemCount: buttonsList.length,
                itemBuilder: (context, i) => new SizedBox(
                  width: 100.0,
                  height: 100.0,

                  child: Material(
                    elevation: 4.0,
                    color: Colors.green,
                    child: Ink.image(image: AssetImage('assets/animals/cat_64_blue.png')),
                  ),

                ),
              ),
            ),

            RaisedButton(
              child: new Text(
                "Reset",
                style: new TextStyle(color: Colors.white, fontSize: 20.0),
              ),
              color: Colors.red,
              padding: const EdgeInsets.all(20.0),
              onPressed: resetGame,
            )
          ],
        ));
  }

Answer 1

由于 Ink.image(image: AssetImage('assets/animals/cat_64_blue.png'))，它会生成 null GridView builder 错误，

所以使用 Image.asset('assets/animals/cat_64_blue.png'), 而不是 Ink.image(image: AssetImage('assets/animals/cat_64_blue.png') ),

@override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: new AppBar(
          title: new Text("Cat Attack"),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            Expanded(
              child: GridView.builder(
                padding: const EdgeInsets.all(10.0),
                gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 4, // 4 columns of board buttons
                    childAspectRatio: 1.0,
                    crossAxisSpacing: 9.0,
                    mainAxisSpacing: 9.0),
                itemCount: buttonsList.length,
                itemBuilder: (context, i) => new SizedBox(
                  width: 100.0,
                  height: 100.0,

                  child: Material(
                    elevation: 4.0,
                    color: Colors.green,
                    child: Image.asset('assets/animals/cat_64_blue.png'),
                  ),

                ),
              ),
            ),

            RaisedButton(
              child: new Text(
                "Reset",
                style: new TextStyle(color: Colors.white, fontSize: 20.0),
              ),
              color: Colors.red,
              padding: const EdgeInsets.all(20.0),
              onPressed: resetGame,
            )
          ],
        ));
  }