Flutter全屏控制插件fullscreen的使用

简介

这是一个使Flutter应用轻松启用全屏模式的插件。它实现了Android平台上的三种全屏模式以及iOS平台上的相应模式。

概要

有些内容最适合在全屏模式下体验，比如视频、游戏、图像画廊、书籍以及演示文稿中的幻灯片。本页面展示了如何通过全屏模式更深入地吸引用户，并防止用户意外退出应用。

你可能想要开启全屏模式只是为了最大化屏幕空间。但请注意用户频繁进出应用以查看通知或进行临时搜索等情况。使用全屏模式会导致用户失去系统导航的便捷访问，因此只有当用户体验的提升超出仅仅获得额外的空间时（例如避免在游戏中意外退出或为图片、视频和书籍提供有价值的沉浸式体验），才应该使用全屏模式。

全屏选项

Android提供了三种方法来实现全屏模式：Lean Back（躺倒模式）、Immersive（沉浸模式）和Immersive Sticky（粘性沉浸模式）。在这三种模式中，系统栏会被隐藏，你的活动将继续接收所有触摸事件。它们之间的区别在于用户如何将系统栏重新带入视野。

FullScreenMode.LEANBACK

躺倒模式适用于用户不会大量与屏幕交互的全屏体验，例如观看视频时。

当用户想重新显示系统栏时，他们只需轻触屏幕任意位置。

FullScreenMode.EMERSIVE

沉浸模式适用于用户会大量与屏幕交互的应用。例如游戏、画廊中的图片浏览或阅读分页内容，如书籍或演示文稿中的幻灯片。

当用户需要重新显示系统栏时，他们需要从隐藏系统栏的边缘处滑动。这种更明确的手势可以防止因误触和误滑而打断用户的参与度。

FullScreenMode.EMERSIVE_STICKY

在常规的沉浸模式中，只要用户从边缘滑动，系统就会处理显示系统栏的任务——你的应用甚至不会意识到该手势的发生。因此，如果用户可能会在屏幕边缘进行滑动作为主要应用体验的一部分（例如在需要大量滑动的游戏或使用绘图应用时），你应该启用“粘性”沉浸模式。

在粘性沉浸模式中，如果用户从带有系统栏的边缘滑动，系统栏会出现但半透明，并且触摸手势会被传递给你的应用，以便应用也可以响应该手势。

例如，在一个使用这种方法的绘图应用中，如果用户想要在屏幕边缘开始绘制一条线，从边缘滑动会显示系统栏并开始从边缘绘制线条。几秒内无互动或用户触摸或手势到系统栏外时，系统栏会自动消失。

安装

在pubspec.yaml文件的依赖部分添加以下声明：

dependencies:
  flutter:
    sdk: flutter
  fullscreen: <latest-version>

如何使用

导入包：

import 'package:fullscreen/fullscreen.dart';

要启用全屏模式（粘性沉浸模式），请将全屏模式（FullScreenMode.EMERSIVE_STICKY）作为参数传递给FullScreen类的enterFullScreen方法。

// 要进入 FullScreenMode.EMERSIVE_STICKY，
await FullScreen.enterFullScreen(FullScreenMode.EMERSIVE_STICKY);

要退出全屏模式，调用FullScreen类的exitFullScreen方法：

// 要退出全屏模式
await FullScreen.exitFullScreen();

示例代码

以下是完整的示例代码，展示了如何在Flutter应用中启用和退出全屏模式。

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  void enterFullScreen(FullScreenMode fullScreenMode) async {
    await FullScreen.enterFullScreen(fullScreenMode);
  }

  void exitFullScreen() async {
    await FullScreen.exitFullScreen();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        floatingActionButton: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            FloatingActionButton(
              onPressed: () async {
                enterFullScreen(FullScreenMode.EMERSIVE_STICKY);
              },
              child: new Icon(Icons.fullscreen),
            ),
            FloatingActionButton(
              onPressed: () async {
                exitFullScreen();
              },
              child: new Icon(Icons.fullscreen_exit),
            ),
          ],
        ),
        appBar: AppBar(
          title: const Text('Fullscreen plugin'),
        ),
        body: Center(child: new Text('Flutter full screen plugin')),
      ),
    );
  }
}