Home > Enterprise >  How to Modify FlutterFire UI Accent Colour
How to Modify FlutterFire UI Accent Colour

Time:07-18

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!

CodePudding user response:

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(),
    );

CodePudding user response:

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.blue),
            foregroundColor: MaterialStateProperty.all<Color>(Colors.white),
          ),
        ),
      ),

CodePudding user response:

I ended up finding the answer to my own question. Turns out the theming is part of the buttons, and you have to individually define a few properties. I ended up defining the following:

textButtonTheme: TextButtonThemeData(
  style: TextButton.styleFrom(
    primary: Colors.deepPurpleAccent,
  ),
),
elevatedButtonTheme: ElevatedButtonThemeData(
  style: ElevatedButton.styleFrom(
    primary: Colors.deepPurpleAccent,
  ),
),
outlinedButtonTheme: OutlinedButtonThemeData(
  style: OutlinedButton.styleFrom(
    primary: Colors.deepPurpleAccent,
  ),
),
colorScheme: ColorScheme.fromSwatch().copyWith(
    primary: Colors.deepPurpleAccent,
    secondary: Colors.deepPurpleAccent,
    brightness: Brightness.light)

This set them all to deepPurpleAccent!

  • Related