Skip to content

Commit cf672fe

Browse files
ys1113457623ys1113457623
committed
main page dark mode applied
1 parent 1fe7c55 commit cf672fe

File tree

5 files changed

+101
-36
lines changed

5 files changed

+101
-36
lines changed

‎best_flutter_ui_templates/lib/custom_drawer/drawer_user_controller.dart‎

Lines changed: 47 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,8 @@ class DrawerUserController extends StatefulWidget {
2626
_DrawerUserControllerState createState() => _DrawerUserControllerState();
2727
}
2828

29-
class _DrawerUserControllerState extends State<DrawerUserController> with TickerProviderStateMixin {
29+
class _DrawerUserControllerState extends State<DrawerUserController>
30+
with TickerProviderStateMixin {
3031
ScrollController? scrollController;
3132
AnimationController? iconAnimationController;
3233
AnimationController? animationController;
@@ -35,10 +36,16 @@ class _DrawerUserControllerState extends State<DrawerUserController> with Ticker
3536

3637
@override
3738
void initState() {
38-
animationController = AnimationController(duration: const Duration(milliseconds: 2000), vsync: this);
39-
iconAnimationController = AnimationController(vsync: this, duration: const Duration(milliseconds: 0));
40-
iconAnimationController?..animateTo(1.0, duration: const Duration(milliseconds: 0), curve: Curves.fastOutSlowIn);
41-
scrollController = ScrollController(initialScrollOffset: widget.drawerWidth);
39+
animationController = AnimationController(
40+
duration: const Duration(milliseconds: 2000), vsync: this);
41+
iconAnimationController = AnimationController(
42+
vsync: this, duration: const Duration(milliseconds: 0));
43+
iconAnimationController
44+
?..animateTo(1.0,
45+
duration: const Duration(milliseconds: 0),
46+
curve: Curves.fastOutSlowIn);
47+
scrollController =
48+
ScrollController(initialScrollOffset: widget.drawerWidth);
4249
scrollController!
4350
..addListener(() {
4451
if (scrollController!.offset <= 0) {
@@ -50,10 +57,15 @@ class _DrawerUserControllerState extends State<DrawerUserController> with Ticker
5057
} catch (_) {}
5158
});
5259
}
53-
iconAnimationController?.animateTo(0.0, duration: const Duration(milliseconds: 0), curve: Curves.fastOutSlowIn);
54-
} else if (scrollController!.offset > 0 && scrollController!.offset < widget.drawerWidth.floor()) {
55-
iconAnimationController?.animateTo((scrollController!.offset * 100 / (widget.drawerWidth)) / 100,
56-
duration: const Duration(milliseconds: 0), curve: Curves.fastOutSlowIn);
60+
iconAnimationController?.animateTo(0.0,
61+
duration: const Duration(milliseconds: 0),
62+
curve: Curves.fastOutSlowIn);
63+
} else if (scrollController!.offset > 0 &&
64+
scrollController!.offset < widget.drawerWidth.floor()) {
65+
iconAnimationController?.animateTo(
66+
(scrollController!.offset * 100 / (widget.drawerWidth)) / 100,
67+
duration: const Duration(milliseconds: 0),
68+
curve: Curves.fastOutSlowIn);
5769
} else {
5870
if (scrolloffset != 0.0) {
5971
setState(() {
@@ -63,7 +75,9 @@ class _DrawerUserControllerState extends State<DrawerUserController> with Ticker
6375
} catch (_) {}
6476
});
6577
}
66-
iconAnimationController?.animateTo(1.0, duration: const Duration(milliseconds: 0), curve: Curves.fastOutSlowIn);
78+
iconAnimationController?.animateTo(1.0,
79+
duration: const Duration(milliseconds: 0),
80+
curve: Curves.fastOutSlowIn);
6781
}
6882
});
6983
WidgetsBinding.instance?.addPostFrameCallback((_) => getInitState());
@@ -79,8 +93,10 @@ class _DrawerUserControllerState extends State<DrawerUserController> with Ticker
7993

