如何像Android Native一样创建Flutter的edgetoedge模式

Question

如何获得完美的全屏（边到边）模式以实现颤振？

使用原生，很容易做到下图，目标是状态栏，系统只显示文字、图标，底部导航是一样的，但应用程序的颜色保持不变。

肖像图片

风景图

Flutter横屏有点问题，也可以看下图

肖像图片

风景图

我使用了颤振代码进行边缘到边缘的选项，例如：

SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
  systemNavigationBarContrastEnforced: false,
  statusBarColor: Colors.transparent,
  systemNavigationBarColor: Colors.transparent,
  systemStatusBarContrastEnforced: false,
));

注意：如果尝试使用模拟器，请使用 deviceframe 和缺口设备（如 Pixel 6a）创建，我使用 api 34

Answer 1

正确应用它很重要：

1. 将

   EdgeToEdgeWrapperWidget

   应用于每个页面作为根小部件
2. 如果您使用 SafeArea 作为某些带有背景的容器小部件的父小部件，则应该使用

   SafeArea(bottom: false, top: false)

3. 最好避免使用

   SafeArea

   作为具有背景的容器小部件的父小部件

对于下面的解决方案，我使用了代码：

• https://github.com/rydmike/adaptive_theme_demo/blob/8d8587e759ee40f430f9a4a54a4415de8b0cf916/lib/theme/custom_overlays_style.dart#L8
• https://github.com/rydmike/adaptive_theme_demo/blob/8d8587e759ee40f430f9a4a54a4415de8b0cf916/lib/ui/screens/home_screen.dart#L60

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

/// A quick and easy way to style the navigation bar bar in Android
/// to be transparent and edge-to-edge, like iOS is by default.
SystemUiOverlayStyle customOverlayStyle(
    {final bool transparentStatusBar = false}) {
  unawaited(SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge));
  final statusBarColor = transparentStatusBar ? Colors.transparent : null;
  return SystemUiOverlayStyle(
    statusBarColor: statusBarColor,
    systemNavigationBarColor: Colors.transparent,
    systemNavigationBarDividerColor: Colors.transparent,
  );
}

class EdgeToEdgeWrapperWidget extends StatelessWidget {
  final Widget child;
  final bool transparentStatusBar;

  EdgeToEdgeWrapperWidget(
      {super.key, this.transparentStatusBar = false, required this.child});

  @override
  Widget build(BuildContext context) {
    return AnnotatedRegion(
      value: customOverlayStyle(transparentStatusBar: transparentStatusBar),
      child: child,
    );
  }
}