Accessing colorScheme in Widgets in Flutter

Question

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

score 5 · Accepted Answer · answered Oct 30 '21 at 12:34

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

Accessing colorScheme in Widgets in Flutter

1 Answers1