ListView showing Blank screen in flutter

Question

I want a Background image and above that image some content will be there that should be vertically scrollable so that it should not get outside the image.

THe code is shown below

I am using the satck and one child is Image and the other is listview to acheive this but still not able to find the correct solution..

 ListView(
    children: <Widget>[
               new Stack(
                  children: <Widget>[
                    Container(
                        child: background.Row3
                    ),

                      Stack(
                        children: <Widget>[
                          Center(child: SvgPicture.asset('assets/Receipt.svg',height: 350,width: 200,),),/*************this is the main background image****************/

                          Padding(padding: EdgeInsets.only(top:100),
                          child: Column(
                            mainAxisAlignment:MainAxisAlignment.spaceAround,
                            children: <Widget>[
                              ListView(
                                padding: const EdgeInsets.all(8),
                                children: <Widget>[  /********text above background image *******************/

                                  Center(
                                      child:Text('Beneficiary Details',style: TextStyle(fontSize: 14,color: Colors.black),)
                                  ),


                                  Center(
                                      child:Text('Sushita sen',style: TextStyle(fontSize: 12,color: Colors.grey),)
                                  ),
                                  Center(
                                      child:Text('Reference Number',style: TextStyle(fontSize: 14,color: Colors.black),)
                                  ),

                                  Center(
                                    child:Text('73YHNUWD6EW7R34Y78HSDIF',style: TextStyle(fontSize: 12,color: Colors.grey),)
                                    ),

                                  Center(
                                    child:Text('73YHNUWD6EW7R34Y78HSDIF',style: TextStyle(fontSize: 12,color: Colors.grey),)
                                    ,),

                                  Center(
                                    child:Text('73YHNUWD6EW7R34Y78HSDIF',style: TextStyle(fontSize: 12,color: Colors.grey),)
                                    ,),

                                  Center(
                                    child:Text('73YHNUWD6EW7R34Y78HSDIF',style: TextStyle(fontSize: 12,color: Colors.grey),)
                                    ,),

                                  Center(
                                    child:Text('73YHNUWD6EW7R34Y78HSDIF',style: TextStyle(fontSize: 12,color: Colors.grey),)
                                    ,),

                                  Center(
                                    child:Text('73YHNUWD6EW7R34Y78HSDIF',style: TextStyle(fontSize: 12,color: Colors.grey),)
                                    ,),

                                  Center(
                                    child:Text('73YHNUWD6EW7R34Y78HSDIF',style: TextStyle(fontSize: 12,color: Colors.grey),)
                                    ,),
                                ],
                              )


                            ],
                          )

                            ,)


                        ],
                      )

                    ],
                  )

              ]
          ),
        ),
      ),
    ],
  ),
   );
  }
 }

Answer 1

@kriti sharma for background image inside the Stack widget kindly use Positoned widget on top of the Stack widget.

example:-

    children: <Widget>[
      Positioned(
        top: 0,
        right: 0,
        child: Image.asset(
          "assets/icons/categories/map.jpg",
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.height,
        ),
      ),
      // _buildGoogleMap(context),
      // _zoomminusfunction(),
      // _zoomplusfunction(),
      // _buildContainer(),
    ],
  ),

Answer 2

Actually it not black screen you got error like,

Exception caught by rendering library The following assertion was thrown during performResize():

Vertical viewport was given unbounded height.

