Skip to content

Commit b9736e6

Browse files
Pavel401Pavel401
authored
Merge pull request #193 from andoriyaprashant/taskk7
 Improved Theme Change Animation and Switch Theme Icon
2 parents 0826782 + 54fe2cd commit b9736e6

File tree

2 files changed

+176
-110
lines changed

2 files changed

+176
-110
lines changed

‎lib/config/theme_switcher_clipper.dart

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
// ignore_for_file: library_private_types_in_public_api
2+
3+
import 'package:flutter/material.dart';
4+
5+
class ThemeSwitcherClipper extends StatefulWidget {
6+
final bool isDarkMode;
7+
final Function(bool) onTap;
8+
9+
const ThemeSwitcherClipper({
10+
Key? key,
11+
required this.isDarkMode,
12+
required this.onTap,
13+
required Icon child,
14+
}) : super(key: key);
15+
16+
@override
17+
_ThemeSwitcherClipperState createState() => _ThemeSwitcherClipperState();
18+
}
19+
20+
class _ThemeSwitcherClipperState extends State<ThemeSwitcherClipper> {
21+
@override
22+
Widget build(BuildContext context) {
23+
return GestureDetector(
24+
onTap: () async {
25+
widget.onTap(!widget.isDarkMode);
26+
},
27+
child: ClipOval(
28+
child: Hero(
29+
tag: 'theme_switcher',
30+
child: SizedBox(
31+
width: 60,
32+
height: 60,
33+
child: Center(
34+
child: AnimatedSwitcher(
35+
duration: const Duration(seconds: 2),
36+
child: Icon(
37+
widget.isDarkMode ? Icons.dark_mode : Icons.light_mode,
38+
key: ValueKey<bool>(widget.isDarkMode),
39+
color: widget.isDarkMode ? Colors.white : Colors.black,
40+
size: 40,
41+
),
42+
),
43+
),
44+
),
45+
),
46+
),
47+
);
48+
}
49+
}

‎lib/drawer/nav_drawer.dart

Lines changed: 127 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -1,141 +1,158 @@
1+
// ignore_for_file: library_private_types_in_public_api
2+
13
import 'package:flutter/material.dart';
2-
import 'package:google_fonts/google_fonts.dart';
34

45
import 'package:taskwarrior/config/app_settings.dart';
56
import 'package:taskwarrior/model/storage/storage_widget.dart';
67
import 'package:taskwarrior/routes/pageroute.dart';
78
import 'package:taskwarrior/views/about/about.dart';
89
import 'package:taskwarrior/views/reports/reports_home.dart';
10+
import 'package:taskwarrior/config/theme_switcher_clipper.dart';
911
import 'package:taskwarrior/views/settings/settings.dart';
1012

1113
class NavDrawer extends StatefulWidget {
1214
final InheritedStorage storageWidget;
1315
final Function() notifyParent;
1416

15-
const NavDrawer(
16-
{Key? key, required this.storageWidget, required this.notifyParent})
17-
: super(key: key);
17+
const NavDrawer({
18+
Key? key,
19+
required this.storageWidget,
20+
required this.notifyParent,
21+
}) : super(key: key);
1822

1923
@override
20-
// ignore: library_private_types_in_public_api
2124
_NavDrawerState createState() => _NavDrawerState();
2225
}
2326

