主题数据不适用于继承的类

Question

我已经在 main.dart 中声明了一个主题，只要在 main.dart 中使用了上下文，它就可以正常工作，但是当我在子类上下文中使用 Theme.of(context).primaryColor 时不会拾取主题。

Main.dart

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Expenso',
      theme: ThemeData(
        primarySwatch: Colors.green,
        accentColor: Colors.amber
      ),
      home: Expenso(),

    );
  }
}

class Expenso extends StatefulWidget {
  @override
  _ExpensoState createState() => _ExpensoState();
}

class _ExpensoState extends State<Expenso> {

  final List<Transaction> _transactions=[

  ];

  void _addTransaction(String txTitle,double txAmount)
  {
    final newTx=Transaction(
      title: txTitle,
      amount: txAmount,
      id: DateTime.now().toString(),
      date: DateTime.now()
    );

    setState(() {
      _transactions.add(newTx);
    });
  }

  void _startAddNewTransaction(BuildContext ctx) {
    showModalBottomSheet(
      context: ctx,
      builder: (_) {

        return GestureDetector(
          onTap: () {},
          child: NewTransaction(_addTransaction),
          behavior: HitTestBehavior.opaque,
        );
      },
    );
  }

 @override
  Widget build(BuildContext context) {
    return MaterialApp(

      home: Scaffold(
        appBar: AppBar(
          backgroundColor:Theme.of(context).primaryColor,
          title: Text('Expenso'),
          actions: <Widget>[
            IconButton(
              icon: Icon(Icons.add),
              onPressed: () => _startAddNewTransaction(context),
            )
          ],
          ),
        body:SingleChildScrollView(
        child: Column(
          //mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
             Container(
                width: double.infinity,
                height: 50,
             child: Card(
                color: Colors.blue,
                child: Text('chart')
                )
                ),
              TransactionList(_transactions)
          ],
        ),     

      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed:() => _startAddNewTransaction(context),
        backgroundColor: Theme.of(context).accentColor,
      ),
      )
    );
  }
}

transaction_list.dart

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import '../models/transaction.dart';


class TransactionList extends StatelessWidget {
 final List<Transaction> tractn;

 TransactionList(this.tractn);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 500,
    child :tractn.isEmpty? Column(
      children: <Widget>[
        Text('No Transaction added yet'),
        SizedBox(
          height: 20,
        ),
        Container(
          height:300,
          child: Image.asset('assets/Images/waiting.png',
          fit: BoxFit.cover,),

          )
      ],
    ): ListView.builder(
      itemBuilder: (ctx,index){
        return Card(
                  child: Row(
                    children: <Widget>[
                      Container(
                        margin: EdgeInsets.symmetric(
                          vertical: 10,
                          horizontal: 15,  
                              ),
                        decoration: BoxDecoration(border: Border.all(
                          color: Theme.of(context).primaryColor,
                          width: 2,
                          style: BorderStyle.solid
                        )
                        ),
                        padding: EdgeInsets.all(10),
                        child: Text(
                          '₹ ${tractn[index].amount.toStringAsFixed(2)}',
                          style: TextStyle(
                              fontWeight: FontWeight.bold,
                              fontStyle: FontStyle.italic ,
                              fontSize: 20,
                              color: Colors.green,                             
                          ),
                          ),

                          ),
                      Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                         Text(
                            tractn[index].title,
                            style: TextStyle(
                              fontWeight: FontWeight.bold,
                              fontSize: 15,
                              color: Theme.of(context).primaryColor
                              ),
                              ),
                              Text(
                               DateFormat().format(tractn[index].date) ,
                               style: TextStyle(
                                 fontWeight: FontWeight.bold,
                                 fontSize: 15,
                                 color: Colors.grey
                               ),),
                               Text(
                                tractn[index].id
                               )                                                    
                        ],
                      )
                    ],
                  ),
                );
      },
      itemCount: tractn.length,
    )

            );

  }
}

请指导我如何在继承类中实现主题

Answer 1

我同意@Nolence 的评论。

如果您期望达到以下结果

删除 MaterialApp 小部件并将 Scaffold 作为您的灵长类动物返回小部件在里面

类_ExpensoState

示例代码：

import 'package:flutter/material.dart';
import 'package:flutter_app/Transaction.dart';

import 'transaction_list.dart';

void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Expenso',
      theme: ThemeData(
          primarySwatch: Colors.green,
          accentColor: Colors.amber
      ),
      home: Expenso(),

    );
  }
}

class Expenso extends StatefulWidget {
  @override
  _ExpensoState createState() => _ExpensoState();
}

class _ExpensoState extends State<Expenso> {

  final List<Transaction> _transactions=[

  ];

  void _addTransaction(String txTitle,double txAmount)
  {
    final newTx=Transaction(
        title: txTitle,
        amount: txAmount,
        id: DateTime.now().toString(),
        date: DateTime.now()
    );

    setState(() {
      _transactions.add(newTx);
    });
  }

  void _startAddNewTransaction(BuildContext ctx) {
    showModalBottomSheet(
      context: ctx,
      builder: (_) {

        return GestureDetector(
          onTap: () {},
          child: NewTransaction(_addTransaction),
          behavior: HitTestBehavior.opaque,
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
          appBar: AppBar(
            backgroundColor:Theme.of(context).primaryColor,
            title: Text('Expenso'),
            actions: <Widget>[
              IconButton(
                icon: Icon(Icons.add),
                onPressed: () => _startAddNewTransaction(context),
              )
            ],
          ),
          body:SingleChildScrollView(
            child: Column(
              //mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: <Widget>[
                Container(
                    width: double.infinity,
                    height: 50,
                    child: Card(
                        color: Colors.blue,
                        child: Text('chart')
                    )
                ),
                TransactionList(_transactions)
              ],
            ),

          ),
          floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
          floatingActionButton: FloatingActionButton(
            child: Icon(Icons.add),
            onPressed:() => _startAddNewTransaction(context),
            backgroundColor: Theme.of(context).accentColor,
          ),
    );
  }
}

如果这不是您想要的，请在下面详细说明您的问题或评论。

Answer 2

在您的 Expenso 小部件的构建方法中，您定义了另一个 MaterialApp，它会创建自己的默认主题（与您的第一个主题不同）。删除该 MaterialApp 小部件，它应该可以工作。