Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to remove automatic SafeArea from ListView?

Tags:

I just added a ListView as a child of Scaffold > Stack and it appears to have SafeArea at the top. Column does not have this problem. Is there any way for me to remove it?

Container(   color: Colors.grey[100],   child: ListView(     children: <Widget>[       Image(         image: snapshot.data.hero,         height: 300.0,         fit: BoxFit.cover,       ),     ],   ), ), 

ListView enter image description here

Column enter image description here

like image 370
Luke Pighetti Avatar asked Aug 30 '18 21:08

Luke Pighetti


People also ask

How do I turn off safe area in flutter?

bottom : This property is of type bool. It is true by default and setting it to false would disable SafeArea from adding padding to the bottom of the screen. top : This property is also of type bool and setting it to false would avoid padding at top of the screen.

How do you remove space between ListView items in flutter?

Solution: Use visualDensity property instead within the ListTile .

What is ListView flutter?

In Flutter, ListView is a scrollable list of widgets arranged linearly. It displays its children one after another in the scroll direction i.e, vertical or horizontal. There are different types of ListViews : ListView. ListView.

What is ListView builder in flutter?

ListView is a very important widget in a flutter. It is used to create the list of children But when we want to create a list recursively without writing code again and again then ListView. builder is used instead of ListView. ListView. builder creates a scrollable, linear array of widgets.


Video Answer


2 Answers

From the ListView documentation:

By default, ListView will automatically pad the list's scrollable extremities to avoid partial obstructions indicated by MediaQuery's padding. To avoid this behavior, override with a zero padding property.

So the fix is:

ListView(   padding: EdgeInsets.zero,   ... ); 
like image 175
boformer Avatar answered Oct 29 '22 09:10

boformer


Found this solution as well

MediaQuery.removePadding(   context: context,   removeTop: true,   child: ListView(...), ) 
like image 35
Luke Pighetti Avatar answered Oct 29 '22 07:10

Luke Pighetti