I am new to flutter and using it for web. I see that there is no built in scrollbar when the page overflows the viewport
Would it be possible to somehow have a javascript script in the html that would check the height of the content periodically and add/remove scroll bar as necessary?
Does this make any sense?
Thank you
I'm not sure if its what you want but if you wrap your Listview with Scrollbar then you get the result you want:
Scrollbar(
child: ListView.builder(
itemCount: 20,
itemBuilder: (context, index) => ListTile(title: Text("Item= ${index + 1}"),),),
)
You can find more here
Related
I am using a ListView Builder, and that has to be wrapped inside a Container. If i don't give a height parameter then i get Vertical viewport was given unbounded height. Now, because of this if i only have 1 item in the list, any content comes after the container, which wastes a lot of screen real estate and doesn't look aesthetically pleasing.
How can i make the parent widget i.e Container() to adjust to the size of child widget ListView.builder() ?
Add this shrinkWrap: true to your ListView and Remove Height from container.
snippet code:
return Container(
child: ListView.builder(itemBuilder: (context, index) {
return listItem(itemArray[index]),
},
itemCount: itemArray.length,
shrinkWrap: true),
);
In the following example, which is making a horizontal list of product cards, a shrinkWrap property was used. Newetherless I did not notice any difference wheither it used or not. So what's actualy the purpose of the shrinkWrap here?
ListView.builder(
shrinkWrap: true,
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
scrollDirection: Axis.horizontal,
itemCount: products.length,
itemBuilder: (context, index) {
return ProductCard(product: products[index]);
},
)
ListView usually fills all the available space of its own parent, without any attention to the minimum size that each item needs. with using shrinkWrap and setting it to true you can change this scenario so that the ListView only occupies the space that each item needs in general. Obviously, if the parent widget does not have the minimum height, it would scroll even if you set shrinkWrap to true.
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.
If you do not set the shrinkWrap property, your ListView will be as big as its parent.
If you set it to true, the list will wrap its content and be as big as it children allows it to be.
I've been trying to make horizontal weekly calendar without using third party packages. I've created a horizontally scrollable Listview, containing three weeks : previous, current and next. Obviously, Listview displays from the first item in the list, which is the first day of the previuos week. Is there any way to control the items displayed and to display the current week with previous and next weeks being accessed through horizontal scrolling?
Here is the code for the ListView.builder:
Container(
height: 60,
child: ListView.builder(
scrollDirection: Axis.horizontal,
padding: const EdgeInsets.symmetric(horizontal: 20),
itemCount: threeWeeks2.length,
itemBuilder: (BuildContext context, int index) {
var date = DateFormat('d').format(threeWeeks2[index]);
return DayCardBig(date);
}
),
),
Also, I can't keep but wondering whether the logic behind this implementation of week view is sound. I tried a more complex widget using carousel slider and pageview, but it just got messy. Is there any other widget that I'm not familiar with that I could use for a scrollable week view ?
Height of listview.builder depend on items count.I have different count of items and in all case i have different height of my listvuew.builder.Is it posible in flutter?
If you mean that you want to have different listview with different size, Yeah! it is possible. ListView automatically create the size for you. But you shared very little information and no code, so i persume you want to have a listView on different cases, then you can do it like this:
return Scaffold(
appBar: AppBar(
title:Text("ListView.builder")
),
body: ListView.builder(
itemCount: count, //the variable which holds the count.
itemBuilder: (BuildContext context,int index){
return ListTile(
//Your code
);
}
),
);
I hope it answers your question, if not try expanding your question or letting me know it in the comment. Happy coding:)
I need to put my reorderable list inside SingleChildScrollView, but the ReorderableListView() doesn't have shrink wrap like ListView(). Is there a work around to accomplish this layout without using an outdated unmaintained package? Although, I haven't tested those available outdated packages yet I don't know if they're built using different widgets or they're just building upon ReorderableListView() if so the error will persist.
you can wrap your ReorderableListView with Expanded Widget in Column.
The flutter team has released 2.0.1 stable recently, which shipped with a new designed ReorderableList class. As I tested, the ReorderableList class can work with Column and SingleChildScrollView smoothly.
code snippet like:
SingleChildScrollView(
child: Column(
children: [
ReorderableList(
controller: ScrollController(),
shrinkWrap: true,
itemCount: itemList.length,
itemBuilder: (BuildContext context, int index) {
final item = itemList[index];
return ReorderableDelayedDragStartListener(
index: index,
key: UniqueKey(),
ListTile(...),
);
},
onReorder: (int oldIndex, int newIndex) {...},
),
],
),
);
For me, I was using a Reorderable Listview inside a Column which was inside an ScrollView.
Tried multiple combinations but was getting the error, so I just wrapped each ListTile of the ListView in a container, and it worked for me. If that doesnt work then try limiting the height of each container.