スクロールとウィジェット配置 Flutter開発ガイド

デバイスサイズに合わせて画面を調整する

この記事では、デバイスのサイズに合わせて画面の下部にボタンを配置する方法と、CustomScrollViewとSliverを活用したスクロール調整について解説します。

デバイスサイズへの適応

画面を作成する際、デバイスのサ이ズに合わせて画面の下部にボタンを配置する必要がある場合があります。以下の例のように初期にロードされる内部コンテンツが長くなると、フッターのようにコンテンツの下部에ボタンを配置する必要があるケースも考慮する必要があります。

CustomScrollViewとスリバーの活用

まず、トップにCustomScrollViewを配置し、sliversオプション内でSliverToBoxAdapterを使用してエリアを定義します。その後、残りの領域に対してはSliverFillRemainingを使用して位置を調整できます。ここで重要なのは、SliverFillRemaining에hasScrollBody: falseオプション을設定することです（そうしないと、スクロールが画面全体を埋めることになります）。

このアプローチを使用すると、上記の例のA/Bのようなケース를カバーできます。

言葉では少し複雑に聞こえるかもしれませんが、以下の例画面を見れば理解しやすいかもしれません。

まとめ

この記事では、デバイスサイズ에合わせて画面을調整하는方法와, CustomScrollView와 Sliver를 활용한 스크롤 조정에 대해 배웠습니다. 이러한 기술들을 사용함으로써, 더 사용자 친화적인 UI를 설계할 수 있습니다.