Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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 :

enter image description here

like image 932
Huseyn Avatar asked Sep 09 '21 08:09

Huseyn


People also ask

Is flutter 2.5 stable?

Flutter 2.5 was announced as stable on September 8.

How do I take full screen off immersive mode?

Learn how to disable it, too To turn off/on for specific apps, open PhotoSafe and tap Usage Access > Grant > Full Screen Immersive Mode > Allow usage tracking.

What is full screen mode Android?

Full screen mode allows you to watch videos that take up your entire screen. Android ComputeriPhone & iPad. More.


2 Answers

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
like image 184
Guillaume Roux Avatar answered Nov 15 '22 10:11

Guillaume Roux


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);
}
like image 42
Der Korrigierer Avatar answered Nov 15 '22 10:11

Der Korrigierer