flutter - 声明一个或多个自定义主题

Question

我正在尝试在 flutter 项目中创建自定义主题。

我创建了一个单独的文件 (mycolors.dart)，我在其中定义了一些颜色(const myPrimaryColor = const Color(0xFFFF3900); 等等)

然后，在 main.dart 中，我指的是这些颜色和自定义字体，但在 Widget 构建中......

如何隔离主题数据(颜色和字体/文本样式)，比方说“分开”，并在类中引用它？

我还可以定义 2 个不同的主题并在以后的项目中使用它们吗？

非常感谢。

import 'package:flutter/material.dart';
import 'package:my_repository/mycolors.dart';
import 'package:flutter_statusbarcolor/flutter_statusbarcolor.dart';

void main() {
  runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    FlutterStatusbarcolor.setStatusBarColor(myPrimaryColor);
    return MaterialApp(
      theme: ThemeData(
        fontFamily: 'Raleway',
        primaryColor: myPrimaryColor,
        accentColor: myAccentColor,
        scaffoldBackgroundColor: myBackgroundColor,
        cardColor: mySurfaceColor,
        textSelectionColor: myPrimaryColor,
        errorColor: myErrorColor,
      ),
      home: Scaffold( ....

Answer 1

您可以在一个类中定义您的主题，然后调用 ThemeName().theme。

这是我在我的应用程序中拥有主题文件的方式:

class MuskTheme {

  ...

  ThemeData get theme => ThemeData(
    brightness: Brightness.dark,
    primarySwatch: musk,
    accentColor: accentColor,
    fontFamily: fontFamily,
    backgroundColor: musk,
    canvasColor:canvasColor,
    textTheme: _textTheme,
    iconTheme: _iconTheme,
    cardColor: Color(0xff313A49),
    appBarTheme: AppBarTheme(color: canvasColor,elevation: 0),
    dialogBackgroundColor: canvasColor,
    snackBarTheme: SnackBarThemeData(
      backgroundColor: musk[800],
      actionTextColor: accentColor,
    ),
  );

...

}

要在运行时更改主题，您需要通过实现高于 MaterialApp 的有状态小部件来重建 MaterialApp 小部件，并且可以根据请求重建它。

示例实现:

class ThemeChanger extends StatefulWidget {
  final ThemeData initialTheme;
  final MaterialApp Function(BuildContext context, ThemeData theme)
      materialAppBuilder;

  const ThemeChanger({Key key, this.initialTheme, this.materialAppBuilder})
      : super(key: key);

  @override
  _ThemeChangerState createState() => _ThemeChangerState();

  static void setTheme(BuildContext context, ThemeData theme) {
    var state = context.ancestorStateOfType(TypeMatcher<_ThemeChangerState>())
        as _ThemeChangerState;
      state.setState(() {
        state.theme = theme;
      });
  }
}

class _ThemeChangerState extends State<ThemeChanger> {
  ThemeData theme;

  @override
  void initState() {
    super.initState();
    theme = widget.initialTheme;
  }

  @override
  Widget build(BuildContext context) {
    return widget.materialAppBuilder(context, theme);
  }
}

那么你需要用它来构建你的 MaterialApp:

class ThemeChangingApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ThemeChanger(
      initialTheme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      materialAppBuilder: (context, theme) {
        return MaterialApp(
          theme: theme,
          home: StartingPage(),
        );
      },
    );
  }
}

在您的应用中，您可以像这样更改主题:

class StartingPage extends StatefulWidget {
  @override
  _StartingPageState createState() => _StartingPageState();
}

class _StartingPageState extends State<StartingPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Container(
        child: Center(
          child: FlatButton(
            child: Text('change theme to orange'),
            onPressed: () {
              ThemeChanger.setTheme(
                  context,
                  ThemeData(
                    primarySwatch: Colors.orange,
                  ));
            },
          ),
        ),
      ),
    );
  }
}

这个 package做类似的事情。