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

Question

I created an application in android studio to navigate from one screen to another.Here two stateless widgets are created as two screens and both contain a button to navigate pages each other. However when i run the application a red screen is generated on my android phone I get an error saying

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

I have provided my code below:

FIRST SCREEN

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}) {}
}

SECOND SCREEN

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

Your center method should return a Widget, it is currently providing null to the Column .

Do this instead:

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

Then use in your Column like:

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

you have to return any widget in center

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

Answer 3

You tryed write Center instead center in line 24? And in Center must be will return for example Containter()

Answer 4

In 24th line, you returned null value. You can implement the center method like this;

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