8094
@override
8195
Widget build(BuildContext context) {
96+
var brightness = MediaQuery.of(context).platformBrightness;
97+
bool isLightMode = brightness == Brightness.light;
8298
return Scaffold(
83-
backgroundColor: AppTheme.white,
99+
backgroundColor: isLightMode ? AppTheme.white : AppTheme.nearlyBlack,
84100
body: SingleChildScrollView(
85101
controller: scrollController,
86102
scrollDirection: Axis.horizontal,
@@ -100,9 +116,12 @@ class _DrawerUserControllerState extends State<DrawerUserController> with Ticker
100116
builder: (BuildContext context, Widget? child) {
101117
return Transform(
102118
//transform we use for the stable drawer we, not need to move with scroll view
103-
transform: Matrix4.translationValues(scrollController!.offset, 0.0, 0.0),
119+
transform: Matrix4.translationValues(
120+
scrollController!.offset, 0.0, 0.0),
104121
child: HomeDrawer(
105-
screenIndex: widget.screenIndex == null ? DrawerIndex.HOME : widget.screenIndex,
122+
screenIndex: widget.screenIndex == null
123+
? DrawerIndex.HOME
124+
: widget.screenIndex,
106125
iconAnimationController: iconAnimationController,
107126
callBackIndex: (DrawerIndex indexType) {
108127
onDrawerClick();
@@ -123,7 +142,9 @@ class _DrawerUserControllerState extends State<DrawerUserController> with Ticker
123142
decoration: BoxDecoration(
124143
color: AppTheme.white,
125144
boxShadow: <BoxShadow>[
126-
BoxShadow(color: AppTheme.grey.withOpacity(0.6), blurRadius: 24),
145+
BoxShadow(
146+
color: AppTheme.grey.withOpacity(0.6),
147+
blurRadius: 24),
127148
],
128149
),
129150
child: Stack(
@@ -142,24 +163,32 @@ class _DrawerUserControllerState extends State<DrawerUserController> with Ticker
142163
),
143164
// this just menu and arrow icon animation
144165
Padding(
145-
padding: EdgeInsets.only(top: MediaQuery.of(context).padding.top + 8, left: 8),
166+
padding: EdgeInsets.only(
167+
top: MediaQuery.of(context).padding.top + 8,
168+
left: 8),
146169
child: SizedBox(
147170
width: AppBar().preferredSize.height - 8,
148171
height: AppBar().preferredSize.height - 8,
149172
child: Material(
150173
color: Colors.transparent,
151174
child: InkWell(
152-
borderRadius: BorderRadius.circular(AppBar().preferredSize.height),
175+
borderRadius: BorderRadius.circular(
176+
AppBar().preferredSize.height),
153177
child: Center(
154178
// if you use your own menu view UI you add form initialization
155179
child: widget.menuView != null
156180
? widget.menuView
157181
: AnimatedIcon(
158-
icon: widget.animatedIconData ?? AnimatedIcons.arrow_menu,
182+
color: isLightMode
183+
? AppTheme.dark_grey
184+
: AppTheme.white,
185+
icon: widget.animatedIconData ??
186+
AnimatedIcons.arrow_menu,
159187
progress: iconAnimationController!),
160188
),
161189
onTap: () {
162-
FocusScope.of(context).requestFocus(FocusNode());
190+
FocusScope.of(context)
191+
.requestFocus(FocusNode());
163192
onDrawerClick();
164193
},
165194
),

‎best_flutter_ui_templates/lib/custom_drawer/home_drawer.dart‎

Lines changed: 42 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,12 @@ import 'package:best_flutter_ui_templates/app_theme.dart';
22
import 'package:flutter/material.dart';
33

44
class HomeDrawer extends StatefulWidget {
5-
const HomeDrawer({Key? key, this.screenIndex, this.iconAnimationController, this.callBackIndex}) : super(key: key);
5+
const HomeDrawer(
6+
{Key? key,
7+
this.screenIndex,
8+
this.iconAnimationController,
9+
this.callBackIndex})
10+
: super(key: key);
611

712
final AnimationController? iconAnimationController;
813
final DrawerIndex? screenIndex;
@@ -58,6 +63,8 @@ class _HomeDrawerState extends State<HomeDrawer> {
5863

5964
@override
6065
Widget build(BuildContext context) {
66+
var brightness = MediaQuery.of(context).platformBrightness;
67+
bool isLightMode = brightness == Brightness.light;
6168
return Scaffold(
6269
backgroundColor: AppTheme.notWhite.withOpacity(0.5),
6370
body: Column(
@@ -77,10 +84,14 @@ class _HomeDrawerState extends State<HomeDrawer> {
7784
animation: widget.iconAnimationController!,
7885
builder: (BuildContext context, Widget? child) {
7986
return ScaleTransition(
80-
scale: AlwaysStoppedAnimation<double>(1.0 - (widget.iconAnimationController!.value) * 0.2),
87+
scale: AlwaysStoppedAnimation<double>(1.0 -
88+
(widget.iconAnimationController!.value) * 0.2),
8189
child: RotationTransition(
82-
turns: AlwaysStoppedAnimation<double>(Tween<double>(begin: 0.0, end: 24.0)
83-
.animate(CurvedAnimation(parent: widget.iconAnimationController!, curve: Curves.fastOutSlowIn))
90+
turns: AlwaysStoppedAnimation<double>(Tween<double>(
91+
begin: 0.0, end: 24.0)
92+
.animate(CurvedAnimation(
93+
parent: widget.iconAnimationController!,
94+
curve: Curves.fastOutSlowIn))
8495
.value /
8596
360),
8697
child: Container(
@@ -89,11 +100,15 @@ class _HomeDrawerState extends State<HomeDrawer> {
89100
decoration: BoxDecoration(
90101
shape: BoxShape.circle,
91102
boxShadow: <BoxShadow>[
92-
BoxShadow(color: AppTheme.grey.withOpacity(0.6), offset: const Offset(2.0, 4.0), blurRadius: 8),
103+
BoxShadow(
104+
color: AppTheme.grey.withOpacity(0.6),
105+
offset: const Offset(2.0, 4.0),
106+
blurRadius: 8),
93107
],
94108
),
95109
child: ClipRRect(
96-
borderRadius: const BorderRadius.all(Radius.circular(60.0)),
110+
borderRadius:
111+
const BorderRadius.all(Radius.circular(60.0)),
97112
child: Image.asset('assets/images/userImage.png'),
98113
),
99114
),
@@ -107,7 +122,7 @@ class _HomeDrawerState extends State<HomeDrawer> {
107122
'Chris Hemsworth',
108123
style: TextStyle(
109124
fontWeight: FontWeight.w600,
110-
color: AppTheme.grey,
125+
color: isLightMode ? AppTheme.grey : AppTheme.white,
111126
fontSize: 18,
112127
),
113128
),
@@ -167,7 +182,7 @@ class _HomeDrawerState extends State<HomeDrawer> {
167182
),
168183
);
169184
}
170-
185+
171186
void onTapped() {
172187
print('Doing Something...'); // Print to console.
173188
}
@@ -209,9 +224,15 @@ class _HomeDrawerState extends State<HomeDrawer> {
209224
? Container(
210225
width: 24,
211226
height: 24,
212-
child: Image.asset(listData.imageName, color: widget.screenIndex == listData.index ? Colors.blue : AppTheme.nearlyBlack),
227+
child: Image.asset(listData.imageName,
228+
color: widget.screenIndex == listData.index
229+
? Colors.blue
230+
: AppTheme.nearlyBlack),
213231
)
214-
: Icon(listData.icon?.icon, color: widget.screenIndex == listData.index ? Colors.blue : AppTheme.nearlyBlack),
232+
: Icon(listData.icon?.icon,
233+
color: widget.screenIndex == listData.index
234+
? Colors.blue
235+
: AppTheme.nearlyBlack),
215236
const Padding(
216237
padding: EdgeInsets.all(4.0),
217238
),
@@ -220,7 +241,9 @@ class _HomeDrawerState extends State<HomeDrawer> {
220241
style: TextStyle(
221242
fontWeight: FontWeight.w500,
222243
fontSize: 16,
223-
color: widget.screenIndex == listData.index ? Colors.blue : AppTheme.nearlyBlack,
244+
color: widget.screenIndex == listData.index
245+
? Colors.blue
246+
: AppTheme.nearlyBlack,
224247
),
225248
textAlign: TextAlign.left,
226249
),
@@ -233,11 +256,17 @@ class _HomeDrawerState extends State<HomeDrawer> {
233256
builder: (BuildContext context, Widget? child) {
234257
return Transform(
235258
transform: Matrix4.translationValues(
236-
(MediaQuery.of(context).size.width * 0.75 - 64) * (1.0 - widget.iconAnimationController!.value - 1.0), 0.0, 0.0),
259+
(MediaQuery.of(context).size.width * 0.75 - 64) *
260+
(1.0 -
261+
widget.iconAnimationController!.value -
262+
1.0),
263+
0.0,
264+
0.0),
237265
child: Padding(
238266
padding: EdgeInsets.only(top: 8, bottom: 8),
239267
child: Container(
240-
width: MediaQuery.of(context).size.width * 0.75 - 64,
268+
width:
269+
MediaQuery.of(context).size.width * 0.75 - 64,
241270
height: 46,
242271
decoration: BoxDecoration(
243272
color: Colors.blue.withOpacity(0.2),

‎best_flutter_ui_templates/lib/help_screen.dart‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@ class _HelpScreenState extends State<HelpScreen> {
1414

1515
@override
1616
Widget build(BuildContext context) {
17+
var brightness = MediaQuery.of(context).platformBrightness;
18+
bool isLightMode = brightness == Brightness.light;
1719
return Container(
1820
color: AppTheme.nearlyWhite,
1921
child: SafeArea(

‎best_flutter_ui_templates/lib/home_screen.dart‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,11 @@ class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
3434

3535
@override
3636
Widget build(BuildContext context) {
37+
var brightness = MediaQuery.of(context).platformBrightness;
38+
bool isLightMode = brightness == Brightness.light;
3739
return Scaffold(
38-
backgroundColor: AppTheme.white,
40+
backgroundColor:
41+
isLightMode == true ? AppTheme.white : AppTheme.nearlyBlack,
3942
body: FutureBuilder<bool>(
4043
future: getData(),
4144
builder: (BuildContext context, AsyncSnapshot<bool> snapshot) {
@@ -113,6 +116,8 @@ class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
113116
}
114117

115118
Widget appBar() {
119+
var brightness = MediaQuery.of(context).platformBrightness;
120+
bool isLightMode = brightness == Brightness.light;
116121
return SizedBox(
117122
height: AppBar().preferredSize.height,
118123
child: Row(
@@ -133,7 +138,7 @@ class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
133138
'Flutter UI',
134139
style: TextStyle(
135140
fontSize: 22,
136-
color: AppTheme.darkText,
141+
color: isLightMode ? AppTheme.darkText : AppTheme.white,
137142
fontWeight: FontWeight.w700,
138143
),
139144
),
@@ -145,15 +150,15 @@ class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
145150
child: Container(
146151
width: AppBar().preferredSize.height - 8,
147152
height: AppBar().preferredSize.height - 8,
148-
color: Colors.white,
153+
color: isLightMode ? Colors.white : AppTheme.nearlyBlack,
149154
child: Material(
150155
color: Colors.transparent,
151156
child: InkWell(
152157
borderRadius:
153158
BorderRadius.circular(AppBar().preferredSize.height),
154159
child: Icon(
155160
multiple ? Icons.dashboard : Icons.view_agenda,
156-
color: AppTheme.dark_grey,
161+
color: isLightMode ? AppTheme.dark_grey : AppTheme.white,
157162
),
158163
onTap: () {
159164
setState(() {

‎best_flutter_ui_templates/lib/navigation_home_screen.dart‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ class _NavigationHomeScreenState extends State<NavigationHomeScreen> {
2626
@override
2727
Widget build(BuildContext context) {
2828
return Container(
29-
color: AppTheme.nearlyWhite,
29+
color: AppTheme.white,
3030
child: SafeArea(
3131
top: false,
3232
bottom: false,

0 commit comments

Comments
 (0)