How to access ThemeData from imported widgets

Question

I can not use the ThemeData from the imported custom Widgets that I have imported from other files, I dont know if the BuildContext is changing or what. To all the widgets that are used in the main.dart file they can easily use Theme.of(context).colorScheme.primary but from imported widgets this does not work.

main.dart

import 'package:flutter/material.dart';

import 'widgets/expenses_list.dart';
import 'models/expenses_model.dart';
import 'widgets/new_expense.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData().copyWith(
        colorScheme: ThemeData().colorScheme.copyWith(primary: Colors.red),
      ),
      home: MyAppPage(),
    );
  }
}

class MyAppPage extends StatefulWidget {
  @override
  _MyAppPageState createState() => _MyAppPageState();
}

class _MyAppPageState extends State<MyAppPage> {
  final List<ExpensesModel> _expensesObjectList = [
    ExpensesModel(
      id: DateTime.now().toString(),
      name: "Shoes",
      amount: 1200,
      date: DateTime.now(),
    ),
    ExpensesModel(
      id: DateTime.now().toString(),
      name: "Gun",
      amount: 120000,
      date: DateTime.now(),
    ),
  ];

  void _addExpense(String exTitle, double exAmount) {
    final _addExpenseObject = ExpensesModel(
      id: DateTime.now().toString(),
      name: exTitle,
      amount: exAmount,
      date: DateTime.now(),
    );
    setState(() {
      _expensesObjectList.add(_addExpenseObject);
    });
  }

  void _startAddNewExpense(BuildContext context) {
    showModalBottomSheet(
        context: context,
        builder: (bcontext) {
          return NewExpense(_addExpense);
        });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Theme.of(context).colorScheme.primary,
          // HERE IT DOES WORK
          title: Text(
            "Expense App",
            // style: Theme.of(context).textTheme.title,
          ),
          actions: [
            IconButton(
              onPressed: () {
                _startAddNewExpense(context);
              },
              icon: Icon(Icons.add),
            ),
          ],
        ),
        body: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Card(
              elevation: 5,
              color: Theme.of(context).colorScheme.primary,
              // HERE IT DOES WORK
              child: Text("CHART!!"),
            ),
            ExpensesList(_expensesObjectList), //THE IMPORTED WIDGET
          ],
        ),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            _startAddNewExpense(context);
          },
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

imported widget

import 'package:flutter/material.dart';

import '../models/expenses_model.dart';

class ExpensesList extends StatelessWidget {
  final List<ExpensesModel> expensesObjectList;

  ExpensesList(this.expensesObjectList);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 600,
      child: ListView.builder(
        itemBuilder: (context, index) {
          return Card(
            elevation: 5,
            child: Row(
              children: [
                Container(
                  padding: EdgeInsets.symmetric(
                    vertical: 10,
                    horizontal: 10,
                  ),
                  margin: EdgeInsets.all(10),
                  decoration: BoxDecoration(
                    border: Border.all(
                      color: Theme.of(context).colorScheme.primary,
                      // HERE IT DOES NOT WORK
                      width: 2,
                    ),
                  ),
                  child: Text(
                    "PKR ${expensesObjectList[index].amount}",
                    style: TextStyle(
                      color: Theme.of(context).colorScheme.primary,
                      // HERE IT DOES NOT WORK
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      "${expensesObjectList[index].name}",
                      style:
                          TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
                    ),
                    Text(
                      DateTime.now().toString(),
                      style: TextStyle(
                        color: Colors.grey,
                      ),
                    ),
                  ],
                ),
              ],
            ),
          );
        },
        itemCount: expensesObjectList.length,
      ),
    );
  }
}

Screenshot of the app

as you can see the border and text aren't using the theme-defined color which is red.

Answer 1

I think unnecessary "MaterialApp" of "build" in "class _MyAppPageState", like this.

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      backgroundColor: Theme.of(context).colorScheme.primary,
      // HERE IT DOES WORK
      title: Text(
        "Expense App",
        // style: Theme.of(context).textTheme.title,
      ),
      actions: [
        IconButton(
          onPressed: () {
            _startAddNewExpense(context);
          },
          icon: Icon(Icons.add),
        ),
      ],
    ),
    body: Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        Card(
          elevation: 5,
          color: Theme.of(context).colorScheme.primary,
          // HERE IT DOES WORK
          child: Text("CHART!!"),
        ),
        ExpensesList(_expensesObjectList), //THE IMPORTED WIDGET
      ],
    ),
    floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    floatingActionButton: FloatingActionButton(
      onPressed: () {
        _startAddNewExpense(context);
      },
      child: Icon(Icons.add),
    ),
  );
}

If you really need to "MaterialApp" of "class _MyAppPageState", I think you can add theme property, like this.

@override
Widget build(BuildContext context) {
  return MaterialApp(
    debugShowCheckedModeBanner: false,
    theme: Theme.of(context), // <- add this line.
    home: Scaffold(

By the way, why won't you use primarySwatch?
How about this?

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.red,
      ),
      home: MyAppPage(),
    );
  }
}

Answer 2

You can access the ThemeData of your app by following.

Color color = Theme.of(context).primaryColor;