2427
class _NavDrawerState extends State<NavDrawer> {
25-
late InheritedStorage storageWidget = widget.storageWidget;
26-
2728
@override
2829
Widget build(BuildContext context) {
2930
return Drawer(
30-
backgroundColor: AppSettings.isDarkMode ? Colors.black : Colors.white,
31-
child: ListView(
32-
padding: EdgeInsets.zero,
33-
children: [
34-
ListTile(
35-
tileColor: AppSettings.isDarkMode ? Colors.black : Colors.white,
36-
textColor: AppSettings.isDarkMode ? Colors.white : Colors.black,
37-
contentPadding: const EdgeInsets.only(top: 40, left: 10),
38-
title: Text(
39-
'Menu',
40-
style: GoogleFonts.poppins(
41-
fontSize: 25,
42-
fontWeight: FontWeight.bold,
31+
backgroundColor: AppSettings.isDarkMode ? Colors.black : Colors.white,
32+
child: ListView(
33+
padding: EdgeInsets.zero,
34+
children: [
35+
ListTile(
36+
tileColor: AppSettings.isDarkMode ? Colors.black : Colors.white,
37+
textColor: AppSettings.isDarkMode ? Colors.white : Colors.black,
38+
contentPadding: const EdgeInsets.only(top: 40, left: 10),
39+
title: Row(
40+
mainAxisAlignment: MainAxisAlignment.spaceBetween,
41+
children: [
42+
const Text(
43+
'Menu',
44+
style: TextStyle(
45+
fontSize: 25,
46+
fontWeight: FontWeight.bold,
47+
),
48+
),
49+
Padding(
50+
padding: const EdgeInsets.only(right: 10),
51+
child: ThemeSwitcherClipper(
52+
isDarkMode: AppSettings.isDarkMode,
53+
onTap: (bool newMode) async {
54+
AppSettings.isDarkMode = newMode;
55+
setState(() {});
56+
await SelectedTheme.saveMode(AppSettings.isDarkMode);
57+
widget.notifyParent();
58+
},
59+
child: Icon(
60+
AppSettings.isDarkMode
61+
? Icons.dark_mode
62+
: Icons.light_mode,
63+
color:
64+
AppSettings.isDarkMode ? Colors.white : Colors.black,
65+
size: 15,
66+
),
67+
),
4368
),
44-
),
45-
onTap: () => Navigator.pop(context),
69+
],
4670
),
47-
ListTile(
48-
tileColor: AppSettings.isDarkMode ? Colors.black : Colors.white,
49-
textColor: AppSettings.isDarkMode ? Colors.white : Colors.black,
50-
leading: Icon(
51-
Icons.person_rounded,
52-
color: AppSettings.isDarkMode ? Colors.white : Colors.black,
53-
),
54-
title: const Text('Profile'),
55-
onTap: () {
56-
// Update the state of the app
57-
// ...
58-
Navigator.pushNamed(context, PageRoutes.profile);
59-
// Then close the drawer
60-
// Navigator.pop(context);
61-
},
71+
onTap: () async {
72+
AppSettings.isDarkMode = !AppSettings.isDarkMode;
73+
setState(() {});
74+
await SelectedTheme.saveMode(AppSettings.isDarkMode);
75+
widget.notifyParent();
76+
},
77+
),
78+
ListTile(
79+
tileColor: AppSettings.isDarkMode ? Colors.black : Colors.white,
80+
textColor: AppSettings.isDarkMode ? Colors.white : Colors.black,
81+
leading: Icon(
82+
Icons.person_rounded,
83+
color: AppSettings.isDarkMode ? Colors.white : Colors.black,
6284
),
63-
//We dont need 2 sync buttons
64-
// ListTile(
65-
// tileColor: AppSettings.isDarkMode ? Colors.black : Colors.white,
66-
// textColor: AppSettings.isDarkMode ? Colors.white : Colors.black,
67-
// leading: Icon(
68-
// Icons.refresh,
69-
// color: AppSettings.isDarkMode ? Colors.white : Colors.black,
70-
// ),
71-
// onTap: () {
72-
// Navigator.pop(context);
73-
// storageWidget.synchronize(context, true);
74-
// },
75-
// title: const Text("Refresh"),
76-
// ),
77-
ListTile(
78-
tileColor: AppSettings.isDarkMode ? Colors.black : Colors.white,
79-
textColor: AppSettings.isDarkMode ? Colors.white : Colors.black,
80-
leading: Icon(
81-
Icons.summarize,
82-
color: AppSettings.isDarkMode ? Colors.white : Colors.black,
83-
),
84-
onTap: () {
85-
Navigator.of(context).push(MaterialPageRoute(
86-
builder: (context) => const ReportsHome()));
87-
},
88-
title: const Text("Reports"),
85+
title: const Text('Profile'),
86+
onTap: () {
87+
Navigator.pushNamed(context, PageRoutes.profile);
88+
},
89+
),
90+
// Uncomment the following ListTile if you want to enable the "Refresh" button
91+
/*
92+
ListTile(
93+
tileColor: AppSettings.isDarkMode ? Colors.black : Colors.white,
94+
textColor: AppSettings.isDarkMode ? Colors.white : Colors.black,
95+
leading: Icon(
96+
Icons.refresh,
97+
color: AppSettings.isDarkMode ? Colors.white : Colors.black,
8998
),
90-
ListTile(
91-
tileColor: AppSettings.isDarkMode ? Colors.black : Colors.white,
92-
textColor: AppSettings.isDarkMode ? Colors.white : Colors.black,
93-
leading: AppSettings.isDarkMode
94-
? const Icon(
95-
Icons.light_mode,
96-
color: Color.fromARGB(255, 216, 196, 15),
97-
size: 25,
98-
)
99-
: const Icon(
100-
Icons.dark_mode,
101-
color: Colors.black,
102-
size: 25,
103-
),
104-
title: const Text("Switch Theme"),
105-
onTap: () async {
106-
AppSettings.isDarkMode = !AppSettings.isDarkMode;
107-
setState(() {});
108-
await SelectedTheme.saveMode(AppSettings.isDarkMode);
109-
widget.notifyParent();
110-
},
99+
onTap: () {
100+
Navigator.pop(context);
101+
widget.storageWidget.synchronize(context, true);
102+
},
103+
title: const Text("Refresh"),
104+
),
105+
*/
106+
ListTile(
107+
tileColor: AppSettings.isDarkMode ? Colors.black : Colors.white,
108+
textColor: AppSettings.isDarkMode ? Colors.white : Colors.black,
109+
leading: Icon(
110+
Icons.summarize,
111+
color: AppSettings.isDarkMode ? Colors.white : Colors.black,
111112
),
112-
ListTile(
113-
tileColor: AppSettings.isDarkMode ? Colors.black : Colors.white,
114-
textColor: AppSettings.isDarkMode ? Colors.white : Colors.black,
115-
leading: Icon(
116-
Icons.info,
117-
color: AppSettings.isDarkMode ? Colors.white : Colors.black,
118-
),
119-
onTap: () {
120-
Navigator.of(context).push(
121-
MaterialPageRoute(builder: (context) => const AboutPage()));
122-
},
123-
title: const Text("About"),
113+
onTap: () {
114+
Navigator.of(context).push(
115+
MaterialPageRoute(
116+
builder: (context) => const ReportsHome(),
117+
),
118+
);
119+
},
120+
title: const Text("Reports"),
121+
),
122+
ListTile(
123+
tileColor: AppSettings.isDarkMode ? Colors.black : Colors.white,
124+
textColor: AppSettings.isDarkMode ? Colors.white : Colors.black,
125+
leading: Icon(
126+
Icons.info,
127+
color: AppSettings.isDarkMode ? Colors.white : Colors.black,
124128
),
125-
ListTile(
126-
tileColor: AppSettings.isDarkMode ? Colors.black : Colors.white,
127-
textColor: AppSettings.isDarkMode ? Colors.white : Colors.black,
128-
leading: Icon(
129-
Icons.settings,
130-
color: AppSettings.isDarkMode ? Colors.white : Colors.black,
131-
),
132-
onTap: () {
133-
Navigator.of(context).push(MaterialPageRoute(
134-
builder: (context) => const SettingsPage()));
135-
},
136-
title: const Text("Settings"),
129+
onTap: () {
130+
Navigator.of(context).push(
131+
MaterialPageRoute(
132+
builder: (context) => const AboutPage(),
133+
),
134+
);
135+
},
136+
title: const Text("About"),
137+
),
138+
ListTile(
139+
tileColor: AppSettings.isDarkMode ? Colors.black : Colors.white,
140+
textColor: AppSettings.isDarkMode ? Colors.white : Colors.black,
141+
leading: Icon(
142+
Icons.settings,
143+
color: AppSettings.isDarkMode ? Colors.white : Colors.black,
137144
),
138-
],
139-
));
145+
onTap: () {
146+
Navigator.of(context).push(
147+
MaterialPageRoute(
148+
builder: (context) => const SettingsPage(),
149+
),
150+
);
151+
},
152+
title: const Text("Settings"),
153+
),
154+
],
155+
),
156+
);
140157
}
141158
}

0 commit comments

Comments
 (0)