Good morning,
from a lot of time I'm facing with a big problem regarding responsivity with Flutter GridView widget.
This is my card list on iPad Pro 12.9
and this is on iPad Air 2
This is the card code
class HomeCard extends StatelessWidget {
final String title;
final String subtitle;
final String category;
final String imgUrl;
const HomeCard({
Key key,
this.title,
this.subtitle,
this.category,
this.imgUrl,
}) : super(key: key);
@override
Widget build(BuildContext context) {
final Brightness _brightness = Theme.of(context).brightness;
return SingleChildScrollView(
physics: const NeverScrollableScrollPhysics(),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
AspectRatio(
aspectRatio: 16 / 9,
child: CachedNetworkImage(
imgUrl: imgUrl,
fit: BoxFit.fitWidth,
),
),
Padding(
padding: const EdgeInsets.only(top: 10.0, left: 25.0),
child: Text(
title,
textAlign: TextAlign.left,
overflow: TextOverflow.ellipsis,
style: TextStyle(
color: Themes.cardTitleBlue,
fontWeight: FontWeight.w500,
fontSize: 16.0),
),
),
Padding(
padding: const EdgeInsets.only(left: 25.0, right: 25.0),
child: Text(
subtitle, //'Something else only for fill this space. It can be a simply description',
textAlign: TextAlign.left,
maxLines: 2,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontWeight: FontWeight.w400,
fontSize: 15.0,
height: 1.2,
color: _brightness == Brightness.light
? Colors.black45
: Colors.white54,
),
),
),
],
),
);
}
}
this is the GridView code
GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 4.0,
mainAxisSpacing: 4.0,
childAspectRatio:
MediaQuery.of(context).size.aspectRatio/0.8,
),
controller: _scrollController,
itemCount: state.hasReachedMax
? state.tours.length
: state.tours.length + 1,
itemBuilder: (context, index) {
if (index >= state.tours.length) {
return const MyLoader();
} else {
return _getCard(state.tours[index]);
}
},
),
In every device aspect ratio is different and also if I apply a correction based on this there are also some devices in which the card layout is cut or over height. My card has not a fixed height because I want that it adapts itself due to images and text.
Please do not advise me to use staggered_grid_view package because sometimes I've low performance using it.
I need only to show a list of card with 2/3 items for row/line and need that the height is inherited from card height.
There are a lot of posts on StackOverflow that discuss about this but no one consider the all devices layout and a dynamic card height.
Hope I was clear
Thank you
