基於堆疊的導覽

class _AdaptiveLayoutState extends State<AdaptiveLayout> {
  int selectedListId = 0;
​
  void _onContactListSelected(int listId) {
    setState(() {
      selectedListId = listId;
    });
  }
​
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        final isLargeScreen = constraints.maxWidth > largeScreenMinWidth;
​
        if (isLargeScreen) {
          return _buildLargeScreenLayout();
        } else {
          return const ContactGroupsPage(); // 已還原
        }
      },
    );
  }
  // ···
}

import 'contacts.dart';
​
class ContactGroupsPage extends StatelessWidget {
  const ContactGroupsPage({super.key});
​
  @override
  Widget build(BuildContext context) {
    return _ContactGroupsView(
      onListSelected: (list) => Navigator.of(context).push(
        CupertinoPageRoute<void>(
          title: list.title,
          builder: (context) => ContactListsPage(listId: list.id),
        ),
      ),
    );
  }
}

/// 用於在大螢幕上選取聯絡人群組的側邊欄元件。
class ContactGroupsSidebar extends StatelessWidget {
  const ContactGroupsSidebar({
    super.key,
    required this.selectedListId,
    required this.onListSelected,
  });
​
  final int selectedListId;
  final void Function(int) onListSelected;
​
  @override
  Widget build(BuildContext context) {
    return _ContactGroupsView(
      selectedListId: selectedListId,
      onListSelected: (list) => onListSelected(list.id),
    );
  }
}

class ContactListDetail extends StatelessWidget {
  const ContactListDetail({super.key, required this.listId});
​
  final int listId;
​
  @override
  Widget build(BuildContext context) {
    return _ContactListView(listId: listId, automaticallyImplyLeading: false);
  }
}

import 'package:flutter/cupertino.dart';
​
import 'contact_groups.dart';
import 'contacts.dart';

Widget _buildLargeScreenLayout() {
  return CupertinoPageScaffold(
    backgroundColor: CupertinoColors.extraLightBackgroundGray,
    child: SafeArea(
      child: Row(
        children: [
          SizedBox(
            width: 320,
            child: ContactGroupsSidebar(
              selectedListId: selectedListId,
              onListSelected: _onContactListSelected,
            ),
          ),
          Container(width: 1, color: CupertinoColors.separator),
          Expanded(child: ContactListDetail(listId: selectedListId)),
        ],
      ),
    ),
  );
}