マスター/ディテール List-Detail Layout
一覧と詳細の組み合わせ。スマホでは「一覧 → 詳細」と画面を移り、タブレットでは左右に並べて同時に見せる。
本物の Flutter ウィジェットが動きます（初回は数秒かかります）
どんなもの？
メール・設定・チャットなど、一覧から1つ選んで中身を見るアプリの基本形です。
画面の幅を LayoutBuilder（または MediaQuery.sizeOf）で調べ、
広ければ Row で一覧と詳細を並べ、狭ければ一覧だけ出して、選んだら詳細の画面へ移ります。
目安として幅 600px 以上で2列にすることが多いです。
デモ上部の切り替えで、同じ作りがスマホとタブレットでどう変わるかを見られます。
こんなときに
- タブレットや PC でも使われる、一覧から選ぶアプリ
避けたい場面
- スマホでしか使わない前提のアプリ（作り分けの手間が無駄になる）
最小コード
LayoutBuilder(
builder: (context, constraints) {
if (constraints.maxWidth >= 600) {
return Row(children: [
SizedBox(width: 320, child: MailList(onTap: select)),
const VerticalDivider(width: 1),
Expanded(child: MailDetail(selected)),
]);
}
// 狭い画面: 一覧だけ出し、選んだら詳細の画面へ
return MailList(
onTap: (mail) => Navigator.of(context).push(
MaterialPageRoute(builder: (_) => MailDetail(mail)),
),
);
},
)使うウィジェット
LayoutBuilderRowVerticalDivider