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


                            ],
                          )

                            ,)


                        ],
                      )

                    ],
                  )

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

Why you have use stack as parent in ListView ? Does is requirement or you simply trying to showing List.? — Amit Prajapati
– Amit Prajapati, Commented Sep 17, 2019 at 11:49

Faizan Jivani · Accepted Answer · 2019-09-17 11:52:05Z

3

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

answered Sep 17, 2019 at 11:52

Faizan Jivani

1,5031 gold badge15 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Faizan Jivani Over a year ago

and use ListTile Widget Inside The ListView Instead Of Center... ListTile Deatils:- api.flutter.dev/flutter/material/ListTile-class.html

Amit Prajapati · Accepted Answer · 2019-09-17 11:57:55Z

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

answered Sep 17, 2019 at 11:57

Amit Prajapati

14.4k8 gold badges67 silver badges88 bronze badges

7 Comments

kriti sharma Over a year ago

Its still not working the same. It is not vertically scrolling inside the listview if I increase the data .... I want to know why its not scrolling ...I have already added the code you suggested then too....

Amit Prajapati Over a year ago

You mean if i'm adding 50+ Text() . it not scroll right ?

Amit Prajapati Over a year ago

actually i'm not clear what you actually trying to archive, Do this single list? what you use Stack and Two time ListView ?

kriti sharma Over a year ago

I got the answer actually I have to put that listview inside some container by giving a fix height after that I will be able to scroll.Thanks a lot you partially solved my problem :)

kriti sharma Over a year ago

Ya I will optimize it

|

kriti sharma · Accepted Answer · 2019-09-18 09:26:23Z

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

Collectives™ on Stack Overflow

ListView showing Blank screen in flutter

3 Answers 3

1 Comment

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related