Flutter 将 ThemeData 背景设置为 LinearGradient答案

【问题标题】：Flutter set ThemeData background to LinearGradientFlutter 将 ThemeData 背景设置为 LinearGradient
【发布时间】：2020-08-01 02:35:52
【问题描述】：

有没有办法将ThemeData 类的backgroundColor 设置为LinearGradient？我的应用程序将在不同的主题之间变化，我希望每个主题都有不同的渐变。我尝试将 LinearGradient 设置为 backgroundColor 但给了我一个The argument type 'LinearGradient' can't be assigned to the parameter type 'Color'. 错误。

这是我尝试过的

final _darkTheme = ThemeData(
    primarySwatch: Colors.grey,
    primaryColor: Colors.black,
    brightness: Brightness.dark,
//    backgroundColor: const Color(0xFF212121),
    backgroundColor: const LinearGradient(colors: [Colors.blue, Colors.green]),
    accentColor: Colors.white,
    floatingActionButtonTheme:
        FloatingActionButtonThemeData(foregroundColor: Colors.black),
    dividerColor: Colors.black12,
);

有什么建议吗？我不想手动设置每个容器或有一个额外的常量类以某种方式与每个主题相关联。

【问题讨论】：

我认为你最好的选择是满足于常量类。您有什么特别不想使用的理由吗？
我宁愿只使用已经存在的类的属性，也不愿做额外的工作。现在我需要弄清楚如何根据选定的主题来选择常量。此外，额外的代码可能会增加错误的可能性。
@BadrB 也许有办法扩展 ThemeData？如果我可以为 ThemeData 添加 2 种颜色的附加属性，那么我可以使用这些颜色，例如：渐变：LinearGradient(colors: [Theme.of(context).color1, Theme.of(context).color2])。每当主题发生变化时，这些值就会相应地发生变化。

标签： flutter colors themes

【解决方案1】：

我可以通过在自定义主题类的 colorScheme 中定义 primary 颜色和 secondary 颜色来实现这一点。

class AppTheme {
  AppTheme._();

  static final ThemeData lightTheme = ThemeData(
    brightness: Brightness.light,
    primarySwatch: Colors.green,
    accentColor: Colors.purple[300],
    scaffoldBackgroundColor: Colors.grey[100],
    colorScheme: ColorScheme.light(
      primary: Colors.green,
      secondary: Colors.green[100],
    ),
  );

  static final ThemeData darkTheme = ThemeData(
    brightness: Brightness.dark,
    primarySwatch: Colors.green,
    accentColor: Colors.purple[300],
    colorScheme: ColorScheme.dark(
      primary: Colors.green[800],
      secondary: Colors.green[600],
    ),
  );
}

在自定义按钮小部件中，我将设置primary作为渐变开始颜色，将secondary设置为渐变结束颜色，如下所示：

child: RaisedButton(
  elevation: 8.0,
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(80.0)),
  padding: EdgeInsets.all(0.0),
  child: Ink(
    decoration: BoxDecoration(
        gradient: LinearGradient(
          colors: [
            Theme.of(context).colorScheme.primary,
            Theme.of(context).colorScheme.secondary,
          ],
          begin: Alignment.centerLeft,
          end: Alignment.centerRight,
        ),
        borderRadius: BorderRadius.circular(30.0)),
    child: Container(
      constraints: BoxConstraints(minHeight: 50.0),
      alignment: Alignment.center,
      child: Text(
        title,
        textAlign: TextAlign.center,
        style: TextStyle(color: Colors.white),
      ),
    ),
  ),
  onPressed: () {},
),

最后，这是我得到的：

【讨论】：

【解决方案2】：

这可能不是最好和最有效的方法，而是一个非常简单的解决方案。我在我的主题类MyThemes 中创建了两个变量。根据所选主题，gradientColorA 和 gradientColorB 这两个变量将相应更改。我只是通过构造函数调用这些变量 - TriviaThemes.gradientColorA。

这是我的主题课：

class MyThemes {
    static Color gradientColorA = Color(0xFFFFFFFF);
    static Color gradientColorB = Color(0xFF000000);

    ThemeData getTheme(String themeName) {
      if (themeName == 'darkTheme') {
        gradientColorA = Color(0xFFFFFFFF);
        gradientColorB = Color(0xFF000000);
        return _darkTheme;
      } else if (themeName == 'lightTheme') {
        gradientColorA = Color(0xFF000000);
        gradientColorB = Color(0xFFFFFFFF);
        return _lightTheme;
      } else {
      return _lightTheme;
    }
  }

  final _darkTheme = ThemeData(
    primarySwatch: Colors.grey,
    primaryColor: Colors.black,
    brightness: Brightness.dark,
    accentColor: Colors.white,
    floatingActionButtonTheme:
        FloatingActionButtonThemeData(foregroundColor: Colors.black),
    dividerColor: Colors.black12,
  );

  final _lightTheme = ThemeData(
    accentColor: Colors.black,
    backgroundColor: const Color(0xFFE5E5E5),
    brightness: Brightness.light,
    buttonColor: Colors.blue,
    dividerColor: Colors.white54,
    disabledColor: Colors.grey,
    floatingActionButtonTheme:
        FloatingActionButtonThemeData(foregroundColor: Colors.white),
    fontFamily: 'Simplifica',
    primarySwatch: Colors.grey,
    primaryColor: Colors.white,
  );
}

这是渐变代码的样子：

gradient: LinearGradient(
  begin: Alignment.topCenter,
  end: Alignment.bottomCenter,
  colors: [
    TriviaThemes.gradientColorA,
    TriviaThemes.gradientColorB,
  ],
),

【讨论】：