根据主题为容器使用不同的颜色

Question

我通过本教程在我的应用程序中实现了深色模式：

https://developer.school/flutter-dynamic-theming-with-provider/

一切正常，但我对单个容器有一点问题。

我为它指定了特定的颜色。

return Container(
  width: double.infinity,
  padding: EdgeInsets.symmetric(
    vertical: 32.0,
    horizontal: 24.0,
  ),
  margin: EdgeInsets.only(
    bottom: 20.0,
  ),
  decoration: BoxDecoration(
    color:  Color(0xFFD3D3D3),
    borderRadius: BorderRadius.circular(20.0),
  ),

现在我需要根据我当前的主题更改容器的颜色。

感谢您的帮助。

Answer 1

最佳做法是使用布尔值从暗模式切换到亮模式

那么你可以这样做。

import 'package:flutter/material.dart';

class ThemeChanger with ChangeNotifier {
  bool isDark == false;

  void changeTheme() {
    isDark = !isDark;
    notifyListeners();
  }
}

然后这样称呼它

class MaterialAppWithTheme extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final theme = Provider.of<ThemeChanger>(context);

    return MaterialApp(
      home: HomePage(),
      theme: theme.isDark == false ? ThemeData.light() : ThemeData.dark(),
    );
  }
}

更改容器样式

class MaterialAppWithTheme extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final theme = Provider.of<ThemeChanger>(context);

    return Container(
      width: double.infinity,
      padding: EdgeInsets.symmetric(
        vertical: 32.0,
        horizontal: 24.0,
      ),
      margin: EdgeInsets.only(
        bottom: 20.0,
      ),
      decoration: BoxDecoration(
        color: theme.isDark == false ? Color(0xFFD3D3D3) : Colors.black,
        borderRadius: BorderRadius.circular(20.0),
      ),
    );
  }
}

Answer 2

  decoration: BoxDecoration(
    color: Theme.of(context).brightness == Brightness.light ?  Color(0xFFD3D3D3) : Colors.red,
    borderRadius: BorderRadius.circular(20.0),
  ),

根据主题为容器使用不同的颜色

Use a different colour for containers depending on the theme

dart

flutter

flutter-dependencies

flutter-provider