【Flutter/Dart】スクロール部 + 最下部に張り付け
やりたいこと
登場人物
何らかのアイテムの一覧（以降ListViewとして話を進める）
何らかのWidget（以降テキストとして話を進める）
配置
テキストは、アイテムの個数に関わらず画面最下部に固定
アイテム一覧は、テキストを配置して残った領域を使用 数が少ない場合は、下の方は余白 数が多い場合は、スクロール
解決策
以下のようにする。
Container(
padding: const EdgeInsets.all(16),
height: double.infinity,
child: Column(
children: [
Expanded(
child: _itemList(),
),
_bottom()
],
)
)
//アイテム一覧
Widget _itemList () => ListView.builder(
shrinkWrap: true,
itemBuilder: (context, index) => Text(
index.toString(),
style: const TextStyle(
fontSize: 16
),
),
itemCount: 100,
);
//最下部に張り付けるWidget
Widget _bottom() => const Text(
"Bottom",
style: TextStyle(
fontSize: 18
),
);
レイアウトとサイズは以下のように決まる
Container(height = doubke.infinity)の高さは画面高さに設定される
Textが画面最下部に配置される
画面からTextのサイズを除いた領域がExpandedに割り当てられる
Expandedの高さがListViewの高さに割り当てられる
Expandedの高さよりリストが長い場合は、スクロールされる
最後に
ColumnのmainAxisAlignmentでやろうとすると上手くいかないです。
こういう場合、「どういう順番でレイアウトとサイズを決めるか」を実際に頭の中で想像していくと解が出たりします。
最新記事
すべて表示現象 あるアイコンは長押し時に所定の動作を実行します これを実現するために、GestureDetectorのonLongPressに処理を登録していました しかしいざビルドしてみると、アイコンが表示されたタイミングで処理が実行されてしまいました 以下が該当部分のソースコードです。 さあ、どこが間違っているでしょう？ return GestureDetector( child: Containe
前提 以下のようなケースを考えます。 アイテムの一覧がある ある1つのアイテムの詳細を表示するページがある 詳細ページではそのアイテムの削除ができる 削除したら他のページ（一覧ページなど）に戻る これはアプリではよくあるパターンだと思います。 課題 reduxパターンを用いている、より具体的にはProviderで状態を管理している場合、以下のような構成になっているのではないでしょうか？ アプリ全体
やりたいこと Reduxで状態管理をする。状態はAppStateとする。 アプリ開始時にリモートのデータベースからデータの取得を開始 データを取得 取得中は待機マークを表示 取得したデータからAppStateを作成 作成したAppStateを元にUIを描画 方法 3、4、5を実現するためには、「取得完了」のフラグをAppStateに追加しましょう（※1）。 ビューはこのフラグを見て表示を切り替えま
