In flutter 2.5 In Android full screen lean back, sticky, sticky immersive, and edge to edge

Question

How do I implement lean back, sticky, sticky immersive, and edge to edge in flutter 2.5 When Android is full screen ?

They are new features in flutter 2.5 :

Answer 1

You will need to call the method SystemChrome.setEnabledSystemUIMode(mode) and pass as a parameter the SystemUiMode value you want.

SystemUiMode is an enum defined as follow in the flutter source:

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

Code Sample

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

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

Documentation

• setEnabledSystemUIMode()
• SystemUiMode

Answer 2

For me you have to run the App first before you can change the system ui mode, otherwise you get the following exception.

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):

so its

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

Answer 3

Well, in order to make the translucent status bar work for me (when not having AppBar) I had to find a very strange workaround, something like the following:

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

Answer 4

What really works

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