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,
);
},
),
),
);
Related
I need to scroll the whole screen, i am using (single child scroll view => stack => ListView.builder). but there is no scrolling. however i am using:
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
The Code Is:
return Scaffold(
body: LayoutBuilder(builder: (context, constraints) {
return SingleChildScrollView(
physics: BouncingScrollPhysics(),
child: Container(
height: constraints.maxHeight,
child: Stack(children: <Widget>[
Container(color: Colors.red,height: 300,),
Container(
margin: EdgeInsets.only(
top: screen.isPhone ? 150 : 240,
),
child: Column(
children: [
Card(
elevation: 5,
child: ListView.builder(
itemCount: 20,
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemBuilder: (context, index) =>
ProductItemWidget(showDeleteIconButton: true),
),
),
Text("HEY"),
],
),
),
remove height: constraints.maxHeight,
I am trying to have a vertical list of horizontal listviews. Currently the User Experience is really bad in that scrolling does sometimes not work. This is similar to like a youtube homepage or Spotify where you scroll down and each row is scrollable
Expanded(
flex: 5,
child: Container(
width: double.infinity,
height: 500,
child: ListView.builder(
shrinkWrap: true,
physics: ScrollPhysics(),
itemCount: skills.length,
itemBuilder: (context, index){
return CategoryHomeScreen(videosInSection: videoRecommended[skills[index]] ?? [], skill: skills[index]);
}),
),
),
The widget referred to in item builder
return Column(
children: [
Padding(
padding:
EdgeInsets.fromLTRB(HomeBrain.headingPaddingLeftSide, 0, 0, 0),
child: Text(
widget.skill,
style: Constants.subHeading,
)),
//these are horizontal scrollviews to see more videos
Container(
height: HomeBrain.videoHeightBox +
HomeBrain.sizeBetweenvideoAndSub +
HomeBrain.videoHeight -
HomeBrain.takeAwayFromContainerSizedOfVideoFram,
child: SizedBox(
height: 0,
width: double.infinity,
child: ListView.builder(
physics: ClampingScrollPhysics(),
scrollDirection: Axis.horizontal,
itemCount: widget.videosInSection.length,
itemBuilder: (context, int index) {
//passes over author, thumbnail url, thumbnail and video url so each tile is unique
return ScreenTile(
authorName: widget.videosInSection[index].userNameBy,
pathToThumbnail: widget.videosInSection[index].thumbNailUrl,
thumbnail: widget.videosInSection[index].thumbnail,
pathToVideo: widget.videosInSection[index].videoUrl,
profilePic: widget.videosInSection[index].profilePic,
videoBrain: widget.videosInSection[index],
);
},
),
),
),
],
);
you can do it this way. This is for demo purposes.
ListView.builder(
itemCount: 15,
itemBuilder: (_, i) {
return _horizontalListView();
},
),
Widget _horizontalListView() {
return SizedBox(
height: 120,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemBuilder: (_, __) => _buildBox(color: Colors.orange),
),
);
Widget _buildBox({required Color color}) => Container(margin: EdgeInsets.all(12), height: 100, width: 200, color: color);
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
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(/* ... */)
}
),
);