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

>主要目标：

我正在寻找最适合扑扑项目的产品，以上内容仅供参考。

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

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

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

任何建议都是可以理解的。

Answer 1

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

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),
    );
  }
}

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

2 个答案: