Flutter：如何更改系统导航栏颜色？

Question

class _MyAppState extends State<MyApp> {
  DarkThemeProvider themeProvider = DarkThemeProvider();

  @override
  void initState() {
    getCurrentAppTheme();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => themeProvider,)
      ],
      child: Consumer<DarkThemeProvider>(
        builder: (BuildContext context, value, Widget child){
          return MaterialApp(
            theme: Style.themeData(themeProvider.darkTheme, context),
              home: Mainpage(),
          );
        },
      )
    );
  }
}

This is my code. I want to change my systemNavigationBarColor when darkmode or lightmode. How to change the color of systemNavigationBarColor ?

When I use SystemChrome like this,

  SystemChrome.setSystemUIOverlayStyle(
      SystemUiOverlayStyle(
          statusBarColor: Colors.transparent,
          statusBarIconBrightness: Brightness.dark,
          systemNavigationBarColor: Provider.of<DarkThemeProvider>(context).darkTheme ? Colors.black : Colors.white,
          systemNavigationBarIconBrightness: Provider.of<DarkThemeProvider>(context).darkTheme ?Brightness.light : Brightness.dark
      )
  );

this code is not working.

Answer 1

You could wrap your screen in an AnnotatedRegion when navigating to it (eg in your routes map):

return AnnotatedRegion<SystemUiOverlayStyle>(
    value: SystemUiOverlayStyle.light.copyWith(
        systemNavigationBarColor: primaryColor,
    ),
    child: MyApp(),
);