Make RefreshIndicator work on whole screen (ListView) - flutter

While looking for solutions, I found some related discussions, but none of the solutions worked in my case.
I made a "RefreshableScrollFrame" widget in my app, which offers a generic frame for pages that should show a StatusBar (loading indicator, etc.) and which should provide a pull-down to refresh.
RefreshableScrollFrame
return Center(
child: Column(
children: [
SizedBox(
height: 4,
child: const MyStatusbarWidget(),
),
RefreshIndicator(
onRefresh: onRefresh,
child: SingleChildScrollView(
physics: const AlwaysScrollableScrollPhysics(),
child: child,
),
)
],
),
);
Child Option - ListView:
ListView.builder(
itemCount: items.length,
physics: const NeverScrollableScrollPhysics(),
shrinkWrap: true,
itemBuilder: (context, i) => Card(
child: ListTile(
title: Text(items[i].name),
),
),
);
Child Option - Column with the ListView and static items:
Column(
children: [
ListView.builder(
itemCount: items.length,
physics: const NeverScrollableScrollPhysics(),
shrinkWrap: true,
itemBuilder: (context, i) => Card(
child: ListTile(
title: Text(items[i].name),
),
),
),
...someStaticWidgets,
],
);
So far so good, everything works fine, except for one important detail.
The RefreshIndicator is only triggered in areas, which are covered by the child widget. If the content is small and covers just the top of the page, the gesture is detected only in that area.
If the content is just an empty ListView, I won't even be able to trigger a refresh.
I tried several suggested solutions in order to "expand" the child to the whole screen, but I always ran into exceptions, when trying to get rid of shrinkWrap, when adding Expanded(), and so on.
Any hints would be appreciated.

you have to wrap the whole body of your scaffold with refreshIndicator not a portion of it.

I found a solution that seems to work for me, using a LayoutBuilder + ConstrainedBox to wrap the contents of the SingleChildScrollView.
This way, the SingleChildScrollView will always span the whole remaining space.
return Column(
children: [
const SizedBox(
height: 4,
child: MyStatusbarWidget(),
),
Expanded(
child: LayoutBuilder(builder: (context, constraints) {
return RefreshIndicator(
onRefresh: onRefresh,
child: SingleChildScrollView(
physics: const AlwaysScrollableScrollPhysics(),
child: ConstrainedBox(
constraints: BoxConstraints(minHeight: constraints.maxHeight),
child: child,
),
),
),
);
}),
),
],
);

Related

Remove whitespace between two ListView inside Column in Dialog - Flutter

I need to show two ListViews inside a dialog; I am using the showDialog function and in the "content" attribute I added a "SizedBox" without any value for the "height" attribute, and the lists are inside the Column object. Here is the code:
showDialog(
context: context,
builder: (context) => AlertDialog(
content: SizedBox(
width: double.maxFinite,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Text('Text1'),
Expanded(
child: ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.vertical,
itemCount: listOne.length,
itemBuilder: (context, index) {
return Text(listOne.elementAt(index).name);
},
),
),
Text('Text 2'),
Expanded(
child: ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.vertical,
itemCount: listTwo.length,
itemBuilder: (context, index) {
return Text(listTwo.elementAt(index).name);
},
),
),
],
),
),
),
);
I have already checked that the item count for both lists is correct.
Here is the result:
I want to remove the big whitespace between the two lists if it possibile.
Hope someone can help me.
Expanded: A widget that expands a child of a Row, Column, or Flex so
that the child fills the available space.
so by default it will expand fills the full height of screen.
Workaround:
change with Flexible widget:
unlike Expanded, Flexible does not require the child to fill the available space.
children: [
Text('Text1'),
Flexible(
child: ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.vertical,
itemCount: 3,
itemBuilder: (context, index) {
return Text('.name');
},
),
),
Text('Text 2'),
Flexible(
child: ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.vertical,
itemCount: 4,
itemBuilder: (context, index) {
return Text('.name');
},
),
),
],
The white space is coming for the Expanded widget trying to expand to full size extent of the screen for both lists. if you change the Expanded widget with Sizedbox and give it a height for both list it will remove the white space in between and after.
I hope this helps

Flutter SingleChildScrollView not scrolling

