I got this problem to my ui at the bottom where users see their reviews. It appears this overflowed thing and I don't know what I should add to make this disappear . I don't have a scaffold to use resizeToAvoidBottomInset: false . The app is made with flutter , what I should change?
return ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemCount: snapshot.data.documents.length,
itemBuilder: (context, index) {
return Container(
width: 200,
margin: EdgeInsets.only(
top: 8, bottom: 8, right: 12),
decoration: BoxDecoration(boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.1),
blurRadius: 2,
spreadRadius: 1)
], borderRadius: BorderRadius.circular(4)),
child: Column(
children: [
Row(
children: [
CircleAvatar(
backgroundImage: NetworkImage(
snapshot.data.documents[index]
.data["avatarUrl"]),
),
SizedBox(width: 8),
Text(snapshot.data.documents[index]
.data["name"],style: TextStyle(fontWeight: FontWeight.bold))
],
),
_buildRatingStars(snapshot.data
.documents[index].data["rating"]),
Text(snapshot
.data.documents[index].data["text"])
],
),
);
});
Your problem is not with the ListView.builder but with the fixed width of your Container.
Try to remove the width: 200:
return ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemCount: snapshot.data.documents.length,
itemBuilder: (context, index) {
return Container(
width: 200,
Related
I want to create a ui in flutter like this
And I have managed it. As I have used pageview builder for this, it is asking for a page height, now the problem is that I have given the height according to this screen and now in mobiles with shorter screeen I am not able to get same results.
Container(
margin: EdgeInsets.fromLTRB(20.w, 20.h, 10.w, 3.h),
height: 520.h,
child: Column(
children: [
Expanded(
child: PageView.builder(
itemCount: controller.pages.length,
controller: controller.pageController,
itemBuilder: (context, index) {
return GridView.builder(
// physics: NeverScrollableScrollPhysics(),
gridDelegate:
const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
),
itemCount: controller.pages[index].length,
itemBuilder: ((context, index1) {
return GestureDetector(
onTap: () async {
//some code
},
child: MenuTileWidget(
title: controller
.pages[index][index1].title,
image: controller
.pages[index][index1].image,
),
);
}));
}),
),
SmoothPageIndicator(
controller: controller.pageController,
count: controller.pages.length,
effect: WormEffect(
activeDotColor: color2,
spacing: 14.w,
dotWidth: 16.sp,
dotHeight: 16.sp,
dotColor: Colors.white),
),
],
),
),
And if I comment height, it gives exception.
Try using MediaQuery() like this:
...
Container(
margin: EdgeInsets.fromLTRB(20.w, 20.h, 10.w, 3.h),
height: MediaQuery.of(context).size.height,
child: Column(
...
This is probably going to hide your indicators. So to solve this use Stack() instead of Column() then control the position of the indicator. Here is the full code:
Container(
margin: EdgeInsets.fromLTRB(20.w, 20.h, 10.w, 3.h),
height: 520.h,
child: Stack(
children: [
Expanded(///<- Remove this you won't need it anymore
child: PageView.builder(
itemCount: controller.pages.length,
controller: controller.pageController,
itemBuilder: (context, index) {
return GridView.builder(
// physics: NeverScrollableScrollPhysics(),
gridDelegate:
const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
),
itemCount: controller.pages[index].length,
itemBuilder: ((context, index1) {
return GestureDetector(
onTap: () async {
//some code
},
child: MenuTileWidget(
title: controller
.pages[index][index1].title,
image: controller
.pages[index][index1].image,
),
);
}));
}),
),
Align( ///<- Or Positioned
alignment: Alignment.bottomCenter,
child: SmoothPageIndicator(
controller:
controller.pageController,
count:
controller.pages.length,
effect: WormEffect(
activeDotColor: color2,
spacing: 14.w,
dotWidth: 16.sp,
dotHeight: 16.sp,
dotColor:
Colors.white),
),
)
],
),
),
I have a widget that displays icons from a server. I display all the icons in the list in one line with horizontal scrolling. I need to make sure that the icons are added in two rows at most, and if there are more of them, then add horizontal scrolling, how to do this?
Widget _amenities(PublicChargingStationModel station) {
List<Widget> assetsList = station.getAmenitiesAsset;
return SizedBox(
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: assetsList.length,
itemBuilder: (context, index) => Padding(
padding:
EdgeInsets.only(right: index == assetsList.length - 1 ? 0 : 8),
child: Container(
width: 30,
height: 30,
alignment: Alignment.center,
decoration: const BoxDecoration(
color: constants.Colors.purpleMain,
shape: BoxShape.circle,
),
child: assetsList[index],
),
),
),
);
}
Instead of using list view, you can use grid view. Like this:
SizedBox(
height: 100,
width: 300,
child: GridView.builder(
scrollDirection: Axis.horizontal,
itemCount: _list.length,
itemBuilder: (context, index) => Container(
width: 30,
height: 30,
alignment: Alignment.center,
decoration: const BoxDecoration(
color: Colors.purple,
shape: BoxShape.circle,
),
),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2, crossAxisSpacing: 8, mainAxisSpacing: 8),
),
)
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,
How to make flutter ListView.builder without a specific height(dynamic or not declare the height)
I want to make a list of item, and then when the item going to full height it will wrapped
When i run this code, it returns error because it need height and width
I want to make the list of item like this
Wrap(
spacing: 12,
runSpacing: 10,
children: [
ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemCount: movieDetail['genre'].length,
itemBuilder: (context, index) {
return ClipRRect(
borderRadius: BorderRadius.circular(8),
child: Container(
color: darkGrayColor,
child: Padding(
padding: EdgeInsets.symmetric(
vertical: 4, horizontal: 12),
child: Text('Testing', style: secondaryInfoText),
),
),
);
},
),
],
),
Use GridView.builder
GridView.builder(
scrollDirection: Axis.horizontal,
itemCount: movieDetail['genre'].length,
gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2, childAspectRatio: 1),
itemBuilder: (context, index) {
...
}
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);
}),