Flutter开发日常练习-黑白主题

news/2024/9/22 17:52:52/

 

 

 

1.添加了白天黑夜模式 

2.country_picker: ^2.0.20

   城市信息框架

3.image_picker: ^0.8.5+3 

   photo_manager: ^2.3.0

  相机和相册的调用

4.shared_preferences: ^2.0.8

   sqflite: ^1.3.1

   path:

   数据异步持久化到磁盘 

注:登录的时候记录一下登录状态isLogin,通过isLogin来标记是否有登陆,

isLogin设置为BOOL类型

先设置一个utils文件的coloors,可以设置你自己喜欢的注意颜色

class Coloors {
Coloors._();static const Color greenDark = Color.fromARGB(255, 132, 197, 136);
static const Color greenLight = Colors.green;static const Color blueDark = Color.fromARGB(255, 104, 181, 244);
static const Color blueLight = Colors.blue;static const Color greyDark = Color.fromARGB(255, 180, 178, 178);
static const Color greyLight = Colors.grey;static const Color backgroundDark = Colors.black;
static const Color backgroundLight = Colors.white;static const Color greyBackground = Colors.grey;static const Color authAppbarTextColor = Colors.black;}

设置 ExtendedTheme主题

extension ExtendedTheme on BuildContext {CustomThemeExtension get theme {return Theme.of(this).extension<CustomThemeExtension>()!;}
}class CustomThemeExtension extends ThemeExtension<CustomThemeExtension> {static CustomThemeExtension lightMode = CustomThemeExtension(circleImageColor: Colors.blue,greyColor: Colors.grey,blueColor: Colors.blue,langBtnBgColor: Colors.white,langBtnHighlightColor: Colors.white,authAppbarTextColor:Colors.black,photoIconColor:Colors.grey,photoIconBgColor:Colors.white,);static CustomThemeExtension darkMode = CustomThemeExtension(blueColor: Colors.blue,circleImageColor: Colors.white,greyColor: Colors.grey,langBtnBgColor: Colors.white,langBtnHighlightColor: Colors.white,authAppbarTextColor:Colors.white,photoIconBgColor:Colors.white,photoIconColor:Colors.grey,);final Color? circleImageColor;final Color? greyColor; final Color? blueColor;final Color? langBtnBgColor;final Color? langBtnHighlightColor;final Color? authAppbarTextColor;final Color? photoIconBgColor;final Color? photoIconColor;CustomThemeExtension({this.circleImageColor,this.greyColor,this.blueColor,this.langBtnBgColor,this.langBtnHighlightColor,this.authAppbarTextColor,this.photoIconBgColor, this.photoIconColor, });@overrideThemeExtension<CustomThemeExtension> copyWith(
{  Color? circleImageColor,Color? greyColor,Color? blueColor,Color? langBtnBgColor,Color? langBtnHighlightColor,Color? authAppbarTextColor,Color? photoIconBgColor,Color? photoIconColor,}) {// TODO: implement copyWithreturn CustomThemeExtension(circleImageColor: circleImageColor ?? this.circleImageColor,greyColor: greyColor ?? this.greyColor,blueColor: blueColor ?? this.blueColor,langBtnBgColor: langBtnBgColor ?? this.langBtnBgColor,langBtnHighlightColor: langBtnHighlightColor ?? this.langBtnHighlightColor,authAppbarTextColor: authAppbarTextColor ?? this.authAppbarTextColor,photoIconBgColor: photoIconBgColor ?? this.photoIconBgColor,photoIconColor: photoIconColor ?? this.photoIconColor,);}@overrideThemeExtension<CustomThemeExtension> lerp(covariant ThemeExtension<CustomThemeExtension>? other, double t) {// TODO: implement lerpif (other is! CustomThemeExtension) return this;return CustomThemeExtension(circleImageColor: Color.lerp(circleImageColor, other.circleImageColor, t),greyColor: Color.lerp(greyColor, other.greyColor, t),blueColor: Color.lerp(blueColor, other.blueColor, t),langBtnBgColor: Color.lerp(langBtnBgColor, other.langBtnBgColor, t),langBtnHighlightColor: Color.lerp(langBtnHighlightColor, other.langBtnHighlightColor, t),authAppbarTextColor: Color.lerp(authAppbarTextColor, other.authAppbarTextColor, t),photoIconBgColor: Color.lerp(photoIconBgColor, other.photoIconBgColor, t),photoIconColor: Color.lerp(photoIconColor, other.photoIconColor, t),);}
}

 夜间的theme

ThemeData darkTheme() {final ThemeData base = ThemeData.dark();return base.copyWith(backgroundColor: Coloors.backgroundDark,scaffoldBackgroundColor: Coloors.backgroundDark,extensions: [CustomThemeExtension.darkMode,],appBarTheme: const AppBarTheme(backgroundColor: Coloors.greyBackground,titleTextStyle: TextStyle(fontSize: 18),systemOverlayStyle: SystemUiOverlayStyle(statusBarColor: Colors.transparent,statusBarBrightness: Brightness.dark,)),iconTheme: IconThemeData(color: Coloors.greyDark,),tabBarTheme: const TabBarTheme(indicator: UnderlineTabIndicator(borderSide: BorderSide(color: Coloors.greenDark,width: 2,),),unselectedLabelColor: Coloors.greyDark,labelColor: Coloors.greenDark,),elevatedButtonTheme: ElevatedButtonThemeData(style: ElevatedButton.styleFrom(backgroundColor: Coloors.greenDark,foregroundColor: Coloors.backgroundDark,splashFactory: NoSplash.splashFactory,elevation: 0,shadowColor: Colors.transparent,),),bottomSheetTheme: const BottomSheetThemeData(backgroundColor: Coloors.greyBackground,modalBackgroundColor: Coloors.greyBackground,shape: RoundedRectangleBorder(borderRadius: BorderRadius.vertical(top: Radius.circular(20),),),),dialogBackgroundColor: Coloors.greyBackground,dialogTheme: DialogTheme(shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10),),),floatingActionButtonTheme: FloatingActionButtonThemeData(backgroundColor: Coloors.greenDark,foregroundColor: Colors.white,),);
}

