I am trying to match the listtile height to the height of the card but listtile height is very small. it has default height which is very small. i want to change it to match the height of the card.please help me.
Following below is my code .
Container(
margin: EdgeInsets.only(top: 16),
child: ListView.builder(
itemCount: listitems.length,
shrinkWrap: true,
physics: ClampingScrollPhysics(),
itemBuilder: (context, index) {
return Column(children:<Widget>[
Container(
height: 100,
child: Card(
semanticContainer: true,
clipBehavior: Clip.antiAliasWithSaveLayer,
child:ListTile(
leading: Image.network('https://images.unsplash.com/photo-1550251592-aee2da85a87e?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80'),
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
elevation: 5,
margin: EdgeInsets.all(10),
),
),
]);
}),
),
Any help would be much appreciated
If I understood the documentation correctly, ListTile is just a pre-customized composition of a row with a fixed-height. I couldn't figure out what final result you're looking for but I checked your code,
a.Using Container instead of ListTile to set a row/column composition would help you, though I used the container alone and it worked.
b.Try removing the parent container(the one with the height:110), put a Container as the child of the card. (your content can go under the new container instead of listTile).
please tell me if you're looking for a specific result and my answer is irrelevant.
return Scaffold(
body: Container(
margin: EdgeInsets.only(top: 16),
child: ListView.builder(
itemCount: listitems.length,
shrinkWrap: true,
physics: ClampingScrollPhysics(),
itemBuilder: (context, index) {
return Column(children:<Widget>[
Card(
semanticContainer: true,
clipBehavior: Clip.antiAliasWithSaveLayer,
child:Container(
child: Image.network('the image url'),
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
elevation: 5,
margin: EdgeInsets.all(10),
),
]);
}),
),
);
Related
I've got a ListView within a Column. In that Listview I want to place a couple of ListTiles. Unfortunately the tiles behave weird when scrolling. They are shown on top of the other widget placed in the Column
Is there a way to prevent that behaviour of ListTile?
Here is my code:
Column(children: [
const ChatHeader(),
Padding(
padding: const EdgeInsets.all(8),
child: SizedBox(
height: 300,
child: ListView.builder(
padding: const EdgeInsets.only(left: 8, right: 8),
scrollDirection: Axis.vertical,
itemCount: myCollection,
shrinkWrap: true,
physics: const BouncingScrollPhysics(),
itemBuilder: (BuildContext context, int index) {
var item = myCollection[index];
return Column(children: [
Row(
children: [
Container(
decoration: boxDecoration(
radius: 20, bgColor: d_colorPrimary)),
text("${item.value1}", fontSize: textSizeMedium)
],
),
ListTile(
dense: true,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(8))),
tileColor: quiz_light_gray,
title: SizedBox(
child: text(item.name,
fontSize: textSizeMedium,
textColor: d_textColorPrimary,
isLongText: true,
maxLine: 10)))
]);
}))),
16.height,
Container(color: greenColor, child: Text("text input here"))
]);
Replacing the ListTiles with a Container solves this problem. As far as I can see there is no property to prevent that behaviour. Still want to use ListTiles.
Perhaps this is because of the usage of BouncingScrollPhysics().
Try replacing it with Neverscrollablescrollphysics() or just wrap the whole Listview.builder with an Expanded widget. which will let you won't use shirnkWrap and physics properties.
If the Container widget fixes the issue then you can try wrapping Listile() with another Sizedbox() widget.
I've wrapped the SizedBox with the ListView in a Material widget. That solved the problem.
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 would like to ask if somebody knows how to remove offset on top of gridview in #flutter, looks like gridview doesn't match parent height screenshot here
Widget _buildGridView({BuildContext context, List<TileWidget> children}) {
return Card(
margin: padding(context),
borderOnForeground: true,
color: Colors.black45,
semanticContainer: true,
clipBehavior: Clip.antiAlias,
child: GridView.count(
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
crossAxisCount: sqrt(children.length).toInt(),
children: children
),
elevation: 5,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
);
}
How to do auto spacing in listview.builder().For example i need something like MainAxisAlignment.spaceEvenly in column, but i need it in list view.builder().I will have two or three not scrollable horizontal items.So i need spacing between items for different sceen sizes.Could you help me.
ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: 3,//list.length expected two or three
itemBuilder: (BuildContext context, int index) {
return Container(
height: 100,
width: 100,
decoration: BoxDecoration(
borderRadius: const BorderRadius.all(Radius.circular(10.0)),
color: Colors.amber,
border: Border.fromBorderSide(
BorderSide(
color: Color(0xFF8D4AE9),
width: 1.0,
),
),
),
);
},
),
For example, picture
enter image description here
add margin and padding as much you want.
ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: 7,//list.length expected two or three
itemBuilder: (BuildContext context, int index) {
return Container(
height: 100,
width: 100,
margin: EdgeInsets.all(10),// add margin
padding: EdgeInsets.all(10),// add padding
decoration: BoxDecoration(
borderRadius: const BorderRadius.all(Radius.circular(10.0)),
color: Colors.amber,
border: Border.fromBorderSide(
BorderSide(
color: Color(0xFF8D4AE9),
width: 1.0,
),
),
),
);
},
)
You can try adding a SizedBox with fixed height: or width: or even both between the content you want. Another solution is adding Padding with equal values.
First you have to wrap your list view with the container or card or sized box if you want the horizontal Scroll of the list. Next how you just wrap your return width with the padding to the padding to get the padding.
Try this code:
Container(
height: 100,width: MediaQuery.of(context).size.width,
child:
ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: 13,
itemBuilder: (context, i) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
width: 100,
decoration: BoxDecoration(
color: Colors.black,
),
),
);
},
),
),
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);
}),