I am trying to set a custom width and height to the children of a GridView. I tried the following, but it's not working:
GridView.count(
shrinkWrap: true,
crossAxisCount: 5,
children: coolArray.map((String currentItem) {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 5, vertical: 5),
width: 17,
height: 10,
color: Colors.red,
child: Text('currentItem'),
);
}).toList(),
)
The items have their own height which I don't know how they're calculated.
You can use childAspectRatio, example
GridView.count(
shrinkWrap: true,
crossAxisCount: 5,
childAspectRatio:width/height,
children: coolArray.map((String currentItem) {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 5, vertical: 5),
color: Colors.red,
child: Text('currentItem'),
);
}).toList());
Related
I used gridView.builder. To set the size of the grid, I use MediaQuery, but for some reason the gridView is displayed differently on different devices, using which parameter in gridDelegate: can I fix this?
my gridView code:
Widget buildCatalog(List<Product> product) => CustomScrollView(
controller: sController,
slivers: [
SliverGrid(
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
// mainAxisExtent: ,
maxCrossAxisExtent: 300,
childAspectRatio: MediaQuery.of(context).size.width /
(MediaQuery.of(context).size.height / 1.3),
crossAxisSpacing: 10,
mainAxisSpacing: 10),
delegate: SliverChildBuilderDelegate(childCount: product.length,
(BuildContext context, int index) {
return GestureDetector(
onTap: () {},
child: Container(
padding: const EdgeInsets.only(left: 2, right: 2, top: 5),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(8)),
child: Column(
children: <Widget>[
InkWell(
child: Container(
margin: const EdgeInsets.only(top: 5),
child: Image.network(),
),
),
const SizedBox(
height: 10,
),
Text(),
// Spacer(),
const SizedBox(height: 8),
Text(),
const SizedBox(height: 5),
buildButton(index, productItem.id),
],
),
),
);
}),
),
]
);
This is my grid on big displays:
and this on small displays:
The solution was flutter_screenutil package
Please refer to my code and Screen Shot below
Top two rows are build based on MainAxisAlignment.spaceBetween widget and a bottom row is on MainAxisAlignment.spaceBetween, respectively.
As you can see in Screen Shot,MainAxisAlignment.spaceBetween have no spaces like spacebetween, and I understood this is default behaviour of MainAxisAlignment.
However, I want keep same spaces between the items in 5 items, even if it consists of less than 5 items(like two items shown in Screen shot).
Is there any good ideas to implement this ?
thanks for your helpful advise.
final List<String> _icon = [
"lock.png",
"cheer.png",
"map.png",
"stake.png",
"sushi.png",
"lock.png",
"cheer.png",
"map.png",
"stake.png",
"sushi.png",
"cheer.png",
"map.png"
];
var iconChunks = _icon.slices(5).toList();
Column(
children: iconChunks.map((e) => Padding(
padding: const EdgeInsets.only(bottom: 10.0),
child: Row(
mainAxisAlignment: e.length ==5 ? MainAxisAlignment.spaceBetween :MainAxisAlignment.start,
children: e.map((s) => selectIcon(id: 1, iconPass: s)
).toList(),
),
))
.toList()
),
Have you tried using GridViewBuilder? Maybe this will help.
GridView.builder(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 5,
mainAxisSpacing: 10,
crossAxisSpacing: 10,
),
itemCount: _icon.length,
itemBuilder: ((context, index) => selectIcon(id: 1, iconPass:
_icon[index])),
),
You can easily maintain same height and weight by Gridview. Column Spacebetween and start are totally different concept.As you are don't know about list, it may be increase or decrease better you should have to use Gridview.
return Container(
// padding: const EdgeInsets.all(0.0),
child: GridView.builder(
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: lengthoflist,
childAspectRatio: MediaQuery.of(context).size.width /
(MediaQuery.of(context).size.height / 1.4),
mainAxisSpacing: 10.0,
crossAxisSpacing: 10.0,
),
itemCount: snapshot.data.length,
itemBuilder: (context, index) {
Category category = snapshot.data[index];
return Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Container(
child: Image.network(
category.image,
fit: BoxFit.cover,
),
decoration: BoxDecoration(
border: Border.all(width: 1.0),
),
),
Padding(
padding: const EdgeInsets.only(
top: 8.0,
),
child: Text(
category.name,
textAlign: TextAlign.center,
),
)
],
);
},
),
);
I have tried to create Listview.builder with help of API(for displaying API product). but i got error in bottom pixel. i tried many ways to solve this problem. but couldn't find anything,
how can i solve this problems by editing code... And what is the main reason for this error
code is here
Container(
height: 650,
child: FutureBuilder(
future: _getProduct(),
builder: (context, snapshot) {
if (snapshot.data == null) {
return const Center(child: Text("Loading"));
} else {
return GridView.builder(
gridDelegate:
const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2),
itemCount: snapshot.data?.length,
itemBuilder: (context, index) {
return Padding(
padding: const EdgeInsets.only(right: 10),
child: Container(
width: 130,
height: 485,
decoration: BoxDecoration(
color: Colors.white,
borderRadius:
BorderRadius.circular(10)),
child: Container(
height: 240,
child: Column(
children: [
Padding(
padding: EdgeInsets.all(5),
child: Image.network(
snapshot.data![index].image)),
Padding(
padding: const EdgeInsets.all(10),
child: Row(
mainAxisAlignment:
MainAxisAlignment
.spaceBetween,
children: [
Expanded(
child: Text(
snapshot.data![index].name,
overflow: TextOverflow.fade,
maxLines: 2,
style: const TextStyle(
fontSize: 15,
fontWeight:
FontWeight.w700),
)),
Text(
snapshot.data![index].price)
],
),
)
],
),
),
),
);
},
);
}
}),
)
Issue with this
GridView.builder(
gridDelegate:
const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2),
Needed to add Shrinkwrap & Add the Ratio
shrinkwrap: true,
gridDelegate:
const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
childAspectRatio: 0.8,
),
I am a beginner in flutter,
I changed to your code and working ok,
need a single line to be added to your code...
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
childAspectRatio: 1 / 1.5,//<- add this one (it will increase height of your card or container)
crossAxisCount: 2),
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 write a StaggerGridView with child of ListView in every single item in grid. I currently implmemented with this:
StaggeredGridView.countBuilder(
physics: BouncingScrollPhysics(),
padding: EdgeInsets.symmetric(horizontal: 4, vertical: 0),
crossAxisCount: 4,
itemCount: _data.length,
itemBuilder: (BuildContext context, int index) {
print(index);
Project p = _data[index].keys.elementAt(0);
List<Tasks> _ts = _data[index].values.expand((l) => l).toList();
return Padding(
padding: EdgeInsets.symmetric(horizontal: 2, vertical: 6),
child: PhysicalModel(
borderRadius: BorderRadius.circular(16),
// shape: ,
shadowColor: Colors.grey.withAlpha(10),
elevation: 6,
color: Colors.transparent,
child: Ink(
padding: EdgeInsets.symmetric(
horizontal: 0, vertical: 6),
color: Theme.of(context).scaffoldBackgroundColor,
// color: Colors.white,
child: ListView.builder(
itemCount: _ts.length + 1,
// physics: NeverScrollableScrollPhysics(),
itemBuilder: (BuildContext context, int idx) {
if (idx == 0) {
return Padding(
padding: EdgeInsets.only(
left: 12, bottom: 12, top: 8),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
getProjectNameFirstName(p.name),
style: NORMAL_BOLD_TXT_STYLE
.copyWith(
fontSize: 22,
color: COLOR_PRIMARY),
),
// SizedBox(width: 8),
Container(
padding: EdgeInsets.symmetric(
horizontal: 4, vertical: 1),
decoration: BoxDecoration(
color: Color(p.colorValue)
.withAlpha(100),
borderRadius:
BorderRadius.circular(5),
),
child: Text(
getProjectNameRealName(p.name),
style: SMALL_TXT_STYLE
.copyWith(
color: Color(p.colorValue)),
),
)
],
));
} else {
// index = index - 1;
print(idx);
Tasks _t = _ts[idx - 1];
return ListTile();)));
this is just my example code. Currently the issue is since listview is dynamic, the height of gridview item can not shown all listview items.
Is there a way to show all listview items and make it NeverScrollPhysics?
I'm taking a wild guess at what you're trying to achieve here; it would be helpful if you could give a more detailed explanation of what you're trying to achieve rather than why your specific implementation isn't working, as that way someone might be able to suggest a solution to the overall problem.
The guess is as follows though:
you have a staggered grid view, each of which has a list of items
you want to display a full list in each element of the gridview
using listviews isn't working due to it not showing the entire list but rather scrolling (and/or having errors)
First off, is there any reason why you can't use a Column/Row/Flex instead of the ListView? Since a Column/Row/Flex newer scrolls, that should resolve that issue.
If that's not possible, you could theoretically set shrinkWrap to true on your ListView.