Flutter 2.5中Android全屏模式下如何实现Lean Back、Sticky、Sticky Immersive及Edge to Edge模式？

Hey fellow Flutter dev! Let's dive into implementing those Android fullscreen modes introduced in Flutter 2.5—Lean Back, Sticky, Sticky Immersive, and Edge to Edge. These modes let you fine-tune how your app interacts with Android's system UI (status bar, navigation bar) for a more polished user experience.

First, a quick overview of what each mode does so you can pick the right one for your use case:

• Lean Back: Ideal for media apps (videos, e-books). Tapping anywhere on the screen brings up the system UI, which auto-hides after a few seconds.
• Sticky: Great for games or drawing apps. You have to swipe from the screen edge to reveal the system UI, which hides immediately when you let go—prevents accidental taps.
• Sticky Immersive: Perfect for apps where you need occasional quick access to system UI without getting interrupted (like readers or maps). Swiping from the edge shows the UI, which stays visible until you interact with it again or it times out.
• Edge to Edge: Modern, immersive design where your app content extends under the status and navigation bars. You control the transparency of these bars to blend with your app's design.

First, make sure you import the services package since we'll be using system UI controls:

import 'package:flutter/services.dart';

1. Lean Back Mode #

Enable this mode with a simple one-liner. It's super straightforward for media-focused apps:

void enableLeanBackMode() {
  SystemChrome.setEnabledSystemUIMode(SystemUiMode.leanBack);
}

Call this method when you want to enter fullscreen (e.g., when a video starts playing). Tapping the screen will toggle the system UI temporarily.

2. Sticky Mode (Immersive) #

Use this for apps where uninterrupted focus is key. Users have to intentionally swipe from the edge to access system UI:

void enableStickyMode() {
  SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersive);
}

Once the user swipes to show the UI, letting go of the screen will hide it right away—no accidental UI interruptions here.

3. Sticky Immersive Mode #

This is the "sticky" version of immersive mode, where the system UI stays visible longer after being summoned:

void enableStickyImmersiveMode() {
  SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky);
}

The UI appears semi-transparent when swiped up/down, and stays until the user taps the app content or it auto-hides after a short delay. Great for apps where users might need quick access to volume controls or navigation without leaving the app's main flow.

4. Edge to Edge Mode #

This mode lets your app's content stretch under the status and navigation bars. You'll need to adjust the system UI's transparency and ensure your content isn't blocked by the bars.

Step 1: Enable Edge to Edge #

void enableEdgeToEdgeMode() {
  SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
  
  // Customize system UI colors to match your app's design
  SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
    statusBarColor: Colors.transparent, // Make status bar transparent
    navigationBarColor: Colors.transparent, // Make navigation bar transparent
    // Set icon brightness based on your app's background (dark/light)
    statusBarIconBrightness: Brightness.dark,
    navigationBarIconBrightness: Brightness.dark,
  ));
}

Step 2: Avoid Content Blocking #

Since your content now extends under the system bars, you need to add padding to keep it visible. Use either SafeArea or manual padding with MediaQuery:

Option A: Use SafeArea (Simplest)

SafeArea automatically adds padding to avoid system UI:

Scaffold(
  body: SafeArea(
    child: YourAppContent(), // Your main content widget
  ),
);

Option B: Manual Padding (More Control)

If you need precise control over padding, use MediaQuery to get the system bar heights:

Scaffold(
  body: Padding(
    padding: EdgeInsets.only(
      top: MediaQuery.of(context).padding.top, // Status bar height
      bottom: MediaQuery.of(context).padding.bottom, // Navigation bar height
    ),
    child: YourAppContent(),
  ),
);

• Lean Back: Video players, fullscreen slideshows, e-readers.
• Sticky: Games, drawing apps, any app where accidental UI taps would ruin the experience.
• Sticky Immersive: Maps, fitness apps, readers—where users need occasional system access but don't want to be pulled out of the app.
• Edge to Edge: Most modern apps (social media, productivity tools) to create a seamless, immersive design.

You can toggle these modes dynamically too—for example, switch to Lean Back when a video starts, then back to Edge to Edge when it ends.

内容的提问来源于stack exchange，提问作者Huseyn