I just added scrollDirection and shrinkWrap in you list.

                ListView(
                      scrollDirection: Axis.vertical,
                      shrinkWrap: true,

Your whole code

home: ListView(children: <Widget>[
      new Stack(
        children: <Widget>[
          Container(child: Text("Hello")),
          Stack(
            children: <Widget>[
              Container(
                height: 100,
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(5),
                    color: Colors.blue,
                    image: DecorationImage(
                        image: new NetworkImage(
                            "https://thumbs.dreamstime.com/b/funny-face-baby-27701492.jpg"),
                        fit: BoxFit.fill)),
              ),
              /*************this is the main background image****************/

              Padding(
                padding: EdgeInsets.only(top: 100),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: <Widget>[
                    ListView(
                      scrollDirection: Axis.vertical,
                      shrinkWrap: true,
                      padding: const EdgeInsets.all(8),
                      children: <Widget>[
                        Center(
                            child: Text(
                          'Beneficiary Details',
                          style:
                              TextStyle(fontSize: 14, color: Colors.black),
                        )),
                        Center(
                            child: Text(
                          'Sushita sen',
                          style:
                              TextStyle(fontSize: 12, color: Colors.grey),
                        )),
                        Center(
                            child: Text(
                          'Reference Number',
                          style:
                              TextStyle(fontSize: 14, color: Colors.black),
                        )),
                        Center(
                            child: Text(
                          '73YHNUWD6EW7R34Y78HSDIF',
                          style:
                              TextStyle(fontSize: 12, color: Colors.grey),
                        )),
                        Center(
                          child: Text(
                            '73YHNUWD6EW7R34Y78HSDIF',
                            style:
                                TextStyle(fontSize: 12, color: Colors.grey),
                          ),
                        ),
                        Center(
                          child: Text(
                            '73YHNUWD6EW7R34Y78HSDIF',
                            style:
                                TextStyle(fontSize: 12, color: Colors.grey),
                          ),
                        ),
                        Center(
                          child: Text(
                            '73YHNUWD6EW7R34Y78HSDIF',
                            style:
                                TextStyle(fontSize: 12, color: Colors.grey),
                          ),
                        ),
                        Center(
                          child: Text(
                            '73YHNUWD6EW7R34Y78HSDIF',
                            style:
                                TextStyle(fontSize: 12, color: Colors.grey),
                          ),
                        ),
                        Center(
                          child: Text(
                            '73YHNUWD6EW7R34Y78HSDIF',
                            style:
                                TextStyle(fontSize: 12, color: Colors.grey),
                          ),
                        ),
                        Center(
                          child: Text(
                            '73YHNUWD6EW7R34Y78HSDIF',
                            style:
                                TextStyle(fontSize: 12, color: Colors.grey),
                          ),
                        ),
                      ],
                    )
                  ],
                ),
              )
            ],
          )
        ],
      )
    ]),
  );

Answer 3

I correct it by placing ListView inside container

 home: ListView(children: <Widget>[
  new Stack(
    children: <Widget>[
      Container(child: Text("Hello")),
      Stack(
        children: <Widget>[
          Container(
            height: 100,
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(5),
                color: Colors.blue,
                image: DecorationImage(
                    image: new NetworkImage(
                        "https://thumbs.dreamstime.com/b/funny-face-baby-27701492.jpg"),
                    fit: BoxFit.fill)),
          ),
          /*************this is the main background image****************/

          Padding(
            padding: EdgeInsets.only(top: 100),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: <Widget>[
               Conatiner( /************This container will wrap the listview and will make it scrollable also *******/
                height:200,
                child: ListView(
                  scrollDirection: Axis.vertical,
                  shrinkWrap: true,
                  padding: const EdgeInsets.all(8),
                  children: <Widget>[
                    Center(
                        child: Text(
                      'Beneficiary Details',
                      style:
                          TextStyle(fontSize: 14, color: Colors.black),
                    )),
                    Center(
                        child: Text(
                      'Sushita sen',
                      style:
                          TextStyle(fontSize: 12, color: Colors.grey),
                    )),
                    Center(
                        child: Text(
                      'Reference Number',
                      style:
                          TextStyle(fontSize: 14, color: Colors.black),
                    )),
                    Center(
                        child: Text(
                      '73YHNUWD6EW7R34Y78HSDIF',
                      style:
                          TextStyle(fontSize: 12, color: Colors.grey),
                    )),
                    Center(
                      child: Text(
                        '73YHNUWD6EW7R34Y78HSDIF',
                        style:
                            TextStyle(fontSize: 12, color: Colors.grey),
                      ),
                    ),
                    Center(
                      child: Text(
                        '73YHNUWD6EW7R34Y78HSDIF',
                        style:
                            TextStyle(fontSize: 12, color: Colors.grey),
                      ),
                    ),
                    Center(
                      child: Text(
                        '73YHNUWD6EW7R34Y78HSDIF',
                        style:
                            TextStyle(fontSize: 12, color: Colors.grey),
                      ),
                    ),
                    Center(
                      child: Text(
                        '73YHNUWD6EW7R34Y78HSDIF',
                        style:
                            TextStyle(fontSize: 12, color: Colors.grey),
                      ),
                    ),
                    Center(
                      child: Text(
                        '73YHNUWD6EW7R34Y78HSDIF',
                        style:
                            TextStyle(fontSize: 12, color: Colors.grey),
                      ),
                    ),
                    Center(
                      child: Text(
                        '73YHNUWD6EW7R34Y78HSDIF',
                        style:
                            TextStyle(fontSize: 12, color: Colors.grey),
                      ),
                    ),
                  ],
                )
                )
              ],
            ),
          )
        ],
      )
    ],
  )
]),
);