基于GetX 搭建通用flutter 项目《三》(暗黑模式)-六虎

本文已参加「新人创作礼」活动，一起开启创作之路

根据GetX 建立通用flutter 项目《一》

根据GetX 建立通用flutter 项目《二》(界面规范抽象类)

根据GetX 建立通用flutter 项目《四》(国际化)

根据GetX 建立通用flutter 项目《五》(根据GetX 进行动态改写)

加快脚步，马不停歇，趁这几天事情不多，赶快把之前欠的东西补上。好了，废话不多说了，上“技师”

DEMO更新日志

2022-07-14 完结国际化
2022-06-22 完结暗黑形式功用开发
2022-06-16 完结项目基础架构

您能在这儿看到啥

运转作用

暗黑形式

跟随体系

主题装备

项目地址
相对根据GetX 建立通用flutter 项目《二》(界面规范抽象类)这篇文章来说，暗黑形式和根据GetX 建立通用flutter 项目《四》(国际化)相对来说简略了许多，最多的便是，需求你有耐性，把所需求的主题和言语装备好就行了

运转作用

暗黑形式

这儿我就不再介绍啥是暗黑形式了,咱们直接上代码,由于代码最直观.

主题切换

主题装备首要分为三步
第一步便是👆咱们装备主题装备项,不管是用第一种,仍是第二种,都是要把对应的主题色彩进行装备
第二步便是在进口页MaterialApp进行主题的设置.
第三步便是在切换主题事情中,进行主题切换,以及状况更新

1.装备主题

下面是我项目中装备的色彩主题。
我在这儿也定义了一个主题色彩的抽象类

abstract class AbsThemeColorConfig {
    /// 这儿装备正常色彩
    Map<String, Color?> lightInfo = {};
    /// 这儿装备暗黑色彩
    Map<String, Color?> darkInfo = {};
    /// 获取装备当时色彩
    Color confgColor(String colkey, {bool reversal = false}) {
        bool isbackmodel = loadThemeModel();
        if (reversal) {
            isbackmodel = !isbackmodel;
        }
        Map colorinfo = isbackmodel ? darkInfo : lightInfo;
        return colorinfo[colkey] ?? Colors.black;
    }
    /// 获取当时的主题形式 运用者能够重写这个办法，来改动当时的主题状况
    bool loadThemeModel() {
      return false;
    }
}

👇是我项目里运用的状况

/// 这是我定义的色彩key
class HzyColorSring {
  static String coltheme = "theme";
  static String colffffff = "ffffff";
  static String col000000 = "000000";
  static String whitebgblacktextcolor = "whiteback";
}
class HzyThemeColor extends AbsThemeColorConfig {
  /// 这是个单利
  HzyThemeColor._internal();
  factory HzyThemeColor() => _instance;
  static late final HzyThemeColor _instance = HzyThemeColor._internal();
  @override
  Map<String, Color?> get lightInfo => 
      HzyColorSring.coltheme: CommentColorS.col2865ff,
      HzyColorSring.colffffff: CommentColorS.colffffff,
      HzyColorSring.col000000: CommentColorS.col000000,
  };
  @override
  Map<String, Color?> get darkInfo => {
      HzyColorSring.coltheme: CommentColorS.col2865ff,
      HzyColorSring.colffffff: CommentColorS.col171717,
      HzyColorSring.col000000: CommentColorS.colffffff,
  };
  @override
  bool loadThemeModel() {
      /// 这儿里面是我获取 主题的办法来咱们看看一下里面实现的内容
      return ThemeTool.isdark();
  }
}

现在开端讲一下详细的主题改动的状况监听

static isdark() {
   /// 这是本地存的 主题的状况，由于需求持有化，所以会把对应的状况，存起来
   /// 深色形式 0: 关闭 1: 开启 2: 随体系
   int type = CommonSpUtil.getThemeType();
   if (type == 2) {
       /// 这儿是 跟随体系的逻辑，判断当时状况，来返回对应的主题
       return MediaQuery.of(Get.context!).platformBrightness == Brightness.dark;
   } else {
       return Get.isDarkMode;
   }
}

为了运用方便，我又把上面的做了一下封装，详细你们封不封装取决于习气，下面是我封装的类

