🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
Flutter

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

Dart

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

Q&A

1回答

1349閲覧

【Flutter】RowのCrossAxisのサイズをChildsの最大サイズにしたい

toshi_ki

総合スコア17

Flutter

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

Dart

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

0グッド

0クリップ

投稿2021/03/18 22:58

やりたいこと

RowCrossAxisSizeをminにしたいです。
DartDevToolのWidgetInspectorを見てみたらIconButtonheight: 48になってますが、
Rowheight: 70(ParentのHeight)になってしまっています。

このRowをheight: 48にしたいです。
じゃあHeight: 48Containerで囲めばいいじゃんというわけではなく、
childsのなかで最大のサイズにRowheightを合わせたいです。

なにか方法はあるのでしょうか。
よろしくお願いします。

WidgetInspectorheight48to70

ソースコード

Container( width: 89, height: 70; child: Row( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, mainAxisSize: MainAxisSize.min, children: [ Text('item'), IconButton( icon: Icon( Icons.highlight_remove, ), onPressed: () => onRemoved, ), ], ), ),

環境

Flutter: 2.0.1
Dart: 2.12.0

% flutter doctor Doctor summary (to see all details, run flutter doctor -v): [✓] Flutter (Channel stable, 2.0.1, on macOS 11.2.3 20D91 darwin-x64, locale en-JP) [✓] Android toolchain - develop for Android devices (Android SDK version 29.0.3) [✓] Xcode - develop for iOS and macOS [✓] Chrome - develop for the web [✓] Android Studio (version 3.6) [✓] VS Code (version 1.54.3) [✓] Connected device (2 available) • No issues found!

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

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

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

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

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

guest

回答1

0

Flutter公式のドキュメントによると、

Container tries, in order: to honor alignment, to size itself to the child, to honor the width, height, and constraints, to expand to fit the parent, to be as small as possible.

とのことですので、Containerは子のサイズに合わせて出来る限り小さくなろうとします。

ただしこれは、Containerのサイズが指定されていない場合の話ですので、heightの指定をなくせば、toshi_ki様の思う通りの実装ができるのではないでしょうか。

DartPad

flutter

1Container( 2 width: 89, 3//ここをコメントアウト 4//height: 70; 5 child: Row( 6 mainAxisAlignment: MainAxisAlignment.center, 7 crossAxisAlignment: CrossAxisAlignment.center, 8 mainAxisSize: MainAxisSize.min, 9 children: [ 10 Text('item'), 11 IconButton( 12 icon: Icon( 13 Icons.highlight_remove, 14 ), 15 onPressed: () => onRemoved, 16 ), 17 ], 18 ), 19),

投稿2021/03/23 03:45

編集2021/09/19 01:29
flutter_labo

総合スコア110

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問