0

I've been struggling with attempting to modify the accent colour in FlutterFire UI.

Namely, I'd like to change the blue accent colour here to a different material colour, such as purple. I've messed around with the app theming to no avail, as none of the ThemeData parameters seem to influence this colour so far. I was wondering if this was possible? Thanks!

Kaushik Chandru
  • 15,510
  • 2
  • 12
  • 30
Garv Shah
  • 1
  • 3

3 Answers3

0

accent color is deprecated so now u can user Colorscheme instead like this

MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.orange,
        colorScheme: ColorScheme.fromSwatch(accentColor: Colors.green),
      ),
      home: NextScreen(),
    );
Irfan Ganatra
  • 967
  • 3
  • 13
  • The accent colour property here doesn't seem to modify the colour of the widgets in FlutterFire UI, rather they seem to use the button themes, and the primary colour – Garv Shah Jul 18 '22 at 00:31
0

You can use this in theme data

theme: ThemeData(
        outlinedButtonTheme: OutlinedButtonThemeData(
          style: ButtonStyle(
            padding: MaterialStateProperty.all<EdgeInsets>(
              const EdgeInsets.all(24),
            ),
            backgroundColor: MaterialStateProperty.all<Color>(Colors.purple),
            foregroundColor: MaterialStateProperty.all<Color>(Colors.white),
          ),
        ),
     textButtonTheme: TextButtonThemeData(
              style: ButtonStyle(
            foregroundColor:
MaterialStateProperty.all<Color>(Colors.purple)
  )
 )
),
Kaushik Chandru
  • 15,510
  • 2
  • 12
  • 30
  • Unfortunately, this isn't what I was looking for. This seems to be from the bottom of the page [here](https://github.com/firebase/flutterfire/blob/master/packages/flutterfire_ui/doc/auth/theming.md), but that simply changes the button to be filled, and doesn't change the accent colour. Thanks for the help though! – Garv Shah Jul 18 '22 at 00:33
  • In background color at the last you see Colors.blue. Change it to Colors.purple or whatever colour you are looking for. Edited my answer – Kaushik Chandru Jul 18 '22 at 00:45
  • That seems to change the background colour of [this](https://github.com/firebase/flutterfire/raw/master/packages/flutterfire_ui/doc/images/ui-auth-theming-button.png) custom button, not the accent colour, since you're defining your own button. Rather, the properties I was looking for were changing the "Register" text colour or "Forgot Password?" – Garv Shah Jul 19 '22 at 01:21
  • Those are text button.. editing my answer – Kaushik Chandru Jul 19 '22 at 01:29
  • actually it turns out they're all linked to the primary colour in the colour scheme – Garv Shah Jul 20 '22 at 04:10
0

I ended up finding the answer to my own question. Turns out the theming is part of the colour scheme property, and I ended up defining the following:

colorScheme: ColorScheme.fromSwatch().copyWith(
    primary: Colors.deepPurpleAccent
)

This set them all to deepPurpleAccent!

Garv Shah
  • 1
  • 3