class HzyColorConfig {
   Color colthemes = HzyThemeColor().confgColor(HzyColorSring.coltheme);
   Color col000000 = HzyThemeColor().confgColor(HzyColorSring.col000000);
}

到此,其实色彩的装备已经完结,详细您的项目,可能会有很多色彩值的装备,那便是重复的东西了,费点时刻就能够下了.
当然你也能够用体系自带的Theme* 来做处理,👇我也简略的举个🌰.

//创立Dark ThemeData对象
final ThemeData appDarkThemeData = ThemeData(
    brightness: Brightness.dark,
    primaryColor: CommentColorS.col010101,
    splashColor: Colors.white.withOpacity(0),
    splashFactory: const NormalNoSplashFactory(),
    highlightColor: Colors.white.withOpacity(0),
    scaffoldBackgroundColor:CommentColorS.col010101,
    textTheme: const TextTheme(
        headline5: TextStyle(
            color: CommentColorS.colffffff,
            fontWeight: FontWeight.bold,
            fontSize: 24),
    bodyText1: TextStyle(
        color: CommentColorS.colffffff,
        fontSize: 16.0,
    ),
    bodyText2: TextStyle(
        color: CommentColorS.colffffff,
        fontSize: 14,
        ),
    ),
    appBarTheme: const AppBarTheme(
        iconTheme: IconThemeData(color: Colors.white),
        backgroundColor: CommentColorS.col010101,
    ),
);
//创立light ThemeData对象
final ThemeData appLightThemeData = ThemeData(
    brightness: Brightness.light,
    primaryColor: CommentColorS.colffffff,
    splashColor: Colors.white.withOpacity(0),
    highlightColor: Colors.white.withOpacity(0),
    splashFactory: const NormalNoSplashFactory(),
    scaffoldBackgroundColor:
    CommentColorS.colffffff, 
    textTheme: const TextTheme(
    /// 字体24
    headline5: TextStyle(
        color: CommentColorS.col333333,
        fontWeight: FontWeight.bold,
    ),
    bodyText1: TextStyle(
        color: CommentColorS.col333333,
        fontSize: 16.0,
    ),
    bodyText2:
    TextStyle(color: CommentColorS.col333333, fontSize: 14)), // 字体主题
    appBarTheme: const AppBarTheme(
    iconTheme: IconThemeData(color: Colors.black),
        backgroundColor: Colors.white,
    ),
);

2.MaterialApp

👇是我代码中MaterialApp装备清单

class Application extends StatelessWidget {
   Application({Key? key}) : super(key: key);
   final easyLoading = EasyLoading.init();
   @override
   Widget build(BuildContext context) {
       String rootroutes = UtilsTool.configrootpageid();
       return ScreenUtilInit(
           designSize: const Size(375, 667),
           minTextAdapt: true,
           splitScreenMode: true,
           builder: (_) {
           return GestureDetector(
               /// 大局点击 事情
               onTap: () => CommentTools.keydissmiss(context),
                   /// 经过GetX 创立根视图
                   child: GetMaterialApp(
                       // /// 进口路由
                       initialRoute: rootroutes,
                       /// 一切路由集合
                       getPages: RouterS.getAllRoutS(),
                       /// 是否显示 导航栏右上角 debug 标识
                       debugShowCheckedModeBanner: false,
                       builder: (context, child) => MediaQuery(
                           //设置文字大小不随体系设置改动
                           data: MediaQuery.of(context).copyWith(textScaleFactor: 1.0),
                           child: easyLoading(context, child),
                       ),
                       /// 这儿如果你运用ThemeData 能够在这儿运用你定义的themeData  
                       theme: ThemeData(brightness: Brightness.light),
                       darkTheme: ThemeData(brightness: Brightness.dark),
                       /// 装备 本地存储 主题类型
                       themeMode: ThemeTool.getlocalprofileaboutThemeModel(),
                       /// 国际化装备 署理
                       localizationsDelegates: const [
                           GlobalMaterialLocalizations.delegate,
                           GlobalWidgetsLocalizations.delegate,
                           GlobalCupertinoLocalizations.delegate, // ios
                       ],
                       initialBinding: AllControllerBinding(),
                       /// 本地支持言语
                       supportedLocales: const [
                           Locale('zh', 'CN'),
                           Locale('en', 'US'),
                       ],
                   );    
               );
           },
       );
   }
}

