Flutter 错误：列的子项不得包含任何 null 值，但在索引 0 处找到 null 值

Question

我在 android 工作室中创建了一个应用程序，用于从一个屏幕导航到另一个屏幕。这里将两个无状态小部件创建为两个屏幕，并且都包含一个用于相互导航页面的按钮。 但是，当我运行该应用程序时，我的 android 手机上会生成一个红屏，我收到一条错误消息

exception 'Column's children must not contain any null values, but a null value was found at index 0'.

我在下面提供了我的代码：

第一个屏幕

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("First Screen"),
      ),
      body: Container(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              center(
                decoration: new BoxDecoration(
                  image: new DecorationImage(
                    image: new AssetImage('assets/new 7wonders.jpg'),
                    fit: BoxFit.cover,
                  ),
                ),
              ),
              Text('New 7 Wonders',
                style: TextStyle(fontSize: 40, fontStyle: FontStyle.italic),
              ),
              RaisedButton(
                child: Text("Bang Here"),
                onPressed: (){
                  Navigator.push(context, MaterialPageRoute(builder: (context) => SecondScreen()));
                },
                color: Colors.red,
                textColor: Colors.yellow,
                padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
                splashColor: Colors.grey,
              )
            ],
          ),
        ),
      ),
    );
  }

  center({BoxDecoration decoration}) {}
}

第二个屏幕

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Second Screen"),
      ),
      body: RaisedButton(
        child: Text("Go to First page"),
        onPressed:() {
          Navigator.pop(context);
        },
      ),
    );
  }
}

Answer 1

您的center方法应该返回一个小部件，它目前正在向Column提供null 。

改为这样做：

 Widget center() {
    // return a decorated box widget which gives you the decoration property
    return Image(
          image: AssetImage(
          'assets/new 7wonders.jpg',),
           fit: BoxFit.cover,
     );
  }
}

然后在您的Column中使用，例如：

Container(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
             // call the center method which returns a Widget
              center(),
              Text(
                'New 7 Wonders',
                style: TextStyle(fontSize: 40, fontStyle: FontStyle.italic),
              ),
              RaisedButton(
                child: Text("Bang Here"),
                onPressed: () {
                  Navigator.push(context,
                      MaterialPageRoute(builder: (context) => SecondScreen()));
                },
                color: Colors.red,
                textColor: Colors.yellow,
                padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
                splashColor: Colors.grey,
              )
            ],
          ),
        ),
      ),

Answer 2

您必须在中心返回任何小部件

center({BoxDecoration decoration}) {
   return Container();
}

Answer 3

您尝试在第 24 行写Center而不是center ？ 并且必须在 Center 中返回，例如Containter()

Answer 4

在第 24 行，您返回了 null 值。 您可以像这样实现中心方法；

return Container();

Answer 5

Remove center use this

Container(
   height: 100,       // height and width according to your ui
     width:100,
       child:Image.asset(('assets/new7wonders.jpg',fit: BoxFit.cover,), // use for local image from asset and please change image name in code as well as in asset folder.there should  not be space between image name .
      
 ),