Flutter 底部(手势条)和顶部导航栏沉浸适配多主题
适配原理#
顶部导航栏和状态栏沉浸实现比较简单,设置Scaffold的AppBar背景色即可,其中surfaceTintColor可以设置IOS滑动之后状态栏颜色,不想要显示顶部导航栏高度设置toolbarHeight:0
,阴影设置elevation: 0
。
@override
Widget build(BuildContext context) {
var bg = Theme.of(context).colorScheme.surface;
return Scaffold(
appBar: AppBar(
elevation: 0,
toolbarHeight: 0,
backgroundColor: bg,
surfaceTintColor: bg,
),
backgroundColor: bg,
)
}
底部导航栏即手势条,也叫小白条。IOS不需要特别适配,设置colorScheme
的surface
背景即可。
ThemeData lightMode = ThemeData(
useMaterial3: true,
colorScheme: const ColorScheme.light(
surface: Color.fromARGB(255, 242, 247, 251),
),
);
适配代码#
Android底部手势条需要特别适配,下面的代码同样适用于IOS
亮色主题#
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
ThemeData lightMode = ThemeData(
useMaterial3: true,
// 沉浸的关键代码
appBarTheme: const AppBarTheme(
systemOverlayStyle: SystemUiOverlayStyle(
statusBarColor: Colors.transparent, // 去除状态栏遮罩
statusBarIconBrightness: Brightness.dark, // 状态栏图标字体颜色
systemNavigationBarColor: Color.fromARGB(255, 242, 247, 251), // 底部导航栏颜色
)
),
colorScheme: const ColorScheme.light(
surface: Color.fromARGB(255, 242, 247, 251), // 和底部导航栏保持一致
surfaceBright: Color(0x00FFFFFF), // 透明背景
primary: Color.fromARGB(255, 89, 54, 133),
secondary: Color(0xFFE3EDF2),
tertiary: Colors.black,
onSecondary: Colors.black,
secondaryContainer: Color(0xFFE3EDF2), // 骨架屏底色
onSecondaryContainer: Color.fromARGB(255, 242, 247, 251), // 骨架屏亮色
inversePrimary: Colors.black54,
),
);
暗色主题#
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
ThemeData darkMode = ThemeData(
useMaterial3: true,
// 沉浸的关键代码
appBarTheme: const AppBarTheme(
systemOverlayStyle: SystemUiOverlayStyle(
statusBarColor: Colors.transparent,
statusBarIconBrightness: Brightness.light,
systemNavigationBarColor: Color(0xFF121012), // 和主背景surface保持一致
)
),
colorScheme: const ColorScheme.dark(
surface: Color(0xFF121012),
surfaceBright: Color(0x00000000), // 透明背景
primary: Color.fromARGB(255, 89, 54, 133),
secondary: Color(0xFF382C3E),
tertiary: Colors.white,
onSecondary: Colors.white30, // 骨架屏底色
secondaryContainer: Color.fromARGB(255, 12, 11, 12), // 骨架屏亮色
onSecondaryContainer: Colors.black26,
inversePrimary: Colors.white54,
),
);
使用Provider#
你需要安装 provider
flutter pub add provider
动态切换代码
import 'package:flutter/material.dart';
import 'package:video_app/theme/dark_theme.dart';
import 'package:video_app/theme/light_theme.dart';
class ThemeProvider extends ChangeNotifier {
ThemeData _themeData = lightMode;
ThemeData get themeData => _themeData;
ThemeData get darkTheme => darkMode;
ThemeData get lightTheme => lightMode;
set themeData(ThemeData themeData) {
_themeData = themeData;
notifyListeners();
}
void toggleTheme() {
if (_themeData == lightMode) {
themeData = darkMode;
} else {
themeData = lightMode;
}
}
}
主题设置#
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return ScreenUtilInit(
designSize: designSize,
builder: (context, child) {
return MaterialApp(
theme: Provider.of<ThemeProvider>(context).themeData, // 动态主题
darkTheme: Provider.of<ThemeProvider>(context).darkTheme, // 暗色主题,设置后不能手动切换
home: const RootScreen(),
debugShowCheckedModeBanner: false,
);
},
);
}
}
作者:sw-code
出处:https://www.cnblogs.com/sw-code/p/18305045
版权:本作品采用「署名-非商业性使用-相同方式共享 4.0 国际」许可协议进行许可。
未经作者同意,请勿转载;若经同意转载,请在文章明显位置注明作者和出处。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 本地部署 DeepSeek:小白也能轻松搞定!
· 传国玉玺易主,ai.com竟然跳转到国产AI
· 自己如何在本地电脑从零搭建DeepSeek!手把手教学,快来看看! (建议收藏)
· 我们是如何解决abp身上的几个痛点
· 如何基于DeepSeek开展AI项目