上図のように、GridViewで配置したContainer内にImageとTextと配置していますが、Imageのサイズが大きい場合に縦方向にはみ出してしまう場合が多いです。
この場合の対処として、Imageのheightプロパティを収まるサイズに指定する原始的?な方法は考えつくのですが、それ以外に動的に?Imageの縦横比を保ってContainer内に収まるサイズに縮小するような方法はあるのでしょうか。
現時点の該当部分のコードを掲載します。
幾つか実現方法があると思うので、可能であればその選択肢をご教示いただければ幸いです。
dart
1StreamBuilder( 2 stream: Firestore.instance.collection('books').snapshots(), 3 builder: (BuildContext context, 4 AsyncSnapshot<QuerySnapshot> snapshot) { 5 if (!snapshot.hasData) 6 return Center( 7 child: CircularProgressIndicator(), 8 ); 9 10 return GridView.builder( 11 gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( 12 crossAxisCount: 2), 13 itemCount: snapshot.data.documents.length, 14 itemBuilder: (BuildContext context, int index) { 15 return Container( 16 margin: EdgeInsets.all(8.0), 17 padding: EdgeInsets.only(top: 4.0, bottom: 4.0), 18 decoration: BoxDecoration( 19 border: Border.all( 20 color: Colors.black38, 21 width: 2.0, 22 ), 23 borderRadius: 24 new BorderRadius.all(new Radius.circular(10.0)), 25 ), 26 child: GestureDetector( 27 onTap: () { 28 Navigator.of(context).pushNamed('/book_detail'); 29 }, 30 child: Column( 31 mainAxisAlignment: MainAxisAlignment.spaceEvenly, 32 children: <Widget>[ 33 Image( 34 image: AdvancedNetworkImage( 35 snapshot.data.documents[index]['thumbnail'], 36// height: 10, 37 useDiskCache: true, 38 cacheRule: CacheRule( 39 maxAge: const Duration(days: 7)), 40 ), 41 fit: BoxFit.scaleDown, 42 ), 43 SpaceBox.height(4), 44 Text(snapshot.data.documents[index]['title'], 45 style: TextStyle( 46 fontSize: 10.0, 47 fontStyle: FontStyle.normal, 48 )), 49 ], 50 )), 51 ); 52 }, 53 ); 54 }),
> Imageの縦横比を保ってContainer内に収まるサイズに縮小するような方法はあるのでしょうか
Imageウィジェットのfitプロパティで事足りないのでしょうか?
https://api.flutter.dev/flutter/painting/BoxFit-class.html
ご回答ありがとうございます。ご教示いただいたfitプロパティで事足りそうです。どうもありがとうございます!
回答1件
あなたの回答
tips
プレビュー