如何为 Flutter 应用创建自定义主题文件

Question

我正在寻找 Flutter 中的自定义颜色主题模式。类似于Swift 中写的以下内容。

struct Colors {
    struct Text {
        static var success: UIColor {
            return UIColor.green
        }
        static var error: UIColor {
            return UIColor.red
        }
    }

    struct Button {
        static var normal: UIColor {
            return UIColor.black
        }
        static var onPressed: UIColor {
            return UIColor.blue
        }
    }
}

这样我就可以使用类似的东西，

let successTextColor = Colors.Text.success
let normalButtonColor = Colors.Button.normal

>主要目标：

我正在寻找适合或最适合flutter项目的东西，以上仅供参考。

我尝试过覆盖ThemeData，但据我了解，我只能覆盖TextTheme，不能使用任何自定义值，例如errorText或successText等。

我想要一些可以为我提供按钮或其他小部件的颜色（字体、大小等）的东西。

还要记住，我需要支持明暗主题。

任何建议都将不胜感激。

Answer 1

这是我的浅色主题，我用不同颜色的文本等覆盖了基础，底部是按钮主题：

import 'package:flutter/material.dart';

ThemeData lightTheme() {
  TextTheme _basicTextTheme(TextTheme base) {
    return base.copyWith(
      headline1: base.headline1.copyWith(
        fontSize: 72.0,
        fontWeight: FontWeight.bold,
        fontFamily: 'Lato',
        color: Colors.white,
      ),
      headline6: base.headline6.copyWith(
        fontSize: 23.0,
        fontFamily: 'Lato',
      ),
      bodyText2: base.bodyText2.copyWith(
        fontSize: 16.0,
        fontFamily: 'Lato',
        color: Colors.deepPurple[300],
      ),
      headline4: base.headline4.copyWith(
        fontSize: 18.0,
        fontFamily: 'Lato',
        color: Colors.deepPurple[600],
      ),
      headline5: base.headline4.copyWith(
        fontSize: 18.0,
        fontFamily: 'Lato',
        color: Colors.deepPurple[50],
        //buttons
      ),
      caption: base.headline5.copyWith(
        fontSize: 12.0,
        fontFamily: 'Lato',
      ),
      bodyText1: base.bodyText1.copyWith(
        color: Colors.deepPurple[300],
        fontSize: 14,
      ),
    );
  }

  final ThemeData base = ThemeData.light();
  return base.copyWith(
      textTheme: _basicTextTheme(base.textTheme),
      primaryColor: Colors.deepPurple[300],
      accentColor: Colors.deepPurple[300],
      iconTheme: IconThemeData(
        color: Colors.deepPurple[300],
        size: 20.0,
      ),
      buttonTheme: ButtonThemeData(
        buttonColor: Colors.deepPurple[300],
        shape: RoundedRectangleBorder(),
        textTheme: ButtonTextTheme.primary,
      ),
      sliderTheme: SliderThemeData(
        activeTrackColor: Colors.deepPurple[300],
        overlayColor: Colors.deepPurple[300].withAlpha(32),
        thumbColor: Colors.deepPurple[300],
      ),

}

Answer 2

Flutter 是关于小部件的。所以从这方面开始思考，考虑上面的文字和按钮是小部件。您现在可以做的是在您的代码中将它们创建为可重用的小部件，以便可以在任何地方创建它们，并基本上形成您的自定义主题。

比如创建一个standardtext.dart文件，放在下面

import 'package:flutter/material.dart';

class StandardText extends StatelessWidget {
  final String title;
  final Color normalColor;
  StandardText({this.title, this.normalColor})

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text(
        title,
        style: TextStyle(
          color: normalColor,
        ),
      ),
    );
  }
}

然后在整个应用程序中，如下使用它

StandardText(title: 'Text', normalColor: Colors.blue)

详细说明：

class Main extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: StandardText(title: 'Text', normalColor: Colors.blue),
    );
  }
}