使用在Ink.image中具有图像的材质的Flutter Grid布局给出错误“构建函数返回null。该...”

Question

我正在创建一个4x3的游戏板。电路板应由不同的图像组成。在开始我只是尝试为所有部分加载相同的图像，但是我在应用程序中自己收到一条错误消息：

“构建函数返回null。......”

 @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构建器错误，

所以使用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,
            )
          ],
        ));
  }

Answer 2

有两个解决方案。

I.用Ink.image替换你的Image.asset('...'))

II。提供child到Ink.image()，你可以简单地返回一个Container()。

Ink.image(
  image: AssetImage('assets/animals/cat_64_blue.png'),
  child: Container(), // you need this
),