I am trying to make ListView.builder horizontal scrolling from right to left
My code:
SliverToBoxAdapter(
child: Container(
height: MediaQuery.of(context).size.height / 4.5,
margin: const EdgeInsets.only(bottom: 5.0, top: 10.0),
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: list.length,
itemBuilder: (BuildContext context, int index) {
return InkWell(/* ... */)
}
),
),
);
You just need to add reverse parameter to the ListView
here is an example:
ListView.builder(
reverse: true,
scrollDirection: Axis.horizontal,
itemCount: list.length,
itemBuilder: (context, position) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
child: Text(list[position]),
color: Colors.grey,
height: 10,
width: 10,
),
);
},
)
for horizontal
ListView.builder(
reverse: true,
scrollDirection: Axis.horizontal,
for vertical
ListView.builder(
reverse: true,
scrollDirection: Axis.vertical,
best way to make it is to wrap your ListView with Directionality widget with TextDirection.rtl
like following code
Directionality(
textDirection: TextDirection.rtl,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: list.length,
itemBuilder: (BuildContext context, int index) {
return InkWell(/* ... */)
}
),
);
Related
I want to have a horizontally scrollable container and inside it somewhere a ListView, which scrolls vertically:
return SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: ListView.builder(
shrinkWrap: true,
primary: false,
itemCount: 5,
itemBuilder: (context, index) {
return const SizedBox(
height: 10,
width: 10,
);
},
),
);
but I get this error: RenderBox was not laid out. I already put Expanded around everything imaginable. It has to be a SingleChildScrollView.
I need help.
Provide width on ListView, it will solve the issue.
LayoutBuilder( /// needed to be top level
builder: (context, constraints) => SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: SizedBox(
width: constraints.maxWidth,
child: ListView.builder(
primary: false,
physics: ClampingScrollPhysics(),
itemCount: 5,
itemBuilder: (context, index) {
return const SizedBox(
height: 10,
width: 10,
);
},
),
),
),
);
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: SizedBox(
width: MediaQuery.of(context).size.width, //you may get different way like LayoutBuilder on top level
child: ListView.builder(
primary: false,
physics: ClampingScrollPhysics(),
itemCount: 5,
itemBuilder: (context, index) {
return const SizedBox(
height: 10,
width: 10,
);
},
),
),
);
In my application, I want to show two different products on the home screen, horizontally and vertically. But I want to do this with ListView.Builder as they both come as lists. I couldn't find the right usage of this, can you help with this?
SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
SizedBox(
height: 200.0,
child: ListView.builder(
physics: ClampingScrollPhysics(),
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemCount: 25,
itemBuilder: (BuildContext context, int index) =>
Card(
child: Center(child: Text('Horizontal List Child')),
),
),
),
ListView.builder(
itemCount: 10,
shrinkWrap: true,
scrollDirection: Axis.vertical,
itemBuilder: (context, index) {
return Expanded(
child: Card(
child:
Center(child: Text('Vertical List Child'))),
);
},
)
],
),
),
I can do it without using ListView.builder but I need to use ListView.builder. The height of the vertical part should be equal to the element inside.
You must need to define the height of any scroll view. I prefer the horizontal scroll view
SingleChildScrollView(
child: Column(
children: [
Container(
height: 150,
child: ListView.builder(
physics: ClampingScrollPhysics(),
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemCount: 25,
itemBuilder: (BuildContext context, int index) {
...
...
...
},
),
),
ListView.builder(
itemCount: 10,
shrinkWrap: true,
scrollDirection: Axis.vertical,
itemBuilder: (context, index) {
...
...
...
},
),
],
)
)
Remove the SingleChildScrollView.
Add an Expanded as parent to the second ListView.
Remove the Expanded from the Card
Scaffold(
body: SafeArea( //in case you dont have appbar
child: CustomScrollView(
physics: const BouncingScrollPhysics(),
slivers: [
const SliverToBoxAdaptar(child:Container(child:ListView(...)))// horizontalList
const SliverList()// verticalSliverList
],
),
),
);
try thiss
Expanded makes item inside becomes full body.
just remove it and the height to make item height equals to card
return Scaffold(
appBar: AppBar(
title: Text("Sample"),
),
body: Center(
// Center is a layout widget. It takes a single child and positions it
// in the middle of the parent.
child: SingleChildScrollView(
physics: ScrollPhysics(),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: Text("Sample 1"),
),
Container(
height: 100,
child: ListView.builder(
physics: ScrollPhysics(),
itemCount: 5,
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemBuilder: (context, index) {
return Card(
child: Image.network("https://i.picsum.photos/id/9/250/250.jpg?hmac=tqDH5wEWHDN76mBIWEPzg1in6egMl49qZeguSaH9_VI",),
);
}
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text("Sample 2"),
),
ListView.builder(
physics: ScrollPhysics(),
itemCount: 5,
shrinkWrap: true,
scrollDirection: Axis.vertical,
itemBuilder: (context, index) {
return Card(
child: Image.network("https://i.picsum.photos/id/9/250/250.jpg?hmac=tqDH5wEWHDN76mBIWEPzg1in6egMl49qZeguSaH9_VI"),
);
}
),
],
),
),
),
);
I have 2 rows of Listview builders (scrollable horizontally) showing interests.
Hoping that the first row will show the first 6 interests, and the next row showing the rest on the list.
How do I make the itemCount in the second as a range from 7 all the way to the end?
Any help is appreciated. The snippet of the code is as follows:
Padding(
padding: const EdgeInsets.fromLTRB(6, 6, 0, 0),
child: Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height * 0.045,
child: ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
padding: const EdgeInsets.all(1),
itemCount: 6,
itemBuilder: (context, int index) {
return Interests2(AvailableInterestChosen(
allInterests[index],
isChosen: false,
));
}),
),
),
Padding(
padding: const EdgeInsets.fromLTRB(6, 3, 0, 0),
child: Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height * 0.045,
child: ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
padding: const EdgeInsets.all(1),
**// itemCount: allInterests range from 6 to end of list,**
itemBuilder: (context, int index) {
return Interests2(AvailableInterestChosen(
allInterests[index],
isChosen: false,
));
}),
),
),
...
The bold part in the 2nd padding is where I'm having trouble building the range.
You can call your second list view in listview.builder like that
ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
padding: const EdgeInsets.all(1),
itemBuilder: (context, int index) {
return Interests2(AvailableInterestChosen(
allInterests[6+index],
isChosen: false,
));
As parameters for second List view, you can use allInterests.size()-6 for item count, and index + 6 for access index to allInterests list.
second part:
Padding(
padding: const EdgeInsets.fromLTRB(6, 3, 0, 0),
child: Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height * 0.045,
child: ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
padding: const EdgeInsets.all(1),
**// itemCount: allInterests range from 6 to end of list,**
itemBuilder: (context, int index) {
int newIndex = index + 6;
return Interests2(AvailableInterestChosen(
allInterests[newIndex],
isChosen: false,
));
}),
itemCount: allInterests.length - 6
),
),
Below is my code, I want to add some extra space of height 50, which comes at the end of list item. because when my second child of stack appears it nearly overlaps the last item of list view. I've tried wrapping ListView.builder with column and added a container at last but destroyed my whole structure. for this scenario I've to wrap the column into Single scrollable which pushed stack 2nd widget to be at the end of ListItem.(But I don't want Stack 2nd object to be scrollable).
As you can see I'm not able to click on HotDog.
body: Stack(
children: <Widget>[
ListView.builder(
itemCount: itemData.length,
shrinkWrap: true,
scrollDirection: Axis.vertical,
itemBuilder: (BuildContext context,int index){
return Text(data[index].name);
}
),
Padding(
padding: const EdgeInsets.all(10.0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
color: Colors.cyan
),
padding: EdgeInsets.all(10),
height: 60,
),
)
],
),
How about you add empty last item like below code?
ListView.builder(
itemCount: itemData.length + 1,
shrinkWrap: true,
scrollDirection: Axis.vertical,
itemBuilder: (BuildContext context,int index){
if (index == item.Data.length) {
return SizedBox(height: 50);
} else {
return Text(data[index].name);
}
}
),
ListViewBuilder should be wrap inside Expanded widget which will take fullscreen
and give container bottom width as per need.
Example:
var itemData = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
Stack(
children: <Widget>[
Column(
children: <Widget>[
Expanded(
child: Container(
margin: EdgeInsets.only(bottom: 20),
child: ListView.builder(
itemCount: itemData.length,
shrinkWrap: true,
scrollDirection: Axis.vertical,
itemBuilder: (BuildContext context, int index) {
return Container(
height: 80,
child: Text("Text :" + index.toString()));
}),
),
),
Align(
alignment: Alignment.bottomCenter,
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
color: Colors.cyan),
padding: EdgeInsets.all(10),
height: 60,
),
),
)
],
),
],
),
Output:
This can be easily done by adding bottom padding in listview.builder
Expanded(
child: ListView.builder(
padding: EdgeInsets.only(bottom: 100), //Increase this as per your requirment
itemCount: 5,
itemBuilder: (cxt , idx) {
return YourWidget();
}
Since you're listview.builder is inside a stack, you simply use the Positioned widget for this. Simply wrap your listview with Positioned like below:
Positioned(
bottom:50, //adjust this since this is the padding inside the stack
child:Container(
width:MediaQuery.of(context).size.width //width of the whole phone
child: ListView.builder(
itemCount: itemData.length,
shrinkWrap: true,
scrollDirection: Axis.vertical,
itemBuilder: (BuildContext context,int index){
return Text(data[index].name);
}
),
),
),
To ensure your Container stays at the bottom wrap it with a positioned widget and set the bottom property to 0:
Positioned(
bottom:0, //adjust this since this is the padding inside the stack
child:Container(),
),
Here is a one minute clip showing how to use the Positioned widget: https://www.youtube.com/watch?v=EgtPleVwxBQ
There is no specific way to do it by default you have to do it manually with own logic
ListView.builder(
itemCount: itemData.length,
shrinkWrap: true,
scrollDirection: Axis.vertical,
itemBuilder: (BuildContext context,int index){
if(index == itemData.length - 1 )
return Padding(
padding: EdgeInsets.only(bottom : 50),
child : Text(data[index].name)
);
return Text(data[index].name);
}),
I have a Scrollbar on top of my widget tree showing on the right side when scrolling vertically. Now further on in my widget tree I have a horizontal ListView. The scrollbar is showing up there too if the user scrolls on horizontal. I don't want the ScrollBar showing up there. Is there any common way to disable showing up on the horizontal axis?
#override
Widget build(BuildContext context) {
return SafeArea(
child: Scrollbar(
child: SingleChildScrollView(
child: Container(
height: MediaQuery.of(context).size.height * 5,
margin: EdgeInsets.all(25),
child: Column(
children: <Widget>[
Row(
...
Later on the listview:
Expanded(child:
Consumer<Model>(builder: (context, myModel, child) {
return ListView.builder(
physics: NeverScrollableScrollPhysics(),
scrollDirection: Axis.vertical,
itemCount: list.length,
itemBuilder: (ctx, index) => ChangeNotifierProvider.value(
value: list[index],
child: GestureDetector(
Imagine you have a widget that contains two ListViews:
Scrollbar(
controller: scrollController,
child: ListView.builder(
controller: scrollController,
scrollDirection: Axis.vertical,
physics: AlwaysScrollableScrollPhysics(),
itemBuilder: (context, index) {
return SizedBox(
height: 90,
child: ListView.separated(
scrollDirection: Axis.horizontal,
physics: AlwaysScrollableScrollPhysics(),
itemBuilder: (context, index) {
return Container(
height: 100,
width: 100,
color: Colors.blue,
);
},
separatorBuilder: (context, index) {
return SizedBox(
width: 10,
);
},
itemCount: 50,
),
);
},
itemCount: 50,
),
),
A simple solution would be to wrap the ListView with a NotificationListener and set the onNotification to return true. In this case, the horizontal ListView would be the widget in question. This will tell the NotificationListener that the notification has been handled, which will stop it from sending out a ScrollNotification up the Widget Tree.
So the solution would be:
Scrollbar(
controller: scrollController,
child: ListView.builder(
controller: scrollController,
scrollDirection: Axis.vertical,
physics: AlwaysScrollableScrollPhysics(),
itemBuilder: (context, index) {
return SizedBox(
height: 90,
child: NotificationListener<ScrollNotification>(
onNotification: (_) => true,
child: ListView.separated(
scrollDirection: Axis.horizontal,
physics: AlwaysScrollableScrollPhysics(),
itemBuilder: (context, index) {
return Container(
height: 100,
width: 100,
color: themeColor,
);
},
separatorBuilder: (context, index) {
return SizedBox(
width: 10,
);
},
itemCount: 50,
),
),
);
},
itemCount: 50,
),
),
For an in-depth understanding, consider reading up the docs