Flutter で、アダプティブな（適応型）デザインが要求されるウィジェットには、
・ダイアログ（Dialogs）
・ナビゲーション（Navigation）
・カスタムレイアウト（Custom layout）
があります。（このことは、docs.flutter.dev/ui/adaptive-responsive で述べられています）
以下は、その際のアプローチ（抽象化、測定、分岐）のうちの、分岐についての話題です。
１．UI切替の分岐点
どのUIバージョンを表示するかを決定する際に、どのサイズのブレークポイントを使用するかを選ぶ必要があります。例えば、Materialデザインのレイアウトガイドラインでは、幅が600論理ピクセル未満のウィンドウにはボトムナビゲーションバーを使用し、600ピクセル以上のウィンドウにはナビゲーションレールを使用することを提案しています。
この選択は、デバイスの種類ではなく、デバイスの利用可能なウィンドウサイズに依存すべきです。
画面サイズに応じてNavigationBarとNavigationRailを切り替える例です。
（例）main.dart：
import 'package:flutter/material.dart';
import 'package:mediaquerytest01/responsivelayout.dart';
void main() {
runApp(const MyApp());
}（responsivelayout.dart）
import 'package:flutter/material.dart';
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Branching Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const ResponsiveLayout(),
);
}
}
class ResponsiveLayout extends StatelessWidget {
const ResponsiveLayout({super.key});
@override
Widget build(BuildContext context) {
//画面の幅を取得
final double screenWidth = MediaQuery.of(context).size.width;
//600ピクセル未満の場合はNavigationBar、
//600ピクセル以上の場合はNavigationRailを表示
if (screenWidth < 600) {
//画面幅が600未満のとき、NavigationBarを表示
return Scaffold(
appBar: AppBar(title: const Text('NavigationBar Example')),
body: const Center(child: Text('画面幅が600ピクセル未満')),
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home), label: 'Home'),
BottomNavigationBarItem(
icon: Icon(Icons.person), label: 'Profile'),
BottomNavigationBarItem(
icon: Icon(Icons.settings), label: 'Settings'),
],
),
);
} else {
//画面幅が600以上のとき、NavigationRailを表示
return Scaffold(
appBar: AppBar(title: const Text('NavigationRail Example')),
body: Row(
children: [
NavigationRail(
selectedIndex: 0,
onDestinationSelected: (int index) {},
destinations: const <NavigationRailDestination>[
NavigationRailDestination(
icon: Icon(Icons.home), label: Text('Home')),
NavigationRailDestination(
icon: Icon(Icons.person), label: Text('Profile')),
NavigationRailDestination(
icon: Icon(Icons.settings), label: Text('Settings')),
],
),
const Expanded(
child: Center(child: Text('画面幅が600ピクセル以上')),
),
],
),
);
}
}
}この様に、ブレークポイント（UI切替の分岐点）を決定することで、異なる画面サイズに最適なUIを選択できます。
この手法は、デバイスの種類に依存せず、画面サイズに基づいて最適なレイアウトを提供することを目的としています。