feat:增加主题色模块
This commit is contained in:
96
lib/layout/app_actions.dart
Normal file
96
lib/layout/app_actions.dart
Normal file
@@ -0,0 +1,96 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:food_hub_app/provider/food_provider.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
|
||||
class AppActions extends StatefulWidget {
|
||||
const AppActions({super.key});
|
||||
|
||||
@override
|
||||
State<StatefulWidget> createState() => AppActionsState();
|
||||
}
|
||||
|
||||
class AppActionsState extends State<AppActions> {
|
||||
void _buildBottomSheet(FoodProvider provider) {
|
||||
showModalBottomSheet(
|
||||
context: context,
|
||||
shape: const RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.vertical(top: Radius.circular(16)),
|
||||
),
|
||||
builder: (context) => _buildBottomSheetBody(provider),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildBottomSheetBody(FoodProvider provider) {
|
||||
final colors = Theme.of(context).colorScheme;
|
||||
final provider = context.watch<FoodProvider>();
|
||||
|
||||
return Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
const SizedBox(height: 8),
|
||||
const Text(
|
||||
'请选择操作',
|
||||
style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
|
||||
),
|
||||
const SizedBox(height: 10),
|
||||
ListTile(
|
||||
leading: Icon(Icons.book, color: colors.primary),
|
||||
title: const Text('新增菜谱'),
|
||||
onTap: () => _handleAddRecipe(provider),
|
||||
),
|
||||
ListTile(
|
||||
leading: Icon(Icons.note_add, color: colors.primary),
|
||||
title: const Text('新增记录'),
|
||||
onTap: () => _handleAddRecord(provider),
|
||||
),
|
||||
ListTile(
|
||||
leading: Icon(Icons.group, color: colors.primary),
|
||||
title: const Text('发布朋友圈'),
|
||||
onTap: () => _handleAddMoment(provider),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
void _handleAddRecipe(FoodProvider provider) {
|
||||
// provider.resetRecordForm();
|
||||
// Navigator.pop(context);
|
||||
// Navigator.pushNamed(context, "/recordForm");
|
||||
}
|
||||
|
||||
void _handleAddRecord(FoodProvider provider) {
|
||||
provider.resetRecordForm();
|
||||
provider.isEditing = false;
|
||||
Navigator.pop(context);
|
||||
Navigator.pushNamed(context, "/recordForm");
|
||||
}
|
||||
|
||||
void _handleAddMoment(FoodProvider provider) {
|
||||
provider.resetMomentForm();
|
||||
provider.isEditing = false;
|
||||
Navigator.pop(context);
|
||||
Navigator.pushNamed(context, "/momentForm");
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final provider = context.watch<FoodProvider>();
|
||||
|
||||
return Row(
|
||||
children: [
|
||||
IconButton(
|
||||
icon: Icon(Icons.search, color: Colors.white),
|
||||
onPressed: () {
|
||||
// 搜索功能
|
||||
},
|
||||
),
|
||||
IconButton(
|
||||
icon: Icon(Icons.add, color: Colors.white),
|
||||
onPressed: () {
|
||||
_buildBottomSheet(provider);
|
||||
},
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
44
lib/layout/app_drawer.dart
Normal file
44
lib/layout/app_drawer.dart
Normal file
@@ -0,0 +1,44 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:food_hub_app/layout/theme_layout.dart';
|
||||
|
||||
class AppDrawer extends StatefulWidget {
|
||||
const AppDrawer({super.key});
|
||||
|
||||
@override
|
||||
State<StatefulWidget> createState() => AppDrawerState();
|
||||
}
|
||||
|
||||
class AppDrawerState extends State<AppDrawer> {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
// final themeProvider = Provider.of<ThemeProvider>(context);
|
||||
|
||||
return Drawer(
|
||||
child: ListView(
|
||||
padding: EdgeInsets.zero,
|
||||
children: [
|
||||
ConstrainedBox(
|
||||
constraints: const BoxConstraints(maxHeight: 100),
|
||||
child: DrawerHeader(
|
||||
decoration: BoxDecoration(color: Theme.of(context).primaryColor),
|
||||
child: const Text(
|
||||
'设置',
|
||||
style: TextStyle(color: Colors.white, fontSize: 24),
|
||||
),
|
||||
),
|
||||
),
|
||||
ThemeLayout(),
|
||||
const Divider(),
|
||||
ListTile(
|
||||
leading: const Icon(Icons.info),
|
||||
title: const Text('关于我们'),
|
||||
onTap: () {
|
||||
Navigator.pop(context); // 关闭抽屉
|
||||
// 跳转到关于页面
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
37
lib/layout/app_navbar.dart
Normal file
37
lib/layout/app_navbar.dart
Normal file
@@ -0,0 +1,37 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'menu.dart';
|
||||
|
||||
class AppNavbar extends StatefulWidget {
|
||||
final int currentPageIndex;
|
||||
final Function(int) onTapNavbarItem;
|
||||
|
||||
const AppNavbar({
|
||||
super.key,
|
||||
required this.currentPageIndex,
|
||||
required this.onTapNavbarItem,
|
||||
});
|
||||
|
||||
@override
|
||||
State<StatefulWidget> createState() => AppNavbarState();
|
||||
}
|
||||
|
||||
class AppNavbarState extends State<AppNavbar> {
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colors = Theme.of(context).colorScheme;
|
||||
|
||||
return BottomNavigationBar(
|
||||
currentIndex: widget.currentPageIndex,
|
||||
onTap: widget.onTapNavbarItem,
|
||||
items: bottomNavItems,
|
||||
type: BottomNavigationBarType.fixed,
|
||||
selectedItemColor: colors.primary,
|
||||
unselectedItemColor: colors.onSurface.withAlpha(150),
|
||||
showSelectedLabels: true,
|
||||
showUnselectedLabels: true,
|
||||
backgroundColor: colors.surface,
|
||||
elevation: 8,
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,69 +0,0 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
class SettingsDrawer extends StatelessWidget {
|
||||
const SettingsDrawer({super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
// final themeProvider = Provider.of<ThemeProvider>(context);
|
||||
|
||||
return Drawer(
|
||||
child: ListView(
|
||||
padding: EdgeInsets.zero,
|
||||
children: [
|
||||
ConstrainedBox(
|
||||
constraints: const BoxConstraints(maxHeight: 100),
|
||||
child: DrawerHeader(
|
||||
decoration: BoxDecoration(color: Theme.of(context).primaryColor),
|
||||
child: const Text(
|
||||
'设置',
|
||||
style: TextStyle(color: Colors.white, fontSize: 24),
|
||||
),
|
||||
),
|
||||
),
|
||||
ListTile(
|
||||
leading: const Icon(Icons.brightness_4),
|
||||
title: const Text('夜间模式'),
|
||||
// trailing: Switch(
|
||||
// value: themeProvider.isDarkMode,
|
||||
// onChanged: (bool value) {
|
||||
// themeProvider.toggleTheme();
|
||||
// },
|
||||
// ),
|
||||
// onTap: () => themeProvider.toggleTheme(),
|
||||
),
|
||||
|
||||
// 其他设置选项
|
||||
ListTile(
|
||||
leading: const Icon(Icons.notifications),
|
||||
title: const Text('通知设置'),
|
||||
onTap: () {
|
||||
Navigator.pop(context); // 关闭抽屉
|
||||
// 跳转到通知设置页面
|
||||
},
|
||||
),
|
||||
|
||||
ListTile(
|
||||
leading: const Icon(Icons.language),
|
||||
title: const Text('语言'),
|
||||
onTap: () {
|
||||
Navigator.pop(context); // 关闭抽屉
|
||||
// 跳转到语言设置页面
|
||||
},
|
||||
),
|
||||
|
||||
// 底部关于
|
||||
const Divider(),
|
||||
ListTile(
|
||||
leading: const Icon(Icons.info),
|
||||
title: const Text('关于我们'),
|
||||
onTap: () {
|
||||
Navigator.pop(context); // 关闭抽屉
|
||||
// 跳转到关于页面
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
40
lib/layout/menu.dart
Normal file
40
lib/layout/menu.dart
Normal file
@@ -0,0 +1,40 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:food_hub_app/models/layout.dart';
|
||||
import 'package:food_hub_app/views/moment.dart';
|
||||
import 'package:food_hub_app/views/profile.dart';
|
||||
import 'package:food_hub_app/views/record.dart';
|
||||
import 'package:food_hub_app/views/stats.dart';
|
||||
|
||||
final List<PageInfo> pages = [
|
||||
PageInfo(
|
||||
label: "记录",
|
||||
icon: Icons.home_outlined,
|
||||
activeIcon: Icons.home,
|
||||
page: RecordPage(),
|
||||
),
|
||||
PageInfo(
|
||||
label: "统计",
|
||||
icon: Icons.pie_chart_outline,
|
||||
activeIcon: Icons.pie_chart,
|
||||
page: StatsPage(),
|
||||
),
|
||||
PageInfo(
|
||||
label: "朋友圈",
|
||||
icon: Icons.group_outlined,
|
||||
activeIcon: Icons.group,
|
||||
page: MomentPage(),
|
||||
),
|
||||
PageInfo(
|
||||
label: "我的",
|
||||
icon: Icons.account_circle_outlined,
|
||||
activeIcon: Icons.account_circle,
|
||||
page: ProfilePage(),
|
||||
),
|
||||
];
|
||||
|
||||
final List<BottomNavigationBarItem> bottomNavItems =
|
||||
pages.map((page) {
|
||||
return BottomNavigationBarItem(icon: Icon(page.icon), label: page.label);
|
||||
}).toList();
|
||||
|
||||
final List<Widget> tabPages = pages.map((item) => item.page).toList();
|
||||
@@ -1,124 +0,0 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:food_hub_app/models/layout.dart';
|
||||
import 'package:food_hub_app/models/recipe.dart';
|
||||
import 'package:food_hub_app/provider/food_provider.dart';
|
||||
import 'package:food_hub_app/views/moment.dart';
|
||||
import 'package:food_hub_app/views/profile.dart';
|
||||
import 'package:food_hub_app/views/record.dart';
|
||||
import 'package:food_hub_app/views/stats.dart';
|
||||
|
||||
import 'package:provider/provider.dart';
|
||||
|
||||
final List<PageInfo> pageInfos = [
|
||||
PageInfo(
|
||||
label: "记录",
|
||||
icon: Icons.home_outlined,
|
||||
activeIcon: Icons.home,
|
||||
page: RecordPage(),
|
||||
),
|
||||
PageInfo(
|
||||
label: "统计",
|
||||
icon: Icons.pie_chart_outline,
|
||||
activeIcon: Icons.pie_chart,
|
||||
page: StatsPage(),
|
||||
),
|
||||
PageInfo(
|
||||
label: "朋友圈",
|
||||
icon: Icons.group_outlined,
|
||||
activeIcon: Icons.group,
|
||||
page: MomentPage(),
|
||||
),
|
||||
PageInfo(
|
||||
label: "我的",
|
||||
icon: Icons.account_circle_outlined,
|
||||
activeIcon: Icons.account_circle,
|
||||
page: ProfilePage(),
|
||||
),
|
||||
];
|
||||
|
||||
Widget buildBottomNavBar({
|
||||
required int currentIndex,
|
||||
required Function(int) onTap,
|
||||
}) {
|
||||
final List<BottomNavigationBarItem> items =
|
||||
pageInfos
|
||||
.map(
|
||||
(item) => BottomNavigationBarItem(
|
||||
icon: Icon(item.icon),
|
||||
activeIcon: Icon(item.activeIcon),
|
||||
label: item.label,
|
||||
),
|
||||
)
|
||||
.toList();
|
||||
|
||||
return BottomNavigationBar(
|
||||
currentIndex: currentIndex,
|
||||
iconSize: 25,
|
||||
type: BottomNavigationBarType.fixed,
|
||||
backgroundColor: Colors.white,
|
||||
items: items,
|
||||
onTap: onTap,
|
||||
);
|
||||
}
|
||||
|
||||
void buildBottomSheet(BuildContext context) {
|
||||
showModalBottomSheet(
|
||||
context: context,
|
||||
shape: const RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.vertical(top: Radius.circular(16)),
|
||||
),
|
||||
builder: (context) => buildBottomSheetBody(context),
|
||||
);
|
||||
}
|
||||
|
||||
Widget buildBottomSheetBody(BuildContext context) {
|
||||
final colors = Theme.of(context).colorScheme;
|
||||
final provider = context.watch<FoodProvider>();
|
||||
|
||||
return Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
const SizedBox(height: 8),
|
||||
const Text(
|
||||
'请选择操作',
|
||||
style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
|
||||
),
|
||||
const SizedBox(height: 10),
|
||||
ListTile(
|
||||
leading: Icon(Icons.book, color: colors.primary),
|
||||
title: const Text('新增菜谱'),
|
||||
onTap: () => _handleAddRecipe(context, provider),
|
||||
),
|
||||
ListTile(
|
||||
leading: Icon(Icons.note_add, color: colors.primary),
|
||||
title: const Text('新增记录'),
|
||||
onTap: () => _handleAddRecord(context, provider),
|
||||
),
|
||||
ListTile(
|
||||
leading: Icon(Icons.group, color: colors.primary),
|
||||
title: const Text('发布朋友圈'),
|
||||
onTap: () => _handleAddMoment(context, provider),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
void _handleAddRecipe(BuildContext context, FoodProvider provider) {
|
||||
// provider.resetRecordForm();
|
||||
// Navigator.pop(context);
|
||||
// Navigator.pushNamed(context, "/recordForm");
|
||||
}
|
||||
|
||||
void _handleAddRecord(BuildContext context, FoodProvider provider) {
|
||||
provider.resetRecordForm();
|
||||
provider.isEditing = false;
|
||||
Navigator.pop(context);
|
||||
Navigator.pushNamed(context, "/recordForm");
|
||||
}
|
||||
|
||||
void _handleAddMoment(BuildContext context, FoodProvider provider) {
|
||||
provider.resetMomentForm();
|
||||
provider.isEditing = false;
|
||||
Navigator.pop(context);
|
||||
Navigator.pushNamed(context, "/momentForm");
|
||||
}
|
||||
128
lib/layout/theme_layout.dart
Normal file
128
lib/layout/theme_layout.dart
Normal file
@@ -0,0 +1,128 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:food_hub_app/provider/theme_provider.dart';
|
||||
import 'package:food_hub_app/utils/theme_utils.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
|
||||
class ThemeLayout extends StatelessWidget {
|
||||
final Widget? child;
|
||||
|
||||
const ThemeLayout({super.key, this.child});
|
||||
|
||||
Widget _buildThemeColorList(BuildContext context, ThemeProvider provider) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 4),
|
||||
child: GridView.builder(
|
||||
shrinkWrap: true,
|
||||
physics: const NeverScrollableScrollPhysics(),
|
||||
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
|
||||
crossAxisCount: 4,
|
||||
crossAxisSpacing: 8,
|
||||
mainAxisSpacing: 8,
|
||||
childAspectRatio: 1.2,
|
||||
),
|
||||
itemCount: provider.availableThemes.length,
|
||||
itemBuilder: (context, index) {
|
||||
final themeColor = provider.availableThemes[index];
|
||||
final isSelected = provider.currentTheme == themeColor;
|
||||
|
||||
return _buildThemeColorItem(
|
||||
themeColor: themeColor,
|
||||
isSelected: isSelected,
|
||||
onTap: () => provider.changeTheme(themeColor),
|
||||
);
|
||||
},
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildThemeColorItem({
|
||||
required ThemeColor themeColor,
|
||||
required bool isSelected,
|
||||
required VoidCallback onTap,
|
||||
}) {
|
||||
return GestureDetector(
|
||||
onTap: onTap,
|
||||
child: Container(
|
||||
decoration: BoxDecoration(
|
||||
color:
|
||||
isSelected
|
||||
? themeColor.primaryColor.withAlpha(50)
|
||||
: Colors.transparent,
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
border: Border.all(
|
||||
color: isSelected ? themeColor.primaryColor : Colors.grey.shade300,
|
||||
width: isSelected ? 2 : 1,
|
||||
),
|
||||
),
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
// 颜色圆点
|
||||
Container(
|
||||
width: 20,
|
||||
height: 20,
|
||||
decoration: BoxDecoration(
|
||||
color: themeColor.primaryColor,
|
||||
shape: BoxShape.circle,
|
||||
border: Border.all(color: Colors.white, width: 2),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: Colors.black.withAlpha(10),
|
||||
blurRadius: 2,
|
||||
offset: const Offset(0, 1),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 4),
|
||||
Text(
|
||||
themeColor.name,
|
||||
style: TextStyle(
|
||||
fontSize: 10,
|
||||
fontWeight: isSelected ? FontWeight.bold : FontWeight.normal,
|
||||
color:
|
||||
isSelected ? themeColor.primaryColor : Colors.grey.shade600,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildDarkModeSection(BuildContext context, ThemeProvider provider) {
|
||||
return ListTile(
|
||||
leading: Icon(
|
||||
provider.isDarkMode ? Icons.dark_mode : Icons.light_mode,
|
||||
color: Theme.of(context).colorScheme.primary,
|
||||
),
|
||||
title: const Text('暗黑模式'),
|
||||
trailing: Switch(
|
||||
value: provider.isDarkMode,
|
||||
onChanged: (value) {
|
||||
provider.toggleDarkMode(value);
|
||||
},
|
||||
),
|
||||
onTap: () {
|
||||
provider.toggleDarkMode(!provider.isDarkMode);
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final provider = context.watch<ThemeProvider>();
|
||||
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Padding(
|
||||
padding: const EdgeInsets.fromLTRB(16, 16, 16, 8),
|
||||
child: Text('主题颜色', style: Theme.of(context).textTheme.titleMedium),
|
||||
),
|
||||
_buildDarkModeSection(context, provider),
|
||||
_buildThemeColorList(context, provider),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user