flutter GridView + Card, Text Bottom overflow problem
619
Have you tried to use responsive_grid or instead of Row()
using Wrap()
?
Author by
Patrick SINT
Updated on December 29, 2022Comments
-
Patrick SINT over 1 year
I am using the card widget in GridView. We are going to add several widgets at the bottom of the card widget. TextOverflow.ellipsis option doesn't work.
Please refer to the image in question. I tried several methods but couldn't fix it.
Please tell me how to fix it. And, can it be made using grid tiles?
Below is the source code.
GridView.builder( //shrinkWrap: true, itemCount: slpProduct.length, itemBuilder: (BuildContext _context, int index) { return Column( mainAxisAlignment: MainAxisAlignment.start, children: [ Card( clipBehavior: Clip.antiAlias, // elevation: 0.5, color: Colors.white, child: Container( width: 300.0, child: Expanded( child: Column( mainAxisSize: MainAxisSize.max, mainAxisAlignment: MainAxisAlignment.start, children: [ new Stack( children: <Widget>[ AspectRatio( child: new Image.network( slpProduct[index].image, fit: BoxFit.cover, ), aspectRatio: 1.5 / 1, ), ], ), Container( padding: EdgeInsets.only( left: 15.0, top: 15.0, right: 15.0), //width: 300.0, child: Column( children: [ ListTile( title:Text('${slpProduct[index].name}', overflow: TextOverflow.ellipsis, maxLines: 1, ), subtitle:Text('${slpProduct[index].description}', overflow: TextOverflow.ellipsis, maxLines: 4, ) ), Container( child: Text( slpProduct[index].price, ), ), ], ), ), ], ), ), ), ), Container( width: 300.0, //todo padding: EdgeInsets.only(left: 10.0), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: <Widget>[ ClipRRect( borderRadius: BorderRadius.circular(40), child: Image( image: NetworkImage(slpProduct[index].image), width: 25, height: 25, fit: BoxFit.cover, ), ), SizedBox( width: 10, ), Text(slpProduct[index].providerName), Spacer(), Row( children: [ IconButton( onPressed: () {}, icon: Icon( CupertinoIcons.bookmark, color: kTextColor, size: 18.0, ), ), ], ), ], ), ), ], ); }, gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent( maxCrossAxisExtent: 300.0, crossAxisSpacing: 10, mainAxisSpacing: 10, ), ); });