Skip to content

Commit 7db7ab3

Browse files
tqha1011tqha1011
committed
feat: apply dark theme for bottom navigation bar
1 parent 48688a8 commit 7db7ab3

6 files changed

Lines changed: 137 additions & 29 deletions

File tree

‎src/lib/features/main/view/screens/main_screen.dart‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,8 @@ class _MainScreenState extends State<MainScreen> {
4141

4242
@override
4343
Widget build(BuildContext context) {
44+
final isDark = Theme.of(context).brightness == Brightness.dark;
45+
4446
return Scaffold(
4547
extendBody: true,
4648
body: IndexedStack(
@@ -50,7 +52,9 @@ class _MainScreenState extends State<MainScreen> {
5052
bottomNavigationBar: Container(
5153
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 15),
5254
decoration: BoxDecoration(
53-
color: Colors.white,
55+
color: isDark
56+
? const Color(0xFF1A2945)
57+
: Theme.of(context).colorScheme.surface,
5458
borderRadius: const BorderRadius.only(topLeft: Radius.circular(30), topRight: Radius.circular(30)),
5559
boxShadow: [BoxShadow(color: Colors.black.withValues(alpha: 0.05), blurRadius: 20, offset: const Offset(0, -5))],
5660
),
@@ -80,7 +84,11 @@ class _MainScreenState extends State<MainScreen> {
8084
curve: Curves.easeInOut,
8185
padding: EdgeInsets.symmetric(horizontal: isSelected ? 15 : 10, vertical: 10),
8286
decoration: BoxDecoration(
83-
color: isSelected ? const Color(0xFFE8F0FE) : Colors.transparent,
87+
color: isSelected
88+
? (Theme.of(context).brightness == Brightness.dark
89+
? const Color(0xFF23395D)
90+
: const Color(0xFFE8F0FE))
91+
: Colors.transparent,
8492
borderRadius: BorderRadius.circular(15),
8593
),
8694
child: Column(

‎src/lib/features/tasks/view/screens/create_task_screen.dart‎

Lines changed: 37 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -21,14 +21,16 @@ class _CreateTaskScreenState extends State<CreateTaskScreen> {
2121
@override
2222
Widget build(BuildContext context) {
2323
String formattedDate = DateFormat('EEEE, d MMMM').format(_selectedDate);
24+
final isDark = Theme.of(context).brightness == Brightness.dark;
2425

2526
return Scaffold(
27+
backgroundColor: Theme.of(context).scaffoldBackgroundColor,
2628
body: SafeArea(
2729
child: Column(
2830
children: [
2931
Container(
3032
decoration: BoxDecoration(
31-
color: Colors.white,
33+
color: Theme.of(context).colorScheme.surface,
3234
borderRadius: const BorderRadius.only(
3335
bottomLeft: Radius.circular(30), bottomRight: Radius.circular(30)),
3436
boxShadow: [
@@ -42,11 +44,20 @@ class _CreateTaskScreenState extends State<CreateTaskScreen> {
4244
mainAxisAlignment: MainAxisAlignment.spaceBetween,
4345
children: [
4446
IconButton(
45-
icon: const Icon(Icons.arrow_back_ios_new_rounded, color: Colors.black),
47+
icon: Icon(
48+
Icons.arrow_back_ios_new_rounded,
49+
color: Theme.of(context).colorScheme.onSurface,
50+
),
4651
onPressed: () => Navigator.pop(context),
4752
),
48-
const Icon(Icons.menu_rounded, color: Colors.black),
49-
const Icon(Icons.assignment_outlined, color: Colors.black),
53+
Icon(
54+
Icons.menu_rounded,
55+
color: Theme.of(context).colorScheme.onSurface,
56+
),
57+
Icon(
58+
Icons.assignment_outlined,
59+
color: Theme.of(context).colorScheme.onSurface,
60+
),
5061
],
5162
),
5263
),
@@ -76,7 +87,9 @@ class _CreateTaskScreenState extends State<CreateTaskScreen> {
7687
label: Text(categories[index]),
7788
selected: isSelected,
7889
onSelected: (selected) => setState(() => _selectedCategoryIndex = selected ? index : 0),
79-
backgroundColor: const Color(0xFFF1F7FD),
90+
backgroundColor: isDark
91+
? Theme.of(context).colorScheme.surfaceContainerHighest
92+
: const Color(0xFFF1F7FD),
8093
selectedColor: Theme.of(context).colorScheme.primary,
8194
labelStyle: TextStyle(
8295
color: isSelected
@@ -86,7 +99,12 @@ class _CreateTaskScreenState extends State<CreateTaskScreen> {
8699
),
87100
shape: RoundedRectangleBorder(
88101
borderRadius: BorderRadius.circular(10),
89-
side: const BorderSide(color: Color(0xFFF1F7FD), width: 1)),
102+
side: BorderSide(
103+
color: isDark
104+
? Theme.of(context).colorScheme.outline
105+
: const Color(0xFFF1F7FD),
106+
width: 1,
107+
)),
90108
showCheckmark: false,
91109
),
92110
);
@@ -112,9 +130,20 @@ class _CreateTaskScreenState extends State<CreateTaskScreen> {
112130
child: Column(
113131
crossAxisAlignment: CrossAxisAlignment.start,
114132
children: [
115-
Text(formattedDate, style: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
133+
Text(
134+
formattedDate,
135+
style: TextStyle(
136+
fontSize: 18,
137+
fontWeight: FontWeight.bold,
138+
color: Theme.of(context).colorScheme.onSurface,
139+
),
140+
),
116141
const SizedBox(height: 5),
117-
Container(width: 150, height: 1, color: Colors.black26)
142+
Container(
143+
width: 150,
144+
height: 1,
145+
color: Theme.of(context).colorScheme.outline,
146+
)
118147
],
119148
),
120149
)

‎src/lib/features/tasks/view/screens/home_screen.dart‎

Lines changed: 36 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ class HomeScreen extends StatelessWidget {
1010
@override
1111
Widget build(BuildContext context) {
1212
String formattedDate = DateFormat('EEEE, d MMMM').format(DateTime.now());
13+
final isDark = Theme.of(context).brightness == Brightness.dark;
1314

1415
// --- TẠO DỮ LIỆU GIẢ LẬP (MOCK DATA) ---
1516
final task1 = TaskModel(
@@ -52,18 +53,33 @@ class HomeScreen extends StatelessWidget {
5253
child: Row(
5354
mainAxisAlignment: MainAxisAlignment.spaceBetween,
5455
children: [
55-
const Icon(Icons.menu_rounded, color: Colors.black),
56+
Icon(
57+
Icons.menu_rounded,
58+
color: isDark
59+
? Theme.of(context).colorScheme.surface
60+
: Colors.black,
61+
),
5662
Row(
5763
children: [
58-
const Icon(Icons.notifications_none_rounded, color: Colors.black),
64+
Icon(
65+
Icons.notifications_none_rounded,
66+
color: isDark
67+
? Theme.of(context).colorScheme.surface
68+
: Colors.black,
69+
),
5970
const SizedBox(width: 15),
6071
const CircleAvatar(
6172
radius: 20,
6273
backgroundImage: NetworkImage('https://i.pravatar.cc/150?u=user1'),
6374
),
6475
const SizedBox(width: 10),
6576
IconButton(
66-
icon: const Icon(Icons.add_rounded, color: Colors.black),
77+
icon: Icon(
78+
Icons.add_rounded,
79+
color: isDark
80+
? Theme.of(context).colorScheme.surface
81+
: Colors.black,
82+
),
6783
onPressed: () => Navigator.push(context, MaterialPageRoute(builder: (context) => const CreateTaskScreen())),
6884
),
6985
],
@@ -75,7 +91,13 @@ class HomeScreen extends StatelessWidget {
7591
Container(
7692
width: double.infinity,
7793
margin: const EdgeInsets.symmetric(horizontal: 20),
78-
decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(30)),
94+
decoration: BoxDecoration(
95+
color: Theme.of(context).colorScheme.surface,
96+
borderRadius: BorderRadius.circular(30),
97+
border: isDark
98+
? Border.all(color: Theme.of(context).colorScheme.outline)
99+
: null,
100+
),
79101
child: Padding(
80102
padding: const EdgeInsets.all(25.0),
81103
child: Column(
@@ -129,7 +151,10 @@ class HomeScreen extends StatelessWidget {
129151
left: 30,
130152
child: Container(
131153
padding: const EdgeInsets.all(4),
132-
decoration: const BoxDecoration(color: Colors.white, shape: BoxShape.circle),
154+
decoration: BoxDecoration(
155+
color: Theme.of(context).colorScheme.surface,
156+
shape: BoxShape.circle,
157+
),
133158
child: Icon(
134159
Icons.add_rounded,
135160
size: 20,
@@ -144,7 +169,12 @@ class HomeScreen extends StatelessWidget {
144169
task: task2, // Truyền task2 vào đây
145170
leading: Container(
146171
padding: const EdgeInsets.all(12),
147-
decoration: BoxDecoration(color: const Color(0xFFF1F7FD), borderRadius: BorderRadius.circular(15)),
172+
decoration: BoxDecoration(
173+
color: isDark
174+
? Theme.of(context).colorScheme.surfaceContainerHighest
175+
: const Color(0xFFF1F7FD),
176+
borderRadius: BorderRadius.circular(15),
177+
),
148178
child: Icon(
149179
Icons.call_outlined,
150180
color: Theme.of(context).colorScheme.primary,

‎src/lib/features/tasks/view/screens/task_detail_screen.dart‎

Lines changed: 37 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,10 @@ class _TaskDetailScreenState extends State<TaskDetailScreen> {
5050

5151
// Show success message
5252
ScaffoldMessenger.of(context).showSnackBar(
53-
const SnackBar(content: Text('Task updated successfully!'), backgroundColor: Colors.green),
53+
SnackBar(
54+
content: const Text('Task updated successfully!'),
55+
backgroundColor: Theme.of(context).colorScheme.tertiary,
56+
),
5457
);
5558

5659
// Return to the previous screen
@@ -61,6 +64,7 @@ class _TaskDetailScreenState extends State<TaskDetailScreen> {
6164
Widget build(BuildContext context) {
6265
// Format date for display
6366
String formattedDate = DateFormat('EEEE, d MMMM').format(widget.task.date);
67+
final isDark = Theme.of(context).brightness == Brightness.dark;
6468

6569
// Mock categories (Fetch from database later)
6670
List<String> categories = ['Development', 'Research', 'Design', 'Backend'];
@@ -71,10 +75,19 @@ class _TaskDetailScreenState extends State<TaskDetailScreen> {
7175
backgroundColor: Colors.transparent,
7276
elevation: 0,
7377
leading: IconButton(
74-
icon: const Icon(Icons.arrow_back_ios_new_rounded, color: Colors.black),
78+
icon: Icon(
79+
Icons.arrow_back_ios_new_rounded,
80+
color: Theme.of(context).colorScheme.onSurface,
81+
),
7582
onPressed: () => Navigator.pop(context),
7683
),
77-
title: const Text('Task Details', style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold)),
84+
title: Text(
85+
'Task Details',
86+
style: TextStyle(
87+
color: Theme.of(context).colorScheme.onSurface,
88+
fontWeight: FontWeight.bold,
89+
),
90+
),
7891
centerTitle: true,
7992
),
8093
body: SafeArea(
@@ -85,8 +98,11 @@ class _TaskDetailScreenState extends State<TaskDetailScreen> {
8598
child: Container(
8699
margin: const EdgeInsets.all(20),
87100
decoration: BoxDecoration(
88-
color: Colors.white,
101+
color: Theme.of(context).colorScheme.surface,
89102
borderRadius: BorderRadius.circular(30),
103+
border: isDark
104+
? Border.all(color: Theme.of(context).colorScheme.outline)
105+
: null,
90106
boxShadow: [
91107
BoxShadow(color: Colors.black.withValues(alpha: 0.05), blurRadius: 10, offset: const Offset(0, 5))
92108
],
@@ -119,7 +135,9 @@ class _TaskDetailScreenState extends State<TaskDetailScreen> {
119135
onSelected: (selected) {
120136
if (selected) setState(() => _currentCategory = categories[index]);
121137
},
122-
backgroundColor: const Color(0xFFF1F7FD),
138+
backgroundColor: isDark
139+
? Theme.of(context).colorScheme.surfaceContainerHighest
140+
: const Color(0xFFF1F7FD),
123141
selectedColor: Theme.of(context).colorScheme.primary,
124142
labelStyle: TextStyle(
125143
color: isSelected
@@ -129,7 +147,12 @@ class _TaskDetailScreenState extends State<TaskDetailScreen> {
129147
),
130148
shape: RoundedRectangleBorder(
131149
borderRadius: BorderRadius.circular(10),
132-
side: const BorderSide(color: Color(0xFFF1F7FD), width: 1)),
150+
side: BorderSide(
151+
color: isDark
152+
? Theme.of(context).colorScheme.outline
153+
: const Color(0xFFF1F7FD),
154+
width: 1,
155+
)),
133156
showCheckmark: false,
134157
),
135158
);
@@ -141,7 +164,14 @@ class _TaskDetailScreenState extends State<TaskDetailScreen> {
141164
// Display Task Date
142165
Text('Date', style: Theme.of(context).textTheme.labelLarge),
143166
const SizedBox(height: 5),
144-
Text(formattedDate, style: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold, color: Colors.black)),
167+
Text(
168+
formattedDate,
169+
style: TextStyle(
170+
fontSize: 18,
171+
fontWeight: FontWeight.bold,
172+
color: Theme.of(context).colorScheme.onSurface,
173+
),
174+
),
145175
const SizedBox(height: 25),
146176

147177
// Time Pickers for Start and End time

‎src/lib/features/tasks/view/widgets/task_widgets.dart‎

Lines changed: 16 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ class DateBox extends StatelessWidget {
3838
Widget build(BuildContext context) {
3939
String day = DateFormat('d').format(date);
4040
String weekday = DateFormat('E').format(date).toUpperCase();
41+
final isDark = Theme.of(context).brightness == Brightness.dark;
4142

4243
return Container(
4344
width: 55,
@@ -47,7 +48,12 @@ class DateBox extends StatelessWidget {
4748
? Theme.of(context).colorScheme.primary
4849
: Theme.of(context).colorScheme.surface,
4950
borderRadius: BorderRadius.circular(20),
50-
border: Border.all(color: Colors.grey.shade300, width: 1),
51+
border: Border.all(
52+
color: isDark
53+
? Theme.of(context).colorScheme.outline
54+
: Colors.grey.shade300,
55+
width: 1,
56+
),
5157
),
5258
child: Column(
5359
mainAxisAlignment: MainAxisAlignment.center,
@@ -56,7 +62,9 @@ class DateBox extends StatelessWidget {
5662
style: TextStyle(
5763
fontSize: 22,
5864
fontWeight: FontWeight.bold,
59-
color: isSelected ? Colors.white : Colors.black)),
65+
color: isSelected
66+
? Colors.white
67+
: Theme.of(context).colorScheme.onSurface)),
6068
const SizedBox(height: 5),
6169
Text(weekday,
6270
style: TextStyle(
@@ -186,8 +194,11 @@ class TimePickerWidget extends StatelessWidget {
186194
Row(
187195
children: [
188196
Text(formattedTime,
189-
style: const TextStyle(
190-
fontSize: 18, fontWeight: FontWeight.bold)),
197+
style: TextStyle(
198+
fontSize: 18,
199+
fontWeight: FontWeight.bold,
200+
color: Theme.of(context).colorScheme.onSurface,
201+
)),
191202
const SizedBox(width: 5),
192203
Icon(
193204
Icons.keyboard_arrow_down_rounded,
@@ -197,7 +208,7 @@ class TimePickerWidget extends StatelessWidget {
197208
],
198209
),
199210
const SizedBox(height: 5),
200-
Container(height: 1, color: Colors.black26)
211+
Container(height: 1, color: Theme.of(context).colorScheme.outline)
201212
],
202213
),
203214
);

‎src/lib/main.dart‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ class TaskApp extends StatelessWidget {
5555
themeMode: themeProvider.themeMode,
5656
theme: AppTheme.lightTheme, // Bộ màu sáng ông vừa map xong
5757
darkTheme: AppTheme.darkTheme,
58-
home: const LoginView(),
58+
home: const MainScreen(),
5959
debugShowCheckedModeBanner: false,
6060
);
6161
}

0 commit comments

Comments
 (0)