質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Flutter

Flutterは、iOSとAndroidのアプリを同じコードで開発するためのフレームワークです。オープンソースで開発言語はDart。双方のプラットフォームにおける高度な実行パフォーマンスと開発効率を提供することを目的としています。

Dart

Dartは、Googleによって開発されたJavaScriptの代替となることを目的に作られた、ウェブ向けのプログラミング言語である。

Q&A

解決済

1回答

2842閲覧

FlutterでColumnに配置したWidgetがはみ出してしまう場合の対処

退会済みユーザー

退会済みユーザー

総合スコア0

Flutter

Flutterは、iOSとAndroidのアプリを同じコードで開発するためのフレームワークです。オープンソースで開発言語はDart。双方のプラットフォームにおける高度な実行パフォーマンスと開発効率を提供することを目的としています。

Dart

Dartは、Googleによって開発されたJavaScriptの代替となることを目的に作られた、ウェブ向けのプログラミング言語である。

0グッド

0クリップ

投稿2020/03/20 07:36

イメージ説明

上図のように、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 }),

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2020/05/14 01:27

ご回答ありがとうございます。ご教示いただいたfitプロパティで事足りそうです。どうもありがとうございます!
guest

回答1

0

ベストアンサー

ご教示いただいたfitプロパティを使って無事、レイアウト内に収めることができました。

投稿2020/05/14 01:28

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問