这儿面相对要害便是下面这个办法,是为了装备APP发动的时候,装备当时的主题形式.

   /// 装备 本地存储 主题类型
   themeMode: ThemeTool.getlocalprofileaboutThemeModel(),

咱们来看一下这个getlocalprofileaboutThemeModel()办法里是怎样实现呢

/// 获取本地 主题装备
static getlocalprofileaboutThemeModel() {
    int theme = CommonSpUtil.getThemeType();
    ThemeMode themeMode = ThemeMode.light;
    if (theme == 0) {
        /// 正常形式
        themeMode = ThemeMode.light;
    } else if (theme == 1) {
        /// 暗黑形式
        themeMode = ThemeMode.dark;
    } else if (theme == 2) {
        /// 跟随体系形式
        themeMode = ThemeMode.system;
    }
    return themeMode;
}

3.切换主题

前面两步装备好了,下面便是咱们来运用切换主题的事情了,详细页面款式,是你们自己的,我这边是仿照微信写的,来,咱们看看详细的切换事情是怎样实现的

/// 切换主题
static changeTheme({int? type = 1}) {
    /// 获取当时的主题模型
    ThemeMode mode = getlocalprofileaboutThemeModel();
    /// 装备当时的主题数据
    ThemeData themeData = getlocalprofileaboutThemeData();
    /// 由于我这儿运用第三方加载动画,也把这个进行了状况的修正
    EasyLoadingStyle easyLoadingStyle = EasyLoadingStyle.dark;
    if (mode == ThemeMode.dark) {
        easyLoadingStyle = EasyLoadingStyle.light;
    } else if (mode == ThemeMode.system) {
        if (!Get.isDarkMode) {
            easyLoadingStyle = EasyLoadingStyle.light;
        }
    }
    EasyLoading.instance.loadingStyle = easyLoadingStyle;
    /// 然后运用GetX 供给的切换方法,进行动态更新就能够
    Get.changeThemeMode(mode);
    Get.changeTheme(themeData);
    /// 这个比较重要,如果不运用这个,可能会导致主题没有及时更新
    updateTheme();
}
/// 更新主题
static updateTheme() {
    Future.delayed(const Duration(milliseconds: 250), () {
        Get.forceAppUpdate();
    });
}
/// 根据本地存储的状况,进行主题数据赋值
static getlocalprofileaboutThemeData() {
    int theme = CommonSpUtil.getThemeType();
    ThemeData themeData = ThemeData.light();
    if (theme == 0) {
        themeData = ThemeData(brightness: Brightness.light);
    } else if (theme == 1) {
        themeData = ThemeData(brightness: Brightness.dark);
    } else if (theme == 2) {
        if (!Get.isDarkMode) {
            themeData = ThemeData(brightness: Brightness.dark);
        } else {
             themeData = ThemeData(brightness: Brightness.light);
        }
    }
    return themeData;
}

到此主题切换就完结,如同本地存储没有讲,可是这个相对来说简略点,你能够自行看项目

好了共享结束,立刻开端写第四篇文章
根据GetX 建立通用flutter 项目《四》(国际化)

喜爱的能够点点赞,你们的鼓舞,便是我行进的动力.谢谢

hzy_normal_widget 是我在运用GetX建立项目时,总结的一些通用开发控件,方便咱们在开发的时候,削减重复性界面代码的创立.

ttcomment 通用项目的界面接口基类,和一些通用东西类,喜爱的能够点点star.

当然接下的时刻里我也会总结OC 和 swift 相应的通用项目文章，喜爱的能够点点重视

基于GetX 搭建通用flutter 项目《三》(暗黑模式)

您能在这儿看到啥

运转作用

暗黑形式

主题切换

1.装备主题

2.MaterialApp

3.切换主题

相关文章

Flutter学习-27-Flutter的生命周期

06 – 线索化二叉树和哈夫曼树

性能优化（一）卡顿优化

12-探究iOS底层原理|Runtime【isa详解、class的结构、方法缓存cache_t】

作者信息