Flutter/Android change background color of Gesture Navigation icon-CodePudding

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)

CodePudding user response：

Thats the primary color you can change it like this

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

CodePudding user response：

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:

Overide some componentes of the whole Theme in the MaterialApp wich is my recomendation. The code bellow is an example of this.
Wrap a specifc widget/s with an Theme widget that overides the define Theme for explict specified atributes.
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,
            one rror: 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