Flutter断点调试与布局插件breakpoint_scaffold的使用

Flutter断点调试与布局插件breakpoint_scaffold的使用

breakpoint_scaffold 是一个响应不同屏幕尺寸的布局组件。它根据 Material Design 的断点设计（Material Design 响应式网格），在不同设备上调整布局。

该插件通过以下组件实现响应式设计：

• 主导航项（通常放置在 <code>BottomAppBar</code> 中）
• 次导航项（通常放置在 <code>Drawer</code> 中）
• 侧边栏（通常也放置在 <code>Drawer</code> 中）

布局示例

在手机上：

• 主导航项位于底部导航栏（<code>BottomAppBar</code>）
• 次导航项位于模态导航抽屉（<code>Scaffold.drawer</code>）
• 侧边栏也位于模态导航抽屉（<code>Scaffold.endDrawer</code>）

在竖屏平板上：

• 主导航项位于导航轨（<code>NavigationRail</code>）
• 次导航项位于模态导航抽屉（<code>Scaffold.drawer</code>）
• 侧边栏也位于模态导航抽屉（<code>Scaffold.endDrawer</code>）

在横屏平板上：

• 主导航项位于导航轨（<code>NavigationRail</code>）
• 次导航项位于模态导航抽屉（<code>Scaffold.drawer</code>）
• 侧边栏为标准（持久）侧边栏

在桌面端：

• 所有导航项组合在标准（持久）导航抽屉中
• 侧边栏为标准（持久）侧边栏

完整示例代码

import "package:flutter/material.dart";
import "package:breakpoint_scaffold/breakpoint_scaffold.dart";

class MyDrawer extends StatelessWidget {
  final bool includePrimaryNavItems;
  const MyDrawer({required this.includePrimaryNavItems});

  // 头部信息
  Widget get header => const UserAccountsDrawerHeader(
    currentAccountPicture: CircleAvatar(child: Text("U")),
    accountName: Text("User"),
    accountEmail: Text("username@gmail.com"),
    otherAccountsPictures: [
      CircleAvatar(child: Text("A")),
      CircleAvatar(child: Text("B")),
      CircleAvatar(child: Text("C")),
    ]
  );

  [@override](/user/override) 
  Widget build(BuildContext context) => Drawer(
    child: ListView(
      children: [
        header,
        if (includePrimaryNavItems)
          for (int index = 0; index < 5; index++) 
            ListTile(
              title: Text("Go to page $index"),
              onTap: () => Navigator
                .of(context)
                .pushReplacementNamed(index.toString())
            ),
        const ListTile(title: Text("About")),
        const ListTile(title: Text("Log out")),
      ]
    )
  );
}

class SideSheet extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) => Drawer(
    child: Column(
      children: const [
        DrawerHeader(
          child: Text("More", textScaleFactor: 1.5),
        ),
        Spacer(),
        Text("This gives you more options"),
        Spacer(),
      ]
    )
  );
}

// ----------------

class DemoPage extends StatelessWidget {
  final int index;
  const DemoPage(this.index);

  // FAB按钮
  Widget get fab => FloatingActionButton(
    onPressed: () {},
    child: const Icon(Icons.info), 
  );

  // 应用栏
  AppBar get appBar => AppBar(
    title: Text("Page $index"),
    actions: [
      Builder(
        builder: (BuildContext context) => IconButton(
          icon: const Icon(Icons.info),
          onPressed: () {
            Scaffold.of(context).openEndDrawer();
          }
        )
      )
    ]
  );

  [@override](/user/override)
  Widget build(BuildContext context) => ResponsiveScaffold.navBar(
    navItems: [
      for (int index = 0; index < 5; index++)
        NavigationItem(label: index.toString(), icon: const Icon(Icons.info)),
    ],
    navIndex: index,
    onNavIndexChanged: (int value) => 
      Navigator.of(context).pushReplacementNamed(value.toString()),

    drawer: const MyDrawer(includePrimaryNavItems: true),
    appBar: appBar,
    body: const Placeholder(),
    secondaryDrawer: const MyDrawer(includePrimaryNavItems: false),
    sideSheet: SideSheet(),
    floatingActionButton: fab,
  );
}

// ----------------

void main() => runApp(
  MaterialApp(
    initialRoute: "1",
    onGenerateRoute: (RouteSettings settings) {
      final int? index = int.tryParse(settings.name!);
      if (index == null) {
        return null;
      }
      return PageRouteBuilder(
        settings: settings, 
        pageBuilder: (_, __, ___) => DemoPage(index),
        transitionDuration: Duration.zero,
      );
    },
  )
);