I have a problem with infinite scroll in flutter, I am loading six items per page and loading more as I scroll , this works perfectly with a smaller screen size but the problem comes in when I use an emulator with a larger screen size, when the screen size is larger then the first six items don't fill the screen hence I cannot scroll in order to load the other items.
Does anybody have an idea of how I can get around this?
Thanks
You can use ListView.builder. The ListView.builder constructor takes an IndexedWidgetBuilder, which builds the children on demand. This constructor is appropriate for list views with a large (or infinite) number of children because the builder is called only for those children that are actually visible.
return ListView.builder(
padding: const EdgeInsets.all(10.0),
itemBuilder: (context, i) {
if (i.isOdd) return const Divider();
final index = i ~/ 2;
if (index >= _listItems.length) {
_listItems.addAll(_newItems); //load more items here
}
return yourWidget(_listItems[index]);
},
);
This way no need to use scrollController. You can refer to this codelab for more info.
Related
Instead of infinite scrolling in a Listview.builder.
I want to be able to see x amount of items in my ListView and then going on to the next page should show the next x amount of items.
What I have so far is just a standard ListView.builder:
Listview.Builder(
itemCount: data.length
itemBuilder:(context, index){
return Card(
child: ListTile(
title: data[index]
)
);
}
)
You can use a PageController to control which page is visible in the view. In addition to being able to control the pixel offset of the content inside the PageView, a PageController also lets you control the offset in terms of pages, which are increments of the viewport size.
The PageController can also be used to control the PageController.initialPage, which determines which page is shown when the PageView is first constructed, and the PageController.viewportFraction, which determines the size of the pages as a fraction of the viewport size.
Refer to :
geeksforgeeks
Flutter Docs
Hope this helps. Happy Coding :)
I need to get the whole list.builder height including the part that is out of the screen view
The List children vary in height
i used the GlobalKey method but it is giving me only the height of the list shown in the screen
I found this solution and it's working and give me the full list.builder height after scrolling event
but when adding more children to the list.builder by changing the state
this code doesn't work anymore
scrollController.addListener(() {
double? fullListViewHeight;
double fullListHeightHelper = listKey.currentContext!.size!.height +
scrollController.position.extentAfter;
fullListView ??= fullListHeightHelper;
}
listview.builder only build the item that shown to user, in order to get the height with GlobalKey method, you can use listView which build all item at the same time. If you don't know how pass your list to listView , see this example:
List yourList = [...];
_buildList(){
List<Widget> _children =yourList.map((e) => YourListItem()).toList();
return ListView(
key:yourKey,
children: _children,
);
}
it is giving me only the height of the list shown in the screen
yes.. thats correct. because listview not render all the children. see the documentation of listview:
The ListView.builder ...constructor is appropriate for list views with
a large (or infinite) number of children because the builder is called
only for those children that are actually visible.
to get exact height of all children is impossible. since when the widget child is scrolled out of view, the associated element subtree, states and render objects are destroyed.
I think you need to calculate it manually or make the children height is same for all.
To calculate it, you need to make each item the same height. Then,
To get the height of the ListView.builder you simply multiply the height of each item by the length of the ListView.builder.
Is there a way we can use ScrollController.position.pixels to know the scrolling index of a listview in flutter? I'm trying to restore the last scrolling index between app restarts.
You can use the flutter_scrollview_observer lib to implement your desired functionality without invasivity
Create and use instance of ListView normally.
ListView _buildListView() {
return ListView.separated(
...
);
}
Pass the ListView instance to the ListViewObserver, then you can obtain the desired result in the onObserve callback
ListViewObserver(
child: _buildListView(),
onObserve: (resultModel) {
print('firstChild.index -- ${resultModel.firstChild?.index}');
print('displaying -- ${resultModel.displayingChildIndexList}');
},
)
I have this listview.builder which is supposed to show some orders from an array of Order objects based on their status.
It looks kinda like this:
The List works just fine until, for some reason, when I scroll down and the viewport can only display the order with index (the one in the listview builder function) 5 and then press another category like "New", setState() is called and the whole thing rebuilds, but the builder's index starts at 5 and the listview.builder doesn't build anything from 0 - 4. I've printed the index in the builder and caught this bug, but I still don't understand why this is happening.
This is what my listview.builder code looks like:
ListView.builder(
controller: _scrollController,
shrinkWrap: true,
itemBuilder: (BuildContext context, int index) {
print("INDEX: $index");
return _showOrder(index);
},
itemCount: orders.length,
),
This is the code for _showOrder():
Widget _showOrder(int i) {
String _currOrderStatus = orders[i].orderStatus;
/// _selectedOrderStatus is just a String which changes depending on the selected category of orders.
/// e.g. "New" or "Past"
return _currOrderStatus == _selectedOrderStatus
? ShowMyOrderWidget()
: SizedBox(
/// AND FOR SOME REALLY WEIRD REASON, THIS FIXES THE PROBLEM
/// It works with any height, as long as it's not 0, but if I have a lot of them, then the
/// layout gets spaced out and messy. With such a low number, this is highly unlikely, but
/// still seems like a stupid fix.
/// Why does this work? Why is this happening? Is there a better way to fix it?
height: 0.000000001,
);
}
And I just call setState() in the onPressed() function of those buttons on top of the screen.
Changing the items inside the ListView doesn't reset scroll position.
Since you're already assigning a ScrollController to your ListView, try calling "jumpTo(0.0)" to reset it's scroll position before calling setState().
_scrollController.jumpTo(0.0);
I would like the ReorderableListView not to take up the whole height which is given to it, but to be as tall as the item views that it contains.
I could make the list either flex and fill the whole height it is given, or put it in a SizedBox and have a fixed height.
I'd like to add an + Add list tile directly under the list items (similar to Google Keep on Android)
Thank you
You can try this:
Wrap your List with an Expanded widget.
Fetch the number of items in your list and return the Add List tile widget at the length-1 position of your list.
You can alter the size of your ListView in correlation to the number of items fetched from the list.
Expanded will help you alter the length dynamically.
eg:
Expanded(
child: new ListView.builder
(
itemCount: litems.length,
itemBuilder: (BuildContext ctxt, int Index) {
return new Text(litems[Index]);
if(length==length-1){
//**call your Add List tile widget here**
}
}
)
)