如何在Flutter布局中正确进入全屏模式？

Question

我正在尝试使用PageView制作简单的图书应用，并且希望通过单击页面即可支持全屏显示。

我尝试使用状态来切换全屏模式和普通模式，例如：

SystemChrome.setEnabledSystemUIOverlays(!menuVisible ? [] : [SystemUiOverlay.top, SystemUiOverlay.bottom]);

但是我认为出了点问题，它看起来不流畅，页面也不满。

这是我的代码：

class _HomePageState extends State<HomePage> {
  bool menuVisible = true;

  Widget _pages() {
    return InkWell(
      onTap: () => setState(() => menuVisible = !menuVisible),
      child: PageView.builder(
        reverse: true,
        itemBuilder: (BuildContext context, int index) {
          return Container(
            color: index % 2 == 0 ? Colors.grey : Colors.blueGrey,
            child: Center(
              child: Text('Page $index'),
            ),
          );
        },
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    // Show or hide SystemUI (StatusBar & NavBar)
    SystemChrome.setEnabledSystemUIOverlays(
        !menuVisible ? [] : [SystemUiOverlay.top, SystemUiOverlay.bottom]);

    return Scaffold(
      appBar: menuVisible
          ? AppBar(
              title: Text('Book'),
              centerTitle: true,
            )
          : null,
      body: _pages(),
      floatingActionButton: menuVisible
          ? FloatingActionButton(
              onPressed: () {},
              child: Icon(Icons.more_horiz),
            )
          : null,
    );
  }
}

我希望

：

实际结果：