在Flutter 2.5中，Android全屏倾斜、粘性、粘性沉浸和边缘到边缘。

Question

我如何在 Android 全屏时在 Flutter 2.5 中实现 lean back，sticky，sticky immersive 和 edge to edge？这些是 Flutter 2.5 的新功能： 。

- Huseyn

Answer 1

您需要调用方法SystemChrome.setEnabledSystemUIMode(mode)并将SystemUiMode的值作为参数传递。

SystemUiMode是在flutter源代码中定义的枚举，如下所示：

enum SystemUiMode {
  leanBack,
  immersive,
  immersiveSticky,
  edgeToEdge,
  manual,
}

代码示例

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

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge).then(
    (_) => runApp(MyApp()),
  );
}

文档

• setEnabledSystemUIMode()
• SystemUiMode

- Guillaume Roux

Answer 2

在更改系统 UI 模式之前，您需要先运行应用程序，否则将出现以下异常。

E/flutter (32277): [ERROR:flutter/lib/ui/ui_dart_state.cc(209)] Unhandled Exception: Null check operator used on a null value
E/flutter (32277): #0      MethodChannel.binaryMessenger (package:flutter/src/services/platform_channel.dart:121:86)
E/flutter (32277): #1      MethodChannel._invokeMethod (package:flutter/src/services/platform_channel.dart:146:36)
E/flutter (32277): #2      OptionalMethodChannel.invokeMethod (package:flutter/src/services/platform_channel.dart:415:18)
E/flutter (32277): #3      SystemChrome.setEnabledSystemUIMode (package:flutter/src/services/system_chrome.dart:471:37)
E/flutter (32277): #4      main (package:randomdice2/main.dart:9:16)
E/flutter (32277): #5      _runMainZoned.<anonymous closure>.<anonymous closure> (dart:ui/hooks.dart:145:25)
E/flutter (32277): #6      _rootRun (dart:async/zone.dart:1428:13)
E/flutter (32277): #7      _CustomZone.run (dart:async/zone.dart:1328:19)
E/flutter (32277): #8      _runZoned (dart:async/zone.dart:1863:10)
E/flutter (32277): #9      runZonedGuarded (dart:async/zone.dart:1851:12)
E/flutter (32277): #10     _runMainZoned.<anonymous closure> (dart:ui/hooks.dart:141:5)
E/flutter (32277): #11     _delayEntrypointInvocation.<anonymous closure> (dart:isolate-patch/isolate_patch.dart:283:19)
E/flutter (32277): #12     _RawReceivePortImpl._handleMessage (dart:isolate-patch/isolate_patch.dart:184:12)
E/flutter (32277):

所以它是。

void main() {
  runApp(const MyApp());
  SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky);
}

- Der Korrigierer

---

您之所以出现此异常，是因为您需要在 SystemChrome.setEnabledSystemUIMode 之前添加 WidgetsFlutterBinding.ensureInitialized();。 - Guillaume Roux

谢谢你，Guillaume！这解决了我使用 SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky); 时遇到的问题！ - wlarcheveque

Answer 3

为了让半透明状态栏在没有AppBar的情况下正常工作，我不得不找到一个非常奇怪的解决方法，类似于以下内容：

Scaffold(
    appBar: AppBar(
        systemOverlayStyle: SystemUiOverlayStyle.dark,
        toolbarHeight: -MediaQuery.of(context).padding.top,
    ),
    body: // ...
)

- Mehmed Mert

Answer 4

究竟有效的是什么？

void main() {
      // WidgetsFlutterBinding.ensureInitialized();
      SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
        systemNavigationBarColor: Colors.transparent,
      ));
      SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
      runApp(MyApp());
    }

- Bohdan Zahreba