flutter如何实现全屏

在Flutter开发中，如何实现全屏显示？我尝试使用SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky)但效果不太理想，有时候状态栏还是会闪现。请问有没有更稳定的方法可以让App在不同Android/iOS设备上都能完美全屏？需要兼顾横竖屏切换的情况。

2 回复

在Flutter中，使用SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky)可实现全屏。此方法隐藏状态栏和导航栏，用户滑动屏幕边缘可临时显示系统UI。

更多关于flutter如何实现全屏的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中实现全屏显示可以通过以下两种方式：

1. 使用 SystemChrome 设置全屏

import 'package:flutter/services.dart';

// 进入全屏模式
void enterFullScreen() {
  SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky);
}

// 退出全屏模式
void exitFullScreen() {
  SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
}

// 在页面中使用
@override
void initState() {
  super.initState();
  enterFullScreen();
}

@override
void dispose() {
  exitFullScreen();
  super.dispose();
}

2. 使用 SystemUiOverlay 隐藏状态栏和导航栏

import 'package:flutter/services.dart';

// 隐藏状态栏和导航栏
void hideSystemUI() {
  SystemChrome.setEnabledSystemUIMode(
    SystemUiMode.manual,
    overlays: [],
  );
}

// 显示状态栏和导航栏
void showSystemUI() {
  SystemChrome.setEnabledSystemUIMode(
    SystemUiMode.manual,
    overlays: SystemUiOverlay.values,
  );
}

可用的 SystemUiMode 选项：

  • SystemUiMode.edgeToEdge - 正常模式
  • SystemUiMode.immersive - 全屏，滑动显示系统UI
  • SystemUiMode.immersiveSticky - 全屏，短暂滑动显示系统UI
  • SystemUiMode.leanBack - 轻量级全屏

注意事项：

  • 在页面退出时记得恢复系统UI
  • 全屏模式在iOS和Android上的表现可能略有不同
  • 建议在需要全屏的页面（如视频播放、游戏）中使用

选择适合你应用场景的方式即可实现全屏效果。

回到顶部