Flutter 主题不适用于新屏幕

Question

下面是一个简单的屏幕，其中包含三个具有不同颜色主题的按钮，我想要的是当每个按钮按下时，详细信息屏幕中的任何一个都应该使用该主题。

此外，我也不知道要更改 MaterialAppWidget 的主题，因为它在其他地方使用，只是这个详细信息屏幕需要根据它打开的按钮设置主题。

import 'package:flutter/material.dart';

main() => runApp(const App());

class App extends StatelessWidget {
  const App({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) => MaterialApp(
        home: const HomeScreen(),
        theme: ThemeData(
          primaryColor: Colors.orange,
          colorScheme: ColorScheme.fromSwatch(primarySwatch: Colors.orange),
        ),
      );
}

class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Wrap(
          spacing: 20,
          direction: Axis.vertical,
          children: const [
            ThemedButton(
              materialColor: Colors.red,
            ),
            ThemedButton(
              materialColor: Colors.green,
            ),
            ThemedButton(
              materialColor: Colors.brown,
            ),
          ],
        ),
      ),
    );
  }
}

class ThemedButton extends StatelessWidget {
  final MaterialColor materialColor;

  const ThemedButton({
    Key? key,
    required this.materialColor,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Theme(
      data: Theme.of(context).copyWith(
        primaryColor: materialColor,
        colorScheme: ColorScheme.fromSwatch(primarySwatch: materialColor),
      ),
      child: ElevatedButton(
        onPressed: () {
          Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => const DetailScreen(),
            ),
          );
        },
        child: const Text('Go to Detail Screen'),
      ),
    );
  }
}

class DetailScreen extends StatelessWidget {
  const DetailScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
    );
  }
}

Answer 1

这样的事情对你有用吗？

class ThemedButton extends StatelessWidget {
  
  final MaterialColor materialColor;
  const ThemedButton({Key? key, required this.materialColor}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      style: ElevatedButton.styleFrom(
        primary: materialColor
      ),
      onPressed: () {
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => Theme(
              data: Theme.of(context).copyWith(
                primaryColor: materialColor,
                colorScheme: ColorScheme.fromSwatch(primarySwatch: materialColor),
              ),
              child: const DetailScreen()
            )
          ),
        );
      },
      child: const Text('Go to Detail Screen'),
    );
  }
}

我将 Elevated Button 包装在 Builder Widget 中以使用新的 BuildContext 主题向下传递。

Flutter 主题不适用于新屏幕

Flutter theme not applied to new screen

themes

navigator

dart

flutter