-
Notifications
You must be signed in to change notification settings - Fork 29.7k
Description
Why flutter can’t update the UI when the app is inactive? on my iPhone, when I change the theme to dark mode via the Control Center panel, I expect that the flutter UI could be updated immediately, But in fact it could not be updated until the Control Center panel hides, in other words the app becomes active again. what’s worse, the duration between the Control Center panel hides and the app becomes active is as long as 1400ms. Is there some way to update the ui when the app is inactive?
Steps to repeat:
1, Slide up on the screen from the bottom of iPhone to see if the Dark Mode exists on Control Center, If not, it can be added by following the step2.
2, Launch the Settings app, and then tap Control center, scroll the list to MORE CONTROLS and find the Dark Mode cell and tap the green plus icon. This step can be ignored If the Dark Mode already exists in Control Center.
3, Tap the Dark Mode icon on Control Center Panel, thus the app theme changes to dark mode.
At this moment, the iOS UI can be updated immediately even if the the Control Center Panel floats on screen. In flutter, I observed the theme changing event and the didChangePlatformBrightness method is called immediately,I called setState in didChangePlatformBrightness. But the build function is not scheduled.
4, Slide down on the screen to hide the Control Center panel.
After about 1400 ms, the build method of _MyAppState is called and the UI is updated. What I expect is that the flutter UI can be updated immediately when the theme changed even if the app is inactive or when the Control Center panel hides. Waiting for 1400 ms can’t be accepted.
My test code is attached as below.
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> with WidgetsBindingObserver {
Brightness brightness;
@override
void initState() {
super.initState();
brightness = Brightness.light;
WidgetsBinding.instance.addObserver(this);
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('example app'),
),
body: Center(
child: Container(
color: brightness == Brightness.dark ? Colors.black : Colors.white,
),
),
),
);
}
@override
void dispose() {
WidgetsBinding.instance.removeObserver(this);
super.dispose();
}
@override
void didChangePlatformBrightness() {
setState(() {
brightness =
WidgetsBinding.instance.window.platformBrightness;
});
}
}