Flutter export option

[nTerior]

Describe the solution you'd like Would love an export option for Flutter (used for mobile dev)

Flutter ColorScheme Docs

[InvitedToHell]

1+

[thezachdrake]

I currently use this tool and copy and paste the hex values into a flutter theme. It would actually be awesome to export both colors and fonts as a themedata. Most likely the best way to do this would be to export the light and dark settings in realtime colores as ThemeData.dark and ThemeData.light and then use the slected google fonts as the font families.

[juxtopposed]

Hi there, please check the updates in v3.1. This is available in the custom exports. Let me know if this is the format you're looking for, and if not, what format would be more useful?

[nTerior]

In Flutter, you can define a Theme that automatically applies all colors to any on-screen element.

Adding an export option for the colors is nice, but I would have to use some boilerplate code to copy all the colors into their appropriate variable in the ThemeData object.

e.g.

// realtimecolor's default flutter export
static const textColor = Color(0xFF050315);
static const backgroundColor = Color(0xFFfbfbfe);
static const primaryColor = Color(0xFF2f27ce);
static const secondaryColor = Color(0xFFdedcff);
static const accentColor = Color(0xFF433bff);

// required, additional (boilerplate) Code
static const theme = ThemeData(
  colorScheme: ColorScheme(
    brightness: Brightness.dark, // or Brightness.light
    primary: primaryColor,
    onPrimary:, // not available in realtimecolors
    primaryContainer: , // not available in realtimecolors
    onPrimaryContainer: , // not available in realtimecolors
    // same for secondary and tertiary (accent)
    background: backgroundColor,
    onBackground: , // could be textColor
    // etc...
  ),
);

[juxtopposed]

This is released in v3.2. Let me know if it looks good.

[nTerior]

Thats great, thank you!

[nTerior]

Yeah, so I now noticed that there are some issues regarding this template, here's a fixed version:

Fixes:

• Added necessary surface, onSurface, error and onError parameters -> error and onError are filled with default material values
• Removed static keyword (static is only allowed in classes)

const textColor = Color(${text.hexMtrl});
const backgroundColor = Color(${bg.hexMtrl});
const primaryColor = Color(${primary.hexMtrl});
const primaryFgColor = Color(${primaryFg.hexMtrl});
const secondaryColor = Color(${secondary.hexMtrl});
const secondaryFgColor = Color(${secondaryFg.hexMtrl});
const accentColor = Color(${accent.hexMtrl});
const accentFgColor = Color(${accentFg.hexMtrl});

const colorScheme = ColorScheme(
  brightness: Brightness.${theme},
  background: backgroundColor,
  onBackground: textColor,
  primary: primaryColor,
  onPrimary: primaryFgColor,
  secondary: secondaryColor,
  onSecondary: secondaryFgColor,
  tertiary: accentColor,
  onTertiary: accentFgColor,
  surface: backgroundColor,
  onSurface: textColor,
  error: Brightness.${theme} == Brightness.light ? Color(0xffB3261E) : Color(0xffF2B8B5),
  onError: Brightness.${theme} == Brightness.light ? Color(0xffFFFFFF) : Color(0xff601410),
);

[juxtopposed]

Thanks for pointing it out. Updated in v3.3