Flutter Question posted in
The official Flutter documentation can be found here.

How to correctly setup ColorSchemes in flutter

I started using this Material Theme Builder to create Color Schemes. Unlike widgets from packages, the Flutter widgets like ListTiles and containers don’t follow the app theme (color scheme) that I set. I expected it to look like this picture:

App color output according to Material Theme Builder

Is the color scheme more of a palette, where I have to manually set the colors for all widgets or is there a way to automatically end up with style in the picture?

My code so far:

const lightColorScheme = ColorScheme(
    brightness: Brightness.light,
    primary: Color(0xFF415f91),
    onPrimary: Color(0xFFffffff),
    primaryContainer: Color(0xFFd6e3ff),
    onPrimaryContainer: Color(0xFF131c2b),
    secondary: Color(0xFF565f71),
    onSecondary: Color(0xFFffffff),
    error: Color(0xFFba1a1a),
    onError: Color(0xFFffffff),
    surface: Color(0xFFf9f9ff),
    onSurface: Color(0xFF191c20),
    surfaceDim: Color(0xFFd9d9e0),
    tertiary: Color(0xFF705575),
    onTertiary: Color(0xFFffffff),
    tertiaryContainer: Color(0xFFfad8fd),
    onTertiaryContainer: Color(0xff28132e));

const darkColorScheme = ColorScheme(
    brightness: Brightness.dark,
    primary: Color(0xFFaac7ff),
    onPrimary: Color(0xFF0a305f),
    primaryContainer: Color(0xFF284777),
    onPrimaryContainer: Color(0xFFd6e3ff),
    secondary: Color(0xFFbec6dc),
    onSecondary: Color(0xFF283141),
    secondaryContainer: Color(0xFFdae2f9),
    onSecondaryContainer: Color(0xFF131c2b),
    error: Color(0xFFffb4ab),
    onError: Color(0xFF690005),
    surface: Color(0xFF111318),
    onSurface: Color(0xFFe2e2e9));

final theme = ThemeData(
  useMaterial3: true,
  colorScheme: lightColorScheme,
  primarySwatch: Colors.blue,
  textTheme: GoogleFonts.latoTextTheme().apply(
    bodyColor: lightColorScheme.onSurface,
    displayColor: lightColorScheme.onSurface,
  ),
  
);

final darkTheme = ThemeData(
  useMaterial3: true,
  colorScheme: darkColorScheme,
  textTheme: GoogleFonts.latoTextTheme().apply(
    bodyColor: darkColorScheme.onSurface,
    displayColor: darkColorScheme.onSurface,
  ),
  
);

class App extends StatelessWidget {
  const App({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: theme,
      darkTheme: darkTheme,
      home: const TabsScreen(),
    );
  }
}
Tags:

2

Answers


  2. 0

    You can override list tile or any widget theme data like this:

    ThemeData _theme(ColorScheme colorScheme) {
    return ThemeData(
      useMaterial3: true,
      colorScheme: colorScheme,
      brightness: colorScheme.brightness,
      scaffoldBackgroundColor: colorScheme.background,
      canvasColor: colorScheme.surface,
      // HERE
      listTileTheme: ListTileThemeData(
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
        tileColor: colorScheme.surfaceContainerHigh,
      ),
      textTheme: textTheme.apply(
        bodyColor: colorScheme.onSurface,
        displayColor: colorScheme.onSurface,
      ),
    );
  }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search