I have a list view that displays the data fetched from the API. And I'd use the pull_to_refresh_flutter3 package to refresh the page when the page dragged upwards. It was working fine On the mobile. Now I want to implement it on the web. When the user scrolls to the bottom, the RefreshIndicator() should be triggered. How do I achieve this?
SmartRefresher(
controller: homeViewModel.refreshRequestedTask,
enablePullDown: false,
enablePullUp: true,
footer: const ClassicFooter(
loadStyle: LoadStyle.ShowWhenLoading,
),
onLoading: () => homeViewModel.loadMoreRequestedTask(),
child: ListView.builder(
shrinkWrap: true,
itemCount: homeViewModel.taskList.length,
itemBuilder: (BuildContext context, int index) {
return TaskCardView(
taskList: homeViewModel.taskList,
index: index,
);
},
),
),
You can FutureBuilder to work smooth with RefreshIndicator .
OR you can use use StreamBuilder which automatically update app when changes occur.
You just have to return ListView.builder in builder: property
Related
I have a modalBottomSheet with a scrolling list view inside of it.
I want for the scroll control to be transferred to the bottom sheet when the listView reaches the top, so that it can be dragged to dismiss.
Now, the listView gets to the top and even if I keep dragging the bottom sheet will not be dismissed on drag.
Thank you!
Try this way
showModalBottomSheet(
context: context,
isScrollControlled: true,
builder: (context) {
return DraggableScrollableSheet(
maxChildSize: 1,
initialChildSize: .5,
expand: false,
builder: (context, scrollController) {
return ListView.builder(
itemCount: 44,
controller: scrollController,
itemBuilder: (context, index) => ListTile(
title: Text("item $index"),
),
);
},
);
},
);
I am trying to finish my first flutter app
it is a Quran app, and i was able so far to fetch and show the data in page view, each page has list view which contains the data depending on user selection, so one listview can be very long
in the list view there is a list of rich texts, each containing textspans,
here is the code
PageView.builder(
controller: _pageController,
itemCount: ConstantsHelper.selectionCount[widget.args.type],
scrollDirection: Axis.horizontal,
reverse: true,
itemBuilder: (context, index) => StreamBuilder<Object>(
stream: null,
builder: (context, snapshot) {
return FutureBuilder(
future: Provider.of<QuranProvider>(context)
.getSelection(widget.args.type, index + 1),
builder: (context, snapshot) =>
snapshot.connectionState == ConnectionState.waiting
? CircularProgressIndicator()
: ListView.builder(
itemCount: 1,
scrollDirection: Axis.vertical,
itemBuilder: (ctx, index) => Column(
children: WidgetHelper().getContent(
Provider.of<QuranProvider>(context)
.ayas,
context),
),
),
);
},
),
),
basically this is how the app looks like
one rich text can be so long that it requires lots of scrolling and can take the entire page
now, what I need to do, is getting the scrolling position, so when the user opens the app, the app will automatically scroll to the correct page and line
the page part is already done, however, when I try to implement the scrollController I get error ScrollController attached to multiple scroll views
I tried to set a listener in initstate to the scroll listener, the problem is that i am not sure where to add the controller and the listener
the controller.position doesnt change when i scroll, which is not useful.
so, how can I listen to the scrolling position change with a pageview parent?
I have a listview thats connected to the google places api and it updates as the user inputs at address. When the user clicks the address I want to the address to be placed in the text field and the listview to close.
selectedItem in the code below is the item the user selected. I'm trying to update the textformfield with the selectedItem. Any ideas?
TextFormFiled and ListView.builder:
TextFormField(
controller: _controller,
decoration: textInputDecoration.copyWith(
labelText: 'Address or Perferred City'),
),
ListView.builder(
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,
itemCount: _placeList.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(_placeList[index]["description"]),
onTap: () {
selectedItem = _placeList[index]["description"];
print(selectedItem);
});
}),
Image of listview being built in app:
You can use if condition here. Initially selectedItem is null, so ListView is visible, once an item is chosen, it's not null, so we hide the ListView. Make sure to use setState in your onTap method. A simple demo would be
Column(
children: [
TextFormField(),
if (selectedItem == null)
ListView.builder(),
],
)
Added this plugin to flutter project. Here is my following code
body: SlidingUpPanel(
backdropEnabled:true,
panelSnapping:true,
defaultPanelState:PanelState.CLOSED,
panel:ListView.separated(
itemCount:2,
itemBuilder: (BuildContext context, int index){
return Text('ass');
},
separatorBuilder:(BuildContext context, int index){return Divider();},
collapsed:Container(),
),
The problem is when I fully open the slider , I cannot slide it back. If remove Listview it works fine. So how can I slide it back with listview?
This has been fixed in v1.0.0 of sliding_up_panel. If you update your pubspec.yaml to include v1.0.0 of sliding_up_panel and follow this guide, you should be able to get the desired behavior.
Here's what it would look like for your layout:
body: SlidingUpPanel(
backdropEnabled: true,
panelSnapping: true,
defaultPanelState: PanelState.CLOSED,
panelBuilder: (ScrollController sc) => ListView.separated(
controller: sc,
itemCount: 2,
itemBuilder: (BuildContext context, int index){
return Text('ass');
},
separatorBuilder: (BuildContext context, int index){
return Divider();
},
),
collapsed: Container(),
)
I have a page the has a list with refresh indicator. When I have many elements in the list (filling the whole view and more, i.e. I can scroll), the refresh indicator works.
However, when I have only one or two elements in the list (nothing to scroll), then the refresh indicator doesn't work. Is this the expected behaviour? Is there a way to get the indicator to work also for short lists?
I tried wrapping the list view (child of refresh indicator) with a scroll bar but the problem still persists.
Future<void> _onRefresh() async {
_getPeople();
}
#override
Widget build(BuildContext context) {
super.build(context);
return new Container(
child: _items.length == 0
? Center(child: CircularProgressIndicator())
: new RefreshIndicator(
onRefresh: _onRefresh,
child: Scrollbar(
child: new ListView.builder(
controller: controller,
itemBuilder: (context, index) {
return PeopleCard(
People: _items[index],
source: 2,
);
},
itemCount: _items.length,
),
)),
);
}
If the length of the items list is 1 or 2 or any amount that doesn't need scrolling, refresh indicator should also work.
Set the physics to AlwaysScrollableScrollPhysics just like the below code.
new RefreshIndicator(
key: _refreshIndicatorKey,
color: Colors.blue,
onRefresh: (){
setState(() {
_future = fetchPosts(http.Client());
_getAvalailableSlots();
});
},
child: ListView.builder(
physics: AlwaysScrollableScrollPhysics(),
itemCount: data.length,
itemBuilder: (context, i) {
//do something
}
)
)
Case 1:
Use AlwaysScrollableScrollPhysics() in your Listview or SingleChildScrollView.
physics: const AlwaysScrollableScrollPhysics(),
Case 2:
If you want to use other scroll physics, use this way...
physics: BouncingScrollPhysics(
parent: AlwaysScrollableScrollPhysics(),
),
Case 3:
Make sure you didn't make shrinkWrap, true. ShrinkWrap has to be false like default.
shrinkWrap: true. ❌
shrinkWrap: false. ✅
shrinkWrap: false,
Case 4:
If you have any custom widgets other than a listview, use stack and listview this way...
RefreshIndicator(
onRefresh: () async {
print('refreshing');
},
Stack(
children: [
YourWidget(),
ListView(
physics: const AlwaysScrollableScrollPhysics(),
),
],
),
),
To use with BouncingScrollPhysics:
RefreshIndicator(
onRefresh: () async {
},
child: ListView.builder(
physics: BouncingScrollPhysics(
parent: AlwaysScrollableScrollPhysics()),
itemBuilder: (context, index) {
return Text("${index}");
}),
To make RefreshIndicator always appear, set physics: const AlwaysScrollableScrollPhysics() for the scrollable child like below.
ListView(
physics: const AlwaysScrollableScrollPhysics(),
children: <Widget>[widget.bodyWidget]
)
If you still have some errors, the below might help.
ListView widget needs to have height value to be "always" scrollable vertically. So wrap it with SizedBox or some other proper widget and set the height.
How to fix the height? Get the height of viewport using MediaQuery.of(context).size.height and, if needed, subtract the value of non-scrollable part.
If you use SingleChildScrollView and it's not working with AlwaysScrollableScrollPhysics(), it is because the child doesn't have height. fix the child's height or just use ListView.
To sum up, the following worked for me.
sizes.bottomNavigationBar and sizes.appBar are the constant variables I made to customize the appbar and navbar.
RefreshIndicator(
onRefresh: widget.onRefresh,
child: SizedBox(
height: MediaQuery.of(context).size.height -
sizes.bottomNavigationBar -
sizes.appBar,
child: ListView(
physics: const AlwaysScrollableScrollPhysics(),
children: <Widget>[widget.bodyWidget]
)),
)
If you're finding any reliability, Refresh indicator does not show up part of the official doc would help.
If you're using ListView inside of Column with Expanded.
Try Removing
shrinkWrap:true