首页 > 解决方案 > Flutter 错误:列的子项不得包含任何空值,但在索引 0 处找到空值

问题描述

我在 android studio 中创建了一个应用程序来从一个屏幕导航到另一个屏幕。这里将两个无状态小部件创建为两个屏幕,并且都包含一个按钮来相互导航页面。但是,当我运行该应用程序时,我的 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);
        },
      ),
    );
  }
}

标签: android-studioflutterflutter-layout

解决方案


您的center方法应该返回一个小部件,它当前提供nullColumn.

改为这样做:

 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,
              )
            ],
          ),
        ),
      ),

推荐阅读