Flutter/Android change background color of Gesture Navigation icon

Question

I have an icon set using a transparent image, on the home screen the background is white but when in the Gesture Navigation view the icon above the app screen is blue. How do I change this background color? (Using flutter)

Answer 1

I am also having this issue. As a work around, I keep the Material App ThemeData's primary color as white. Then used the Theme widget to override my page theme to use my custom theme.

https://api.flutter.dev/flutter/material/ThemeData-class.html

class MyApp extends StatelessWidget {
  final _navigatorKey = GlobalKey<NavigatorState>();

  NavigatorState? get _navigator => _navigatorKey.currentState;

  MyApp({super.key});

  // App Routing
  Route<dynamic> _generateRoute(RouteSettings settings) {
    Widget newPage = Container();
    switch (settings.name) {
      case AppRoutes.welcome:
        newPage = const WelcomePage();
        break;
      case AppRoutes.login:
        newPage = LoginPage();
        break;
    }
    return FadeRoute(
      page: Theme(
        data: lightTheme,
        child: newPage,
      ),
    );
  }

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MultiBlocProvider(
        providers: [
          BlocProvider<AppBloc>(
              create: (_) => AppBloc()..add(InitializeAppEvent())),
          BlocProvider<AuthBloc>(create: (_) => AuthBloc())
        ],
        child: BlocListener<AuthBloc, AuthState>(
            listener: (_, state) {
              if (state is Authenticated) {
                // Go to Main Page
                _navigator?.pushReplacementNamed(AppRoutes.home);
              } else {
                // Go to Login Page
                _navigator?.pushReplacementNamed(AppRoutes.login);
              }
            },
            child: MaterialApp(
              navigatorKey: _navigatorKey,
              title: 'Flutter Demo',
              theme: ThemeData(primaryColor: Colors.white),
              initialRoute: AppRoutes.welcome,
              onGenerateRoute: _generateRoute,
            )));
  }
}

Answer 2

It isn't from Android. Flutter's MaterialApp already provides a set of attributes for us, including a Prymary Color, ColorScheme, etc. The reason is obvious, if every developer had to write every theme aspect in every widget coding would be awful. So Material widgets look for a theme, which Material will provide as default, if we don't overide it.

Know this, the solution is:

1. Overide some componentes of the whole Theme in the MaterialApp wich is my recomendation. The code bellow is an example of this.
2. Wrap a specifc widget/s with an Theme widget that overides the define Theme for explict specified atributes.
3. Pass a custom theme directly in the widgets you are using. Very common to see in Text widgets when people do Text( "some text", style: TextStyle()) (note the TextStyle), but this logic is apllied to a bunch of other widgets too, including buttons. Disavantage of this is that you have to manual change every widget, so no auto darkmode and painfull design changes for reasonable size apps. I do not recomend as a go to solution for every widget.

Example of what I meant by overiding the default Theme of your App:

MaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'Association App for AMDKP Integrated Plataform',
        theme: ThemeData(
          colorScheme: ColorScheme(
            brightness: Brightness.light,
            primary: consts.golden1,
            onPrimary: consts.black41,
            secondary: Colors.green.shade500,
            onSecondary: Colors.green.shade300,
            background: consts.greyWhite,
            onBackground: consts.black41,
            surface: Colors.white,
            onSurface: Colors.black45,
            error: Colors.red.shade900,
            onError: Colors.red.shade900,
          ),
          primarySwatch: Colors.blue,
          primaryColor: consts.golden1,
          elevatedButtonTheme: ElevatedButtonThemeData(
              style: ElevatedButton.styleFrom(
            shadowColor: consts.black41,
            primary: Theme.of(context).colorScheme.onSurface.withAlpha(150),
            onPrimary: Theme.of(context).colorScheme.surface,
          )),
          textButtonTheme: TextButtonThemeData(
              style: TextButton.styleFrom(
            primary: Colors.white.withAlpha(230),
            backgroundColor: Colors.black87.withAlpha(170),
            textStyle: Theme.of(context).textTheme.bodyMedium,
            padding: const EdgeInsets.symmetric(horizontal: 10.0),
          )),
          inputDecorationTheme: const InputDecorationTheme(
            focusedBorder: UnderlineInputBorder(
                borderSide: BorderSide(color: consts.golden1, width: 2)),
          ),
        ),
        home: const HomePage(),

So definitely take a look at flutter themes, it will empower your flutter developer skills and you will benefit a lot by using it anyway! :) Cheers

Answer 3

Thats the primary color you can change it like this

MaterialApp(
    debugShowCheckedModeBanner: false,
    theme: ThemeData(
      primaryColor: Colors.lightGreen,//here.change this one
    ),
  )