我如何在颤振中添加多个主题？

Question

我是颤振空间的新手'距离我编写的第一个代码只有 3 周'并且想在这个问题上提供帮助，我开发了一个具有多个主题的应用程序'只是颜色'，我想在这样的设置页面中获取它：这是这页纸：

所以当按下颜色容器时，应该将整个应用程序的颜色更改为选定的图案......

有没有办法获得这个功能？

页面的整个代码：

    import 'package:flutter/material.dart';
import 'package:fonapp_be/modals/colors.dart';
import 'package:fonapp_be/provider/theme_provider.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:animated_theme_switcher/animated_theme_switcher.dart';

class ColorsPage extends StatefulWidget {
  ColorsPage({ Key? key }) : super(key: key);

  @override
  State<ColorsPage> createState() => _ColorsPageState();
}

class _ColorsPageState extends State<ColorsPage> {
  bool whiteMode = true;
  bool darkMode = false;
  bool whitePurple = false;
  bool whiteRed = false;
  bool darkBlue = false;
  bool darkYellow = false;
  bool darkPink = false;
  bool whiteBlue = false;

  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: backgroundColor,
      appBar: AppBar(
        automaticallyImplyLeading: false,
          actions: [
              GestureDetector(
                onTap: () => Navigator.of(context).pop(),
                child: const Icon(Icons.arrow_forward_ios_outlined,
                  size: 30,
                  color: knights),
                  ),
                  const SizedBox(width: 20),
            ],
          elevation: 0.0,
          toolbarHeight: 70,
          backgroundColor: Colors.transparent,
          centerTitle: true,
          title: Column(
            children: const [
              SizedBox(height: 10),
              Text('الإعدادات',
              textAlign: TextAlign.center,
              style: TextStyle(
                fontFamily: 'Almarai',
                fontSize: 20,
                fontWeight: FontWeight.bold,
                color: knights,
                ),
              ),
              SizedBox(height: 10),
              Text('ألوان العرض',
              textAlign: TextAlign.center,
              style: TextStyle(
                fontFamily: 'Almarai',
                fontSize: 15,
                fontWeight: FontWeight.w300,
                color: knights,
                ),
              ),
            ],
          ),
      ),
      body: Container(
        margin: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
        padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
        child: Column(
          children: [
            const SizedBox(height: 30),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: 
                const [Text(
                  'أختر التنسيق الإفتراضي',
                textAlign: TextAlign.center,
                style: TextStyle(
                  fontFamily: 'Almarai',
                  fontWeight: FontWeight.w400,
                  fontSize: 15,
                  color: knights
                  ),
                ),
              ],
            ),
            const SizedBox(height: 30),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                GestureDetector(
                  onTap: () {
                    setState(() {
                      darkMode = !darkMode;
                    });
                  },
                  child: Column(
                    children: [
                      Container(
                        padding: const EdgeInsets.all(10),
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(50),
                          color: knights,
                        ),
                            child: Row(
                              children: [
                                Container(
                                  height: 40,
                                  width: 60,
                                  decoration: BoxDecoration(
                                    color: const Color.fromARGB(255, 29, 29, 29),
                                    borderRadius: BorderRadius.circular(20),
                                  ),
                                ),
                                const SizedBox(width: 10),
                                Container(
                                  height: 40,
                                  width: 60,
                                  decoration: BoxDecoration(
                                    color: const Color.fromARGB(255, 90, 90, 90),
                                    borderRadius: BorderRadius.circular(20),
                                  ),
                                ),
                              ],
                            ),
                      ),
                      const SizedBox(height: 10,),
                      const Text('الوضع الداكن',
                      textAlign: TextAlign.center,
                      style: TextStyle(
                        fontFamily: 'Almarai',
                        fontSize: 14,
                        fontWeight: FontWeight.w200,
                        color: knights
                        ),
                      ),
                    ],
                  ),
                ),
                GestureDetector(
                  onTap: () {
                    setState(() {
                      whiteMode = !whiteMode;
                    });
                  },
                  child: Column(
                    children: [
                      Container(
                        padding: const EdgeInsets.all(10),
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(50),
                          color: darkContainer,
                        ),
                            child: Row(
                              children: [
                                Container(
                                  height: 40,
                                  width: 60,
                                  decoration: BoxDecoration(
                                    color: Colors.black,
                                    borderRadius: BorderRadius.circular(20),
                                  ),
                                ),
                                const SizedBox(width: 10),
                                Container(
                                  height: 40,
                                  width: 60,
                                  decoration: BoxDecoration(
                                    color: const Color.fromARGB(255, 238, 238, 238),
                                    borderRadius: BorderRadius.circular(20),
                                  ),
                                ),
                              ],
                            ),                  
                      ),
                      const SizedBox(height: 10,),
                      const Text('الوضع العادي',
                      textAlign: TextAlign.center,
                      style: TextStyle(
                        fontFamily: 'Almarai',
                        fontSize: 14,
                        fontWeight: FontWeight.w200,
                        color: knights
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
            const SizedBox(height: 40),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                GestureDetector(
                  onTap: (){
                    setState(() {
                      whiteRed = !whiteRed; 
                    });
                  },
                  child: Column(
                    children: [
                      Container(
                        padding: const EdgeInsets.all(10),
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(50),
                          color: knights,
                        ),
                            child: Row(
                              children: [
                                Container(
                                  height: 40,
                                  width: 60,
                                  decoration: BoxDecoration(
                                    color: const Color(0xffff003c),
                                    borderRadius: BorderRadius.circular(20),
                                  ),
                                ),
                                const SizedBox(width: 10),
                                Container(
                                  height: 40,
                                  width: 60,
                                  decoration: BoxDecoration(
                                    color: const Color.fromARGB(255, 255, 255, 255),
                                    borderRadius: BorderRadius.circular(20),
                                  ),
                                ),
                              ],
                            ),                  
                      ),
                      const SizedBox(height: 10,),
                      const Text('أحمر I أبيض',
                      textAlign: TextAlign.center,
                      style: const TextStyle(
                        fontFamily: 'Almarai',
                        fontSize: 14,
                        fontWeight: FontWeight.w200,
                        color: knights
                        ),
                      ),
                    ],
                  ),
                ),
                GestureDetector(
                  onTap: (){
                    setState(() {
                      whitePurple = !whitePurple;
                    });
                  },
                  child: Column(
                    children: [
                      Container(
                        padding: const EdgeInsets.all(10),
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(50),
                          color: knights,
                        ),
                            child: Row(
                              children: [
                                Container(
                                  height: 40,
                                  width: 60,
                                  decoration: BoxDecoration(
                                    color: const Color(0xff4801ff),
                                    borderRadius: BorderRadius.circular(20),
                                  ),
                                ),
                                const SizedBox(width: 10),
                                Container(
                                  height: 40,
                                  width: 60,
                                  decoration: BoxDecoration(
                                    color: const Color.fromARGB(255, 255, 255, 255),
                                    borderRadius: BorderRadius.circular(20),
                                  ),
                                ),
                              ],
                            ),                  
                      ),
                      const SizedBox(height: 10,),
                      const Text('بنفسجي I أبيض',
                      textAlign: TextAlign.center,
                      style: TextStyle(
                        fontFamily: 'Almarai',
                        fontSize: 14,
                        fontWeight: FontWeight.w200,
                        color: knights
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
            const SizedBox(height: 40),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                GestureDetector(
                  onTap: (){
                    setState(() {
                      darkYellow = !darkYellow;
                    });
                  },
                  child: Column(
                    children: [
                      Container(
                        padding: const EdgeInsets.all(10),
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(50),
                          color: knights,
                        ),
                            child: Row(
                              children: [
                                Container(
                                  height: 40,
                                  width: 60,
                                  decoration: BoxDecoration(
                                    color: const Color(0xffffea01),
                                    borderRadius: BorderRadius.circular(20),
                                  ),
                                ),
                                const SizedBox(width: 10),
                                Container(
                                  height: 40,
                                  width: 60,
                                  decoration: BoxDecoration(
                                    color: const Color.fromARGB(255, 54, 54, 54),
                                    borderRadius: BorderRadius.circular(20),
                                  ),
                                ),
                              ],
                            ),                  
                      ),
                      const SizedBox(height: 10,),
                      const Text('أصفر I أسود',
                      textAlign: TextAlign.center,
                      style: const TextStyle(
                        fontFamily: 'Almarai',
                        fontSize: 14,
                        color: knights,
                        fontWeight: FontWeight.w200,
                        ),
                      ),
                    ],
                  ),
                ),
                GestureDetector(
                  onTap: (){
                    setState(() {
                      darkBlue = !darkBlue;
                    });
                  },
                  child: Column(
                    children: [
                      Container(
                        padding: const EdgeInsets.all(10),
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(50),
                          color: knights,
                        ),
                            child: Row(
                              children: [
                                Container(
                                  height: 40,
                                  width: 60,
                                  decoration: BoxDecoration(
                                    color: const Color(0xff00ffdf),
                                    borderRadius: BorderRadius.circular(20),
                                  ),
                                ),
                                const SizedBox(width: 10),
                                Container(
                                  height: 40,
                                  width: 60,
                                  decoration: BoxDecoration(
                                    color: const Color.fromARGB(255, 51, 51, 51),
                                    borderRadius: BorderRadius.circular(20),
                                  ),
                                ),
                              ],
                            ),                  
                      ),
                      const SizedBox(height: 10,),
                      const Text('أزرق سماوي I أبيض',
                      textAlign: TextAlign.center,
                      style: const TextStyle(
                        fontFamily: 'Almarai',
                        fontSize: 14,
                        fontWeight: FontWeight.w200,
                        color: knights
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
            const SizedBox(height: 40),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                GestureDetector(
                  onTap: (){
                    setState(() {
                      whiteBlue = !whiteBlue;
                    });
                  },
                  child: Column(
                    children: [
                      Container(
                        padding: const EdgeInsets.all(10),
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(50),
                          color: knights,
                        ),
                            child: Row(
                              children: [
                                Container(
                                  height: 40,
                                  width: 60,
                                  decoration: BoxDecoration(
                                    color: const Color.fromARGB(255, 1, 18, 255),
                                    borderRadius: BorderRadius.circular(20),
                                  ),
                                ),
                                const SizedBox(width: 10),
                                Container(
                                  height: 40,
                                  width: 60,
                                  decoration: BoxDecoration(
                                    color: const Color.fromARGB(255, 255, 255, 255),
                                    borderRadius: BorderRadius.circular(20),
                                  ),
                                ),
                              ],
                            ),                  
                      ),
                      const SizedBox(height: 10,),
                      const Text('أزرق غامق I أسود',
                      textAlign: TextAlign.center,
                      style: const TextStyle(
                        fontFamily: 'Almarai',
                        fontSize: 14,
                        fontWeight: FontWeight.w200,
                        color: knights
                        ),
                      ),
                    ],
                  ),
                ),
                GestureDetector(
                  onTap: (){
                    setState(() {
                      darkPink = !darkPink;
                    });
                  },
                  child: Column(
                    children: [
                      Container(
                        padding: const EdgeInsets.all(10),
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(50),
                          color: knights,
                        ),
                            child: Row(
                              children: [
                                Container(
                                  height: 40,
                                  width: 60,
                                  decoration: BoxDecoration(
                                    color: const Color.fromARGB(255, 43, 43, 43),
                                    borderRadius: BorderRadius.circular(20),
                                  ),
                                ),
                                const SizedBox(width: 10),
                                Container(
                                  height: 40,
                                  width: 60,
                                  decoration: BoxDecoration(
                                    color: const Color.fromARGB(255, 255, 0, 234),
                                    borderRadius: BorderRadius.circular(20),
                                  ),
                                ),
                              ],
                            ),
                      ),
                      const SizedBox(height: 10,),
                      const Text('وردي I أسود',
                      textAlign: TextAlign.center,
                      style: const TextStyle(
                        fontFamily: 'Almarai',
                        fontSize: 14,
                        fontWeight: FontWeight.w200,
                        color: knights
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ],
        )
      )
    );
  }
}
class WhiteMode extends ColorsPage{
  late Function callback;
  static Color knights = const Color.fromARGB(255, 0, 0, 0);
  static Color subTitle = const Color.fromARGB(255, 90, 90, 90);
  static Color backgroundColor = const Color.fromARGB(255, 240, 240, 240);
  static Color darkContainer = const Color.fromARGB(255, 255, 255, 255); 
}
class DarkMode extends ColorsPage{
  static Color knights = const Color.fromARGB(255, 255, 255, 255);
  static Color subTitle = const Color.fromARGB(255, 236, 236, 236);
  static Color backgroundColor = const Color.fromARGB(255, 12, 12, 12);
  static Color darkContainer = const Color.fromARGB(255, 29, 29, 29);
}
class WhitePurple extends ColorsPage{
  static Color knights = const Color.fromARGB(255, 119, 0, 255);
  static Color subTitle = const Color.fromARGB(255, 115, 40, 255);
  static Color backgroundColor = const Color.fromARGB(255, 240, 240, 240);
  static Color darkContainer = const Color.fromARGB(255, 255, 255, 255);
}
class WhiteRed extends ColorsPage{
  static Color knights = const Color.fromARGB(255, 255, 0, 64);
  static Color subTitle = const Color.fromARGB(255, 146, 1, 37);
  static Color backgroundColor = const Color.fromARGB(255, 240, 240, 240);
  static Color darkContainer = const Color.fromARGB(255, 255, 255, 255);
}
class DarkBlue extends ColorsPage{
  static Color knights = const Color.fromARGB(255, 0, 255, 136);
  static Color subTitle = const Color.fromARGB(255, 0, 158, 97);
  static Color backgroundColor = const Color.fromARGB(255, 12, 12, 12);
  static Color darkContainer = const Color.fromARGB(255, 29, 29, 29);
}
class DarkYellow extends ColorsPage{
  static Color knights = const Color.fromARGB(255, 255, 217, 0);
  static Color subTitle = const Color.fromARGB(255, 255, 220, 106);
  static Color backgroundColor = const Color.fromARGB(255, 12, 12, 12);
  static Color darkContainer = const Color.fromARGB(255, 29, 29, 29);
}
class DarkPink extends ColorsPage{
  static Color knights = const Color.fromARGB(255, 255, 0, 140);
  static Color subTitle = const Color.fromARGB(255, 255, 122, 233);
  static Color backgroundColor = const Color.fromARGB(255, 12, 12, 12);
  static Color darkContainer = const Color.fromARGB(255, 29, 29, 29);
}
class WhiteBlue extends ColorsPage{
  static Color knights = const Color.fromARGB(255, 38, 0, 255);
  static Color subTitle = const Color.fromARGB(255, 72, 52, 255);
  static Color backgroundColor = const Color.fromARGB(255, 240, 240, 240);
  static Color darkContainer = const Color.fromARGB(255, 255, 255, 255);
}

谢谢你听我说！

Answer 1

要更改颤振应用程序中的主题，您需要像这样组织您的themeData

import 'package:flutter/material.dart';

ThemeData blueTheme = ThemeData(
  appBarTheme: AppBarTheme(
      color: Color.fromARGB(255, 240, 240, 240),
      iconTheme: IconThemeData(color: Color.fromARGB(255, 38, 0, 255))),
  backgroundColor: Color.fromARGB(255, 240, 240, 240),
  primaryColor: Color.fromARGB(255, 255, 255, 255),
  textTheme: TextTheme(
    subtitle2: TextStyle(
      color: Color.fromARGB(255, 38, 0, 255),
    ),
  ),
);

ThemeData darkTheme = ThemeData(
  appBarTheme: AppBarTheme(
      color: Color.fromARGB(255, 12, 12, 12),
      iconTheme: IconThemeData(color: Colors.white)),
  backgroundColor: Color.fromARGB(255, 12, 12, 12),
  primaryColor: Color.fromARGB(255, 29, 29, 29),
  textTheme: TextTheme(
    subtitle2: TextStyle(
      color: Color.fromARGB(255, 236, 236, 236),
    ),
  ),
);

ThemeData lightTheme = ThemeData(
  appBarTheme: AppBarTheme(
      color: Color.fromARGB(255, 240, 240, 240),
      iconTheme: IconThemeData(color: Color.fromARGB(255, 0, 0, 0))),
  backgroundColor: Color.fromARGB(255, 240, 240, 240),
  primaryColor: Color.fromARGB(255, 255, 255, 255),
  textTheme: TextTheme(
    subtitle2: TextStyle(
      color: Color.fromARGB(255, 0, 0, 0),
    ),
  ),
);

然后，您需要一个应该位于提供程序中的函数，看起来像这样，并且应该位于提供程序中。

  bool _newTheme = false;
  bool get newTheme => _newTheme;
  ThemeData _appTheme = lightTheme;
  ThemeData get appTheme => _appTheme;

  void toggleDarkTheme() async {
    _newTheme = !_newTheme;
    var box = await Hive.openBox('theme');
    if (_newTheme) {
      _appTheme = darkTheme;
      box.put('newTheme', _newTheme);
      notifyListeners();
    } else {
      _appTheme = lightTheme;
      box.put('newTheme', _newTheme);
      notifyListeners();
    }
  }

void setAppTheme() async {
    try {
      var box = await Hive.openBox('theme');
      bool theNewTheme = box.get('newTheme') ?? false;
      _newTheme = theNewTheme;
      if (theNewTheme) {
        _appTheme = darkTheme;
        notifyListeners();
      } else {
        _appTheme = lightTheme;
        notifyListeners();
      }
    } catch (e) {
      print(e);
    }
  }

我不完全明白你为什么要在这么多颜色之间切换，但是为了让你的工作，你必须知道哪个主题是新主题，以便在setAppTheme方法中你可以放入新的正确主题。

你的main.dart也应该是这样的

void main() async {
  await Hive.initFlutter();
  await Hive.openBox('theme');
  runApp(
//This is where your provider COULD sit 
    MaterialApp(home: MultiProvider(providers: providers, child: Theme())),
  );
}

class Theme extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
    // This is where you provide the theme 
    // Also like I have said you need to figure out how you want to change between each theme 
      theme: Provider.of<ThemeViewModel>(context).appTheme,
      home: SplashScreen(),
    );
  }
}