My singleChildScollView won't scroll vertically. I've checked similar questions regarding this problem but none of them sem to work for me.
The page fills up with the items, and the homepage button is placed at the bottom...
...so it looks correct, it just doesn't let me scroll.
Can anyone help? [ EDIT - please note in the example code below I have simplified the original widget tree and removed the homepage button]...
Scaffold(
body: SingleChildScrollView(
child: ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemBuilder: (ctx, index) {
...list of items here...
}
),
),
)
There is two steps you can do to use SingleChildScrollView in a Column widget
Wrap it in a SizedBox
Set a height to the SizedBox widget
Try this out :
Scaffold(
body:
child: Column(
mainAxisSize: MainAxisSize.max,
children: [
SizedBox(
//set a height
height : MediaQuery.of(context).size.height/5,
child: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.max,
children: [
ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemBuilder: (ctx, index) {
...list of items here...
}
),
],
),
),
),
Center(
child: ElevatedButton(
onPressed: () {Navigator.pop(context);},
child: Text('Homepage'),
),
),
],
),
)
#james please check it
Scaffold(
body: Stack(
children: [
SingleChildScrollView(
child: ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
physics: ScrollPhysics(),
itemCount: 30,
itemBuilder: (ctx, index) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 16),
child: Text("index $index"),
);
}
),
),
Align(
alignment: Alignment.bottomCenter,
child: ElevatedButton(
onPressed: () {Navigator.pop(context);},
child: Text('Homepage'),
),
),
],
),
)
thanks for the help, expecially #Jahidul Islam.
I was missing the physics: ScrollPhysics() line!
In order for the SingleChildScrollView to work, its parent's height should be defined.
You can achieve this by wrapping the SingleChildScrollView in a Container/SizedBox, or by wrapping it with the Expanded widget.

Scrolling with a listview in Flutter

I'm having issues with Flutter wherein a screen I have created will only scroll if the user touches the padding surrounding a listview comprised of cards, and not if the actual list is interacted with itself.
The Widget tree looks similar to as below:
child: Scaffold(
body: SingleChildScrollView(
child: Center(
child: SizedBox(
width: 500.0,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: [
Text(
'List',
),
Container(
child: ListView.builder(
shrinkWrap: true,
itemCount: list.length,
itemBuilder: (context, index) {
return Card(
child: ListTile(
How would I go about making the screen scrollable regardless of where on the screen the user touches?
Add NeverScrollableScrollPhysics in Listview
ListView.builder(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),

Flutter Page don't scroll

I have a problem, when I want to scroll on the screen, the app doesn't scroll. What am I missing?
This is my
code
return Scaffold(
appBar: AppBar(
title: Text('Second Page'),
),
body: Center(
child: SingleChildScrollView(
child: Column(
children: <Widget>[
Container(
height: MediaQuery.of(context).size.height * .7,
child: ListView.builder(
itemCount: itemsDishes.length,
itemBuilder: (context, index) {
return itemsDishes[index];
},
)),
Container(
height: MediaQuery.of(context).size.height * .9,
child: ListView.builder(
itemCount: itemsDrinks.length,
itemBuilder: (context, index) {
return itemsDrinks[index];
},
)),
],
),
),
),
);
As you can see, the column is nested within a SingleChildScrollView
Your inner ListView widgets are capturing the scroll event but don't contain enough items to scroll themselves, and when you're using a SingleChildScrollView an inner ListView is redundant anyway. I'd recommend changing them to Column:
return Scaffold(
appBar: AppBar(
title: Text('Second Page'),
),
body: Center(
child: SingleChildScrollView(
child: Column(
children: <Widget>[
Column(
mainAxisSize: MainAxisSize.min,
children: itemsDishes,
),
Column(
mainAxisSize: MainAxisSize.min,
children: itemsDrinks,
),
],
),
),
),
);
Remove Containers wrapping your ListViews and set shrinkWrap as well as physics properties.
ListView.builder(
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
itemCount: itemsDishes.length,
itemBuilder: (context, index) {
return itemsDishes[index];
},
),
ListView.builder(
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
itemCount: itemsDrinks.length,
itemBuilder: (context, index) {
return itemsDrinks[index];
},
)
You may just not have enough items on your screen!
You can also set physics: const AlwaysScrollableScrollPhysics(), on your SingleChildScrollView.

Several Listviews with same scroll

How can I have in Flutter more than one Listview but using same scroll for both?
My idea is having something like this:
ListTile
ListTile
ListTile
...
Some content
ListTile
ListTile
ListTile
...
I could move that content inside the Listview itself but it gets a bit messy and I'd prefer having different widgets
You have some options , one is with SingleChildScrollView, Column and removing the scroll of your Lists, or also you can do it with Slivers.
This is a sample using the first option:
Scaffold(
body: SingleChildScrollView(
child: Column(
children: [
ListView.builder(
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
itemBuilder: (_, index) => ListTile(
title: Text("Group 1 : Item $index"),
),
itemCount: 9,
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text("Some content"),
),
ListView.builder(
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
itemBuilder: (_, index) => ListTile(
title: Text("Group 2 : Item $index"),
),
itemCount: 9,
),
],
),
),
);
If you want to use Slivers, check this awesome post from Emily Fortuna; https://medium.com/flutter/slivers-demystified-6ff68ab0296f