日间的theme

ThemeData lightTheme() {final ThemeData base = ThemeData.light();return base.copyWith(backgroundColor: Coloors.backgroundLight,scaffoldBackgroundColor: Coloors.backgroundLight,extensions: [CustomThemeExtension.lightMode,],appBarTheme: const AppBarTheme(backgroundColor: Coloors.greenLight,titleTextStyle: TextStyle(fontSize: 18,fontWeight: FontWeight.w600,),systemOverlayStyle: SystemUiOverlayStyle(statusBarColor: Colors.transparent,statusBarIconBrightness: Brightness.light),iconTheme: IconThemeData(color: Colors.white),),tabBarTheme: const TabBarTheme(indicator: UnderlineTabIndicator(borderSide: BorderSide(color: Colors.white,width: 2,),),unselectedLabelColor: Color(0xFFB3D9D2),labelColor: Colors.white,),elevatedButtonTheme: ElevatedButtonThemeData(style: ElevatedButton.styleFrom(backgroundColor: Coloors.greenLight,foregroundColor: Coloors.backgroundLight,splashFactory: NoSplash.splashFactory,elevation: 0,shadowColor: Colors.transparent,),),bottomSheetTheme: const BottomSheetThemeData(backgroundColor: Coloors.backgroundLight,modalBackgroundColor: Coloors.backgroundLight,shape: RoundedRectangleBorder(borderRadius: BorderRadius.vertical(top: Radius.circular(20),))),dialogBackgroundColor: Coloors.backgroundLight,dialogTheme: DialogTheme(shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10),),),floatingActionButtonTheme: FloatingActionButtonThemeData(backgroundColor: Coloors.greenDark,foregroundColor: Colors.white,),);
}

 设置了一个textfield 

class CustomTextField extends StatelessWidget {const CustomTextField({super.key, required this.controller, this.hintText, this.readOnly, this.textAlign, required this.keyBoardType, this.prefixText, this.onTap, this.suffixIcon, this.onChanged, this.fontSize, this.autoFocus});final TextEditingController? controller;
final String? hintText;
final bool? readOnly;
final TextAlign? textAlign;
final TextInputType? keyBoardType;
final String? prefixText;
final VoidCallback? onTap;
final Widget? suffixIcon;
final Function(String)? onChanged;
final double? fontSize;
final bool? autoFocus;@overrideWidget build(BuildContext context) {return TextFormField(onTap: onTap,controller: controller,readOnly: readOnly ?? false,textAlign: textAlign ?? TextAlign.center,keyboardType: readOnly == null ? keyBoardType : null,onChanged: onChanged,style: TextStyle(fontSize: fontSize),autofocus: autoFocus ?? false,decoration: InputDecoration(isDense: true,prefixText: prefixText,suffix: suffixIcon,hintText: hintText ,hintStyle: const TextStyle(color: Colors.grey),enabledBorder: const UnderlineInputBorder(borderSide: BorderSide(color: Coloors.greenLight),),focusedBorder: const UnderlineInputBorder(borderSide: BorderSide(color: Coloors.greenLight,width: 2),),),);}
}

