there I have 3 nested listview. Here is it's representation.
(Items, titles, subtitles are nested listview builder)
In default, title and leading icon is aligned to each other. Title's subtitles are also another list view. As you can see when my title has only one subtitle there is no problem. But if you look item 3 it has 3 subtitle so it's going to up. And my top padding change also my leading icon and my title are not aligned anymore.
My listview builders main representation:
child: ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {
...
child: ListView.builder(
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,
itemCount: items.titles.length,
itemBuilder: (context, titleInd) {
.........
child: ListTile(
.....
subtitle: ListView.builder(
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,)
....
),
}
Couldn't find the reason that effect my paddings and leading icon-title alignment. What can be reason of that and How can I fix this issue?
Related
My question is very simple but I did not find a result.
In a ListView.builder (with horizontal scroll) for example if there are 5 elements the user can scroll them all at once. I would like that the user can scroll only 1 by 1.
In short I would like the animation of the list to stop at each element.
Example of my list :
Widget _list()
{
return ListView.builder(
physics: const ClampingScrollPhysics(),
scrollDirection: _horizontalDisplay? Axis.horizontal : Axis.vertical,
itemCount: data!.length,
itemBuilder: (context, index)
{
return widgetToDisplay(index);
}
);
}
The ListView.builder can't make it, you need to use carousel_slider package
I'm building a data list like this
List<String> list=[.....]; //a lot of data
ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
controller: scrollController,
itemCount: list.length,
itemBuilder: (context, i) =>
ListTile(title: Text(list[i])))
It can scroll on vertical now but some long data will overflow on the right,so I want to add a horizontal scroll outside.
I tried many ways but it always return error such as "'constraints.hasBoundedWidth': is not true."
Code like this works fine but I have to set a width in Container first :
ListView(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
children: [
Container(
width: 2000, //will return error if not set a value
child: ListView.builder(.....)
)])
Is there any way to add a horizontal scroll outside with unknown child width?
Nothing wrong in vertical list. I have run code in android studio as well.
no need to use Listview in the inner of another list view. you can wrap your title with Expanded widget, if your list title overflow on right side of screen.
return ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
padding: EdgeInsets.all(10),
itemCount:100,
itemBuilder: (context, i) =>
ListTile(title: Text("{$i ===}babul dshdshfdsh dfhdhfdh hbfdshhds hdfhdsvhfdsv hdsvd hdsfhdshv dhfbhdsb hdsghshdsg hdvshvv jdsfjfdbvjfdnfjbfjbfhbfbf fhbfdhbfdhbf")));
}
Below code will serve your purpose. Happy coding...
return Container(
child: ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemCount:10,
itemBuilder: (context, i) =>
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: new Text(
"Description that is too long in text format(Here Data is coming from API Description that is too long in text format)",
style: new TextStyle(
fontSize: 16.0, color: Colors.black87,
),
),
),
),);
I used SingleChildScrollView in the table I created friends. I want SingleChildScrollView to stay on the screen all the time, how can I do this (i.e. I don't want it to be shown only when I come with the mouse)
my code
enter link description here
I want the scrollbar to stay fixed
wrap your List with ScrollBar.
set isAlwaysShown = true
Scrollbar(
isAlwaysShown: true,
child: GridView.builder(
itemCount: 10,
gridDelegate:
const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
itemBuilder: (BuildContext context, int index) {
return Center(
child: Text('item $index'),
);
},
),
);
I was wondering if anyone had an issue where they use a ListView.builder() and then it doesn't want to scroll
return ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemCount: widget.product.category.length,
itemBuilder: (context, index) {
final item = widget.product.category[index];
return ListTile(title: Text(item));
},
)
I'd suggest you do the following:
Remove shrinkWrap and make sure the value passed to itemCount is large enough to make the widget scroll.
If you place the list view inside a vertically scrolling list, it's not going to scroll... In this case, you should probably be using slivers
I have a list of photos and want that one photo should be shown at a time. By this I mean if a user scrolls down then the upper photo should not be seen only the new one should be seen. It should not be like you can hold the scroll between two images. I want something like instagram reels where one reel is visible at a time.
CODE:-
ListView.builder(
shrinkWrap: true,
itemCount: postList.length,
itemBuilder: (context,index)
{
return postList[index];
},
);
You can use the Physics Property of Listview. use this
physics: PageScrollPhysics(),
You could achieve this using a PageView widget, or you could also use some plugin like tiktoklikescroller
its your listView
ListView.builder(
shrinkWrap: true,
itemCount: postList.length,
itemBuilder: (context,index)
{
return postList[index];
},
);
You can use pageView with Scroll direction vertical,
postList(){
return PageView(
scrollDirection: Axis.vertical,
itemBuilder: yourPageItems...,
itemCount: listItemCount,
}