Search code examples
flutterdartthemedata

Accessing colorScheme in Widgets in Flutter


Wanted to use accent color for Card and since accentColor is deprecated I used colorScheme instead .Described colorScheme in themeData of MaterialApp. But in the end couldnt use that for card. Showing error: "The argument type 'ColorScheme' can't be assigned to the parameter type 'Color'"

here is themeData from MaterialApp

theme: ThemeData(
    primarySwatch: Colors.green,
    colorScheme: ColorScheme.fromSwatch().copyWith(secondary: Colors.red),
    canvasColor: Color.fromRGBO(255, 245, 224, 1),
    fontFamily: 'Raleway',
    textTheme: ThemeData.light().textTheme.copyWith(
          bodyText1: TextStyle(
            color: Color.fromRGBO(23, 45, 23, 1),
          ),
          bodyText2: TextStyle(
            color: Color.fromRGBO(23, 45, 23, 1),
          ),
          headline6: TextStyle(
            fontSize: 20,
            fontFamily: 'RobotoCondensed',
            fontWeight: FontWeight.bold,
          ),
        ),
  ),

and here is the card where is use it

 Card(
      child: Text(selectedMeal.ingredients[i]),
      color: Theme.of(context).colorScheme,//error shows here
    ),

Solution

  • colorScheme property is of ColorScheme type, while color requires a Color type.

    ColorScheme holds different colors which can be accessed, for example, as follows:

    color: Theme.of(context).colorScheme.secondary,
    

    Follows a full example:

    import 'package:flutter/material.dart';
    
    void main() {
      runApp(const MyApp());
    }
    
    class MyApp extends StatelessWidget {
      const MyApp({Key? key}) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Demo',
          theme: ThemeData(
            primarySwatch: Colors.green,
            colorScheme: ColorScheme.fromSwatch().copyWith(secondary: Colors.red),
            canvasColor: const Color.fromRGBO(255, 245, 224, 1),
            fontFamily: 'Raleway',
            textTheme: ThemeData.light().textTheme.copyWith(
                  bodyText1: const TextStyle(
                    color: Color.fromRGBO(23, 45, 23, 1),
                  ),
                  bodyText2: const TextStyle(
                    color: Color.fromRGBO(23, 45, 23, 1),
                  ),
                  headline6: const TextStyle(
                    fontSize: 20,
                    fontFamily: 'RobotoCondensed',
                    fontWeight: FontWeight.bold,
                  ),
                ),
          ),
          home: const MyHomePage(),
        );
      }
    }
    
    class MyHomePage extends StatefulWidget {
      const MyHomePage({Key? key}) : super(key: key);
    
      @override
      State<MyHomePage> createState() => _MyHomePageState();
    }
    
    class _MyHomePageState extends State<MyHomePage> {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: Center(
            child: Card(
              //child: Text(selectedMeal.ingredients[i]),
              color: Theme.of(context).colorScheme.secondary,
            ),
          ),
        );
      }
    }