spacing in horizontal listview.builder - flutter

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,
),
),
);
},
),
),

Related

How to make two rows of icons and add the ability to scroll them horizontally?

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),
),
)

How to Warp the GridView into Carousel in flutter?

is it possible to put the GridView into Carousel in flutter like this??
i don't understand about the carousel but i learn it and i get the Carousel more useful then grid-view if i follow my design?
this is my GridView Code
Container(
margin: EdgeInsets.all(2),
child: new StaggeredGridView.countBuilder(
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,
crossAxisCount: 2,
crossAxisSpacing: 12,
mainAxisSpacing: 12,
itemCount: imageList.length,
itemBuilder: (context, index) {
return Container(
decoration: BoxDecoration(
color: Colors.transparent,
borderRadius:
BorderRadius.all(Radius.circular(12))),
child: ClipRRect(
borderRadius:
BorderRadius.all(Radius.circular(12)),
child: FadeInImage.memoryNetwork(
placeholder: kTransparentImage,
image: imageList[index],
fit: BoxFit.cover,
),
),
);
},
staggeredTileBuilder: (index) {
return new StaggeredTile.count(
1, index.isEven ? 1 : 2);
}),
)
Yes you can simply use StaggeredGridView inside CarouselSlider. About the UI you are trying to archive, the first image(index=0) will be the large one. If we try to simplify the UI by dividing the pattern, we can see there are three GridItem can think as single bloc, and to get the left one larger we need to use StaggeredTile.count(1, index % 3 == 0 ? 2 : 1);. In this case staggeredTileBuilder will be
staggeredTileBuilder: (index) {
return StaggeredTile.count(1, index % 3 == 0 ? 2 : 1);
}),
Widget
return Scaffold(
body: CarouselSlider(
items: [
Container(
margin: EdgeInsets.all(2),
child: StaggeredGridView.countBuilder(
// physics: NeverScrollableScrollPhysics(), // it can use scollable if upper widget dont cause any issue
shrinkWrap: true,
crossAxisCount: 2,
crossAxisSpacing: 12,
mainAxisSpacing: 12,
itemCount: imageList.length,
itemBuilder: (context, index) {
return Container(
decoration: const BoxDecoration(
color: Colors.transparent,
borderRadius: BorderRadius.all(Radius.circular(12))),
child: ClipRRect(
borderRadius:
const BorderRadius.all(Radius.circular(12)),
child: Container(
color: Colors.amber,
alignment: Alignment.center,
child: Text(index.toString()),
)
// FadeInImage.memoryNetwork(
// // placeholder: kTransparentImage,
// image: imageList[index],
// fit: BoxFit.cover,
// ),
),
);
},
staggeredTileBuilder: (index) {
return StaggeredTile.count(1, index % 3 == 0 ? 2 : 1);
}),
),
Container(
color: Colors.deepPurple,
),
Container(
color: Colors.deepOrange,
),
],
options: CarouselOptions(aspectRatio: 1, viewportFraction: 1),
),
);
I would say practice with Text Widget with viewing index to understand what and how widget is changing and set the logic inside staggeredTileBuilder to get the outcome. And about the imagePath you aren't passing string value on that, debug/print the path to verify it.
For more about
carousel_slider
flutter_staggered_grid_view
Staggered Grid View on yt you can find many by searching

How to have a list view whose children will wrap in Flutter

What i need
How it is now
Basically, i need to achieve this. i thought of using a grid view but grid view renders elements to a specified aspect ratio which is not i need in my case. I also tried a list view with a horizontal scroll but of course it would and infinite horizontal scroll. I would appreciate any pointers on how to achieve it.
ListView.builder(
itemCount: categories.length,
scrollDirection: Axis.horizontal,
shrinkWrap: true,
itemBuilder: (context,index){
return Container(
margin: EdgeInsets.all(3),
padding: EdgeInsets.all(5),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(4),
border: Border.all(color: AppColors.darkOrange)
),
child: Text(categories[index],style: AppTextStyles.smallTextStyle,)
);
}
),
You can use a wrap widget with chip also it seems this is like filtering menu, if you are interested check this package filter_list
ListView(
primary: true,
shrinkWrap: true,
children: <Widget>[
Wrap(
spacing: 4.0,
runSpacing: 0.0,
children: List<Widget>.generate(
categories.length,
(int index) {
return Chip(
label: Text(categories[index].name,style: AppTextStyles.smallTextStyle)
);
}
).toList(),
),
],
),
You can achieve it with Wrap widget. Doc -> wrap class documentation
Wrap(
children: categories.map((category) {
return Container(
margin: EdgeInsets.all(3),
padding: EdgeInsets.all(5),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(4),
border: Border.all(color: AppColors.darkOrange)
),
child: Text(
category,
style: AppTextStyles.smallTextStyle,
)
)}.toList(),
],
),
You can try using Wrap instead of ListView.builder.
Wrap(
children:categories.map((c)=>Text(categories[index],style:
AppTextStyles.smallTextStyle,).toList())
)
Wrap is what you look for
Wrap(
spacing: 8.0, // gap between adjacent chips
runSpacing: 4.0, // gap between lines
children: categories
.map((e) => Container(
margin: EdgeInsets.all(3),
padding: EdgeInsets.all(5),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(4),
border: Border.all(color: AppColors.darkOrange)),
child: Text(
e,
style: AppTextStyles.smallTextStyle,
)))
.toList(),
)

Gridview.builder with Sticky headers

I am hella frustrated.
I need a Gridview.builder (or Listview with 3 Columns in each row)
AND on top of the Grid I need 1 Header.
Yet my code screws either the 3 Column List up, or the Header which will be tripled then.
I am a total coding newbie. Yet I am trying desperately to fix this issue.
Sorry for the wrong code in advance.
GridView.builder(
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,),
itemCount: 210,
itemBuilder: (context, index) {
return StickyHeader(
header: Container(
height: 50.0,
color: Colors.blueGrey[700],
padding: EdgeInsets.symmetric(horizontal: 16.0),
alignment: Alignment.centerLeft,
child: Text('Header',
style: const TextStyle(color: Colors.white),
),
),
content: Column(
children:
List<int>.generate(21, (index) => index)
.map((item) => Container(
decoration:
BoxDecoration( // <-- BoxDecoration
border: Border(bottom: BorderSide())
),
height: 50,
width: 5000000,
child: Text ('Test'),
))
.toList(),
),
);
}),
I would use a Column which first child is the header and the second one is the GridView inside an Expanded widget.
Something like this.
Or you can use slivers in a CustomScrollView. Short tutorial here.

FLutter :matching Listtile height to card height

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),
),
]);
}),
),
);