GitHub - HelloJiada/flutter_test_1Contribute to HelloJiada/flutter_test_1 development by creating an account on GitHub.https://github.com/HelloJiada/flutter_test_1.git 


http://www.ppmy.cn/news/42998.html

相关文章

【CSS】定位 ① ( CSS 三大盒子布局方式 | CSS 定位简介 | 边偏移 | 定位模式 )

文章目录一、CSS 三大盒子布局方式二、CSS 定位简介1、边偏移2、定位模式一、CSS 三大盒子布局方式 CSS 三大盒子布局方式 : 普通流 : 又称为 标准流 , 盒子按照从上到下的顺序进行排列 ;浮动 : 另多个盒子水平排成一列 ;定位 : 将盒子定位在某个位置 ; 盒子自由漂浮在其它盒…

【vue3】关于watch与computed的用法看这个就ok

&#x1f609;博主&#xff1a;初映CY的前说(前端领域) ,&#x1f4d2;本文核心&#xff1a;watch()与computed的使用【vue2中watch|computed概念详解】&#xff0c;本文将介绍在vue3中怎么使用这两者技能 【前言】vue2当中有这两个技能&#xff0c;那么vue3中的watch与compute…

嵌入式学习笔记汇总

本文整理STM32、STM8和uCOS-III的所有文章链接。 STM32学习笔记目录 源码&#xff1a;mySTM32-learn STM32学习笔记&#xff08;1&#xff09;——LED和蜂鸣器 STM32学习笔记&#xff08;2&#xff09;——按键输入实验 STM32学习笔记&#xff08;3&#xff09;——时钟系统 …

SpringMVC基础解析

1.SpringMVC概念 是Spring的一个产品&#xff0c;是Spring的一个子项目&#xff0c;是为表述层开发提供了一套完备的解决方案 2.SpringMVC的优点 1.spring家族的原生产品&#xff0c;与IOC容器等基础设施无缝对接 2.基于原生的Servlet&#xff0c;通过了功能强大的前端控制…

Moviepy模块之视频去除声音、添加音乐

文章目录前言一、视频去除声音1.1 引入库1.2 加载视频文件1.3 去除视频声音1.4 保存无声视频二、视频添加音乐2.1 引入库2.2 加载视频文件2.3 加载音频文件2.4 裁剪多余音频2.5 将音频文件添加到视频中2.6 保存新的视频文件总结前言 大家好&#xff0c;我是空空star&#xff0c…

代码随想录算法训练营第41天| 343. 整数拆分,96.不同的二叉搜索树

代码随想录算法训练营第41天| 343. 整数拆分&#xff0c;96.不同的二叉搜索树343. 整数拆分96.不同的二叉搜索树343. 整数拆分 题目链接&#xff1a;343. 整数拆分&#xff0c;难度&#xff1a;中等 【实现代码】 class Solution { public:int integerBreak(int n) {vector&l…

Win10搭建我的世界Minecraft服务器「内网穿透远程联机」

文章目录1. Java环境搭建2.安装我的世界Minecraft服务3. 启动我的世界服务4.局域网测试连接我的世界服务器5. 安装cpolar内网穿透6. 创建隧道映射内网端口7. 测试公网远程联机8. 配置固定TCP端口地址8.1 保留一个固定tcp地址8.2 配置固定tcp地址9. 使用固定公网地址远程联机转载…

iTOP-RK3568开发板Android kernel移植-单独编译内核

此方法常用于 kernel 的开发和调试&#xff0c;以下的方法既编译 kernel 部分时&#xff0c; 同 时打包成 boot.img&#xff0c; 这样加快了我们开发的速度&#xff1b; 进入内核目录下&#xff0c; 输入以下命令&#xff1a; cd kernel make ARCHarm64 CC../prebuilts/cla…