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

Question

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

我创建了一个单独的文件 (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 做了类似的事情。

Answer 2

您可以通过使用Theme 小部件扭曲它来构建具有不同主题的脚手架：

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

class _StartingPageState extends State<StartingPage> {
  @override
  Widget build(BuildContext context) {
    return Theme(
      data: ThemeData.dark(),
      child: Scaffold(
        appBar: AppBar(),
        body: Container(
          child: Center(
            child: Text('test'),
          ),
        ),
      ),
    );
  }
}

Answer 3

   final ThemeData customTheme = _buildcustomTheme();

    ThemeData _buildcustomTheme() {

    return customThemeFoundation;

     }

            ThemeData customThemeFoundation =ThemeData(

       brightness: Brightness.dark,
         primaryColor: Color.fromRGBO(40, 204, 86, 1),
       accentColor: Colors.cyan[600],


             fontFamily: 'Georgia',


     textTheme: TextTheme(
             headline1: TextStyle(fontSize: 72.0, fontWeight: FontWeight.bold),
         headline6: TextStyle(fontSize: 36.0, fontStyle: FontStyle.italic),
           bodyText2: TextStyle(fontSize: 14.0, fontFamily: 'Hind'),
               ),
        



   and in main.dart just call it by
           import 'theme.dart';
           and just relpace theme:{.....}  with   theme: customTheme,