I want to change the color of the systemNavigationBar based on the theme.
I have been trying to change the color of the system navigation color of the app using the SystemOverlayStyle
but it doesn't seem to work.
ThemeData get light => ThemeData(
appBarTheme: AppBarTheme(
iconTheme: lightBase.iconTheme,
backgroundColor: Colors.transparent,
elevation: 0,
centerTitle: true,
titleTextStyle: const TextStyle(
fontWeight: FontWeight.bold,
fontSize: 17,
color: AppColors.textDark,
),
systemOverlayStyle:
SystemUiOverlayStyle(systemNavigationBarColor: Colors.pink),
),
);
CodePudding user response:
Wrap Scaffold
with AnnotatedRegion
widget. Then set it's value property to SystemUIOverlayStyle
For Example
@override
Widget build(BuildContext context) {
return AnnotatedRegion<SystemUiOverlayStyle>(
value: const SystemUiOverlayStyle(
statusBarBrightness: Brightness.light,
statusBarIconBrightness: Brightness.dark,
statusBarColor: Colors.transparent,
systemNavigationBarColor: Colors.white, // Change Background color
systemNavigationBarIconBrightness: Brightness.dark, // Change Icon color
),
child: Scaffold(
To change dynamically, for example with system theme, first get the Brightness
of your system.
var brightness = MediaQuery.of(context).platformBrightness;
bool isDarkMode = brightness == Brightness.dark;
Now based on isDarkMode
value
systemNavigationBarColor:isDarkMode ? Colors.white : Colors.black,
CodePudding user response:
use manifest.xml file( in android project)
https://developer.android.com/reference/android/view/Window#setNavigationBarColor(int)