#flutter #colors #statusbar #navigationbar #darkmode
Вопрос:
Я хочу изменить цвет системной навигации и строки состояния при входе в темный режим.
Это мой код:
void main() async { SystemChrome.setSystemUIOverlayStyle( SystemUiOverlayStyle( statusBarBrightness: Brightness.dark, statusBarColor: Colors.white, statusBarIconBrightness: Brightness.dark, systemNavigationBarColor: Colors.white, systemNavigationBarDividerColor: Colors.white, systemNavigationBarIconBrightness: Brightness.dark, ), ); ... } Я использую systemChrome, и он отлично работает. Но моя проблема в том, что я могу изменить цвет вручную только с помощью кода, а не при переключении в темный или светлый режим или при использовании системных настроек.
Комментарии:
1. Где вы его тестируете, я имею в виду сеть устройств? И почему бы не использовать
themeModeдальшеMaterialApp?2. Это приложение для Android, и я также использую режим темы в своем приложении MaterialApp для изменения темного и светлого режимов. Это работает, но я не могу понять, как сделать то же самое для навигации и строки состояния.
Ответ №1:
Вы можете изменить тему следующим образом.
MaterialApp( themeMode: ThemeMode.light, // Change it as you want theme: ThemeData( primaryColor: Colors.white, primaryColorBrightness: Brightness.light, brightness: Brightness.light, primaryColorDark: Colors.black, canvasColor: Colors.white, // next line is important! appBarTheme: AppBarTheme(brightness: Brightness.light)), darkTheme: ThemeData( primaryColor: Colors.black, primaryColorBrightness: Brightness.dark, primaryColorLight: Colors.black, brightness: Brightness.dark, primaryColorDark: Colors.black, indicatorColor: Colors.white, canvasColor: Colors.black, // next line is important! appBarTheme: AppBarTheme(brightness: Brightness.dark)), ... Комментарии:
1. Спасибо за ваш код. Я делаю это именно так, как вы это показываете. Но я обнаружил, что внутри моего приложения только функция systemChrome работает для всех экранов. Но, конечно, я попробую это и дам отзыв. 🙂
2. Проблема в том. Я не использую панель приложений внутри своего приложения. Ни на одном экране. И я изменю цвет панели состояния и панели навигации системы. Это должно выглядеть так же, как в Instagram. Экран отверстия должен быть покрыт цветом фона.
Ответ №2:
Перепробовав множество вещей, я нашел следующее решение своей проблемы. Я не знаю, является ли это самым чистым решением, но оно работает. Это решение интересно для тех, кто не использует панель приложений, как в моем случае.
Хитрость заключается в следующем …
@override Widget build(BuildContext context) { Theme.of(context).scaffoldBackgroundColor == Colors.white ? _lightStatusAndNavigationBar() : _darkStatusAndNavigationBar(); return Scaffold( backgroundColor: Theme.of(context).scaffoldBackgroundColor, ... } Запрос находится в сборке моего класса, в которой у меня есть панель навигации моего приложения. Все остальные экраны подключены там.
Используя Theme.of (контекст) .scaffoldBackgroundColor, я спрашиваю, какой дизайн следует использовать для панели состояния и навигации.
Это две функции для разных цветов:
void _darkStatusAndNavigationBar() { SystemChrome.setSystemUIOverlayStyle( SystemUiOverlayStyle( statusBarBrightness: Brightness.light, statusBarColor: Colors.grey.shade900, statusBarIconBrightness: Brightness.light, systemNavigationBarColor: Colors.grey.shade900, systemNavigationBarDividerColor: Colors.grey.shade900, systemNavigationBarIconBrightness: Brightness.light, ), ); } void _lightStatusAndNavigationBar() { SystemChrome.setSystemUIOverlayStyle( SystemUiOverlayStyle( statusBarBrightness: Brightness.dark, statusBarColor: Colors.white, statusBarIconBrightness: Brightness.dark, systemNavigationBarColor: Colors.white, systemNavigationBarDividerColor: Colors.white, systemNavigationBarIconBrightness: Brightness.dark, ), ); } Если что-то все еще непонятно, просто спросите. 🙂