Skip to content

Commit 4d8f529

Browse files
sh4dowBytesh4dowByte
committed
add daark theme
1 parent 4052c9f commit 4d8f529

File tree

15 files changed

+783
-123
lines changed

15 files changed

+783
-123
lines changed

‎assets/images/resource/play_on.png

29 KB
Loading

‎lib/components/app_circle_button.dart

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@ class AppCircleButton extends StatelessWidget {
1212
return GestureDetector(
1313
onTap: onTap,
1414
child: Container(
15-
width: 55,
16-
height: 55,
15+
width: 45,
16+
height: 45,
1717
padding: const EdgeInsets.all(10),
1818
decoration: BoxDecoration(
1919
color: isTransparent

‎lib/components/app_day_selector.dart

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ class AppDaySelector extends StatefulWidget {
1111
class _AppDaySelectorState extends State<AppDaySelector> {
1212
// Menyimpan status apakah hari tertentu dipilih atau tidak
1313
final List<String> days = ["SU", "M", "T", "W", "TH", "F", "S"];
14-
final List<bool> selectedDays = List.generate(7, (index) => false);
14+
final List<bool> selectedDays = [true, true, true, true, false, false, true];
1515

1616
void toggleDaySelection(int index) {
1717
setState(() {

‎lib/config/app_theme.dart

Lines changed: 88 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -6,160 +6,169 @@ import 'package:google_fonts/google_fonts.dart';
66
class AppTheme {
77
// Light Theme Data
88
static ThemeData get lightTheme {
9+
Color primaryTextColor = const Color(0xFF3F414E);
10+
Color secondaryTextColor = const Color(0xFFA1A4B2);
11+
912
return ThemeData(
1013
brightness: Brightness.light,
1114
primaryColor: const Color(0xFF8E97FD),
1215
primaryColorDark: const Color(0xFF3F414E),
1316
primaryColorLight: Colors.white,
17+
dividerTheme: DividerThemeData(color: secondaryTextColor),
1418
textTheme: TextTheme(
15-
displayLarge: GoogleFonts.roboto(
16-
fontSize: 57,
17-
color: const Color(0xFF3F414E),
19+
displayLarge: GoogleFonts.abel(
20+
fontSize: 57, // Display terbesar untuk teks utama atau header besar
21+
color: primaryTextColor,
1822
fontWeight: FontWeight.w300,
1923
),
20-
displayMedium: GoogleFonts.roboto(
21-
fontSize: 45,
22-
color: const Color(0xFF3F414E),
24+
displayMedium: GoogleFonts.abel(
25+
fontSize:
26+
45, // Display sedang, digunakan untuk header besar namun tidak dominan
27+
color: primaryTextColor,
2328
fontWeight: FontWeight.w300,
2429
),
25-
displaySmall: GoogleFonts.roboto(
26-
fontSize: 36,
27-
color: const Color(0xFF3F414E),
28-
fontWeight: FontWeight.w300,
30+
displaySmall: GoogleFonts.abel(
31+
fontSize: 36, // Display kecil, untuk sub-header atau judul penting
32+
color: primaryTextColor,
33+
fontWeight: FontWeight.bold,
2934
),
30-
headlineLarge: GoogleFonts.roboto(
31-
fontSize: 32,
32-
color: const Color(0xFF3F414E),
35+
headlineLarge: GoogleFonts.abel(
36+
fontSize: 32, // Ukuran untuk headline atau judul utama
37+
color: secondaryTextColor,
3338
),
34-
headlineMedium: GoogleFonts.roboto(
35-
fontSize: 28,
36-
color: const Color(0xFF3F414E),
39+
headlineMedium: GoogleFonts.abel(
40+
fontSize: 28, // Ukuran headline menengah
41+
color: primaryTextColor,
3742
),
38-
headlineSmall: GoogleFonts.roboto(
39-
fontSize: 24,
40-
color: const Color(0xFF3F414E),
43+
headlineSmall: GoogleFonts.abel(
44+
fontSize: 24, // Ukuran headline kecil
45+
color: primaryTextColor,
4146
),
42-
titleLarge: GoogleFonts.roboto(
43-
fontSize: 22,
44-
color: const Color(0xFF3F414E),
47+
titleLarge: GoogleFonts.abel(
48+
fontSize: 22, // Ukuran besar untuk judul utama di layar
49+
color: secondaryTextColor,
4550
),
46-
titleMedium: GoogleFonts.roboto(
47-
fontSize: 18,
48-
color: const Color(0xFF3F414E),
51+
titleMedium: GoogleFonts.abel(
52+
fontSize: 18, // Ukuran sedang untuk judul atau subtitle
53+
color: primaryTextColor,
4954
fontWeight: FontWeight.bold,
5055
),
51-
titleSmall: GoogleFonts.roboto(
52-
fontSize: 14,
53-
color: const Color(0xFFA1A4B2),
56+
titleSmall: GoogleFonts.abel(
57+
fontSize: 14, // Ukuran kecil untuk subtitle atau label
58+
color: secondaryTextColor,
59+
fontWeight: FontWeight.w300,
5460
),
55-
bodyLarge: GoogleFonts.roboto(
56-
fontSize: 16,
57-
color: const Color(0xFF3F414E),
61+
bodyLarge: GoogleFonts.abel(
62+
fontSize: 16, // Ukuran teks utama
63+
color: primaryTextColor,
5864
),
59-
bodyMedium: GoogleFonts.roboto(
60-
fontSize: 14,
61-
color: const Color(0xFF3F414E),
65+
bodyMedium: GoogleFonts.abel(
66+
fontSize: 14, // Ukuran teks sekunder
67+
color: primaryTextColor,
6268
),
63-
bodySmall: GoogleFonts.roboto(
64-
fontSize: 12,
65-
color: const Color(0xFF3F414E),
69+
bodySmall: GoogleFonts.abel(
70+
fontSize: 12, // Ukuran untuk teks tambahan atau catatan
71+
color: secondaryTextColor,
6672
),
67-
labelLarge: GoogleFonts.roboto(
68-
fontSize: 14,
69-
color: const Color(0xFF3F414E),
73+
labelLarge: GoogleFonts.abel(
74+
fontSize:
75+
14, // Label besar, digunakan untuk tombol atau label penting
76+
color: secondaryTextColor,
7077
),
71-
labelMedium: GoogleFonts.roboto(
72-
fontSize: 12,
73-
color: const Color(0xFF3F414E),
78+
labelMedium: GoogleFonts.abel(
79+
fontSize: 12, // Label sedang untuk UI elemen
80+
color: secondaryTextColor,
7481
),
75-
labelSmall: GoogleFonts.roboto(
76-
fontSize: 11,
77-
color: const Color(0xFFA1A4B2),
82+
labelSmall: GoogleFonts.abel(
83+
fontSize: 11, // Label kecil, digunakan untuk indikator atau ikon
84+
color: secondaryTextColor,
7885
),
7986
),
8087
);
8188
}
8289

8390
// Dark Theme Data (Opsional)
8491
static ThemeData get darkTheme {
92+
Color primaryTextColor = const Color(0xFFFFFFFF);
93+
Color secondaryTextColor = const Color(0xFF98A1BD);
94+
8595
return ThemeData(
8696
brightness: Brightness.dark,
8797
scaffoldBackgroundColor: const Color(0xFF02174C),
8898
primaryColor: const Color(0xFF8E97FD),
8999
primaryColorDark: const Color(0xFFE6E7F2),
90100
primaryColorLight: Colors.black,
101+
dividerTheme: DividerThemeData(color: secondaryTextColor),
91102
bottomNavigationBarTheme: const BottomNavigationBarThemeData(
92103
backgroundColor: Color(0xFF03174D), // Warna background untuk mode gelap
93-
// selectedItemColor: Colors.tealAccent,
94-
// unselectedItemColor: Colors.grey,
95104
),
96105
textTheme: TextTheme(
97-
displayLarge: GoogleFonts.roboto(
106+
displayLarge: GoogleFonts.abel(
98107
fontSize: 57, // Display terbesar untuk teks utama atau header besar
99-
color: const Color(0xFFFFFFFF),
108+
color: primaryTextColor,
100109
fontWeight: FontWeight.w300,
101110
),
102-
displayMedium: GoogleFonts.roboto(
111+
displayMedium: GoogleFonts.abel(
103112
fontSize:
104113
45, // Display sedang, digunakan untuk header besar namun tidak dominan
105-
color: const Color(0xFFFFFFFF),
114+
color: primaryTextColor,
106115
fontWeight: FontWeight.w300,
107116
),
108-
displaySmall: GoogleFonts.roboto(
117+
displaySmall: GoogleFonts.abel(
109118
fontSize: 36, // Display kecil, untuk sub-header atau judul penting
110-
color: const Color(0xFFFFFFFF),
111-
fontWeight: FontWeight.w300,
119+
color: primaryTextColor,
120+
fontWeight: FontWeight.bold,
112121
),
113-
headlineLarge: GoogleFonts.roboto(
122+
headlineLarge: GoogleFonts.abel(
114123
fontSize: 32, // Ukuran untuk headline atau judul utama
115-
color: const Color(0xFFE6E7F2),
124+
color: secondaryTextColor,
116125
),
117-
headlineMedium: GoogleFonts.roboto(
126+
headlineMedium: GoogleFonts.abel(
118127
fontSize: 28, // Ukuran headline menengah
119-
color: const Color(0xFFE6E7F2),
128+
color: primaryTextColor,
120129
),
121-
headlineSmall: GoogleFonts.roboto(
130+
headlineSmall: GoogleFonts.abel(
122131
fontSize: 24, // Ukuran headline kecil
123-
color: const Color(0xFFE6E7F2),
132+
color: primaryTextColor,
124133
),
125-
titleLarge: GoogleFonts.roboto(
134+
titleLarge: GoogleFonts.abel(
126135
fontSize: 22, // Ukuran besar untuk judul utama di layar
127-
color: const Color(0xFFE6E7F2),
136+
color: secondaryTextColor,
128137
),
129-
titleMedium: GoogleFonts.roboto(
138+
titleMedium: GoogleFonts.abel(
130139
fontSize: 18, // Ukuran sedang untuk judul atau subtitle
131-
color: const Color(0xFFE6E7F2),
140+
color: primaryTextColor,
132141
fontWeight: FontWeight.bold,
133142
),
134-
titleSmall: GoogleFonts.roboto(
143+
titleSmall: GoogleFonts.abel(
135144
fontSize: 14, // Ukuran kecil untuk subtitle atau label
136-
color: const Color(0xFFB0BEC5),
145+
color: secondaryTextColor,
137146
fontWeight: FontWeight.w300,
138147
),
139-
bodyLarge: GoogleFonts.roboto(
148+
bodyLarge: GoogleFonts.abel(
140149
fontSize: 16, // Ukuran teks utama
141-
color: const Color(0xFFFFFFFF),
150+
color: primaryTextColor,
142151
),
143-
bodyMedium: GoogleFonts.roboto(
152+
bodyMedium: GoogleFonts.abel(
144153
fontSize: 14, // Ukuran teks sekunder
145-
color: const Color(0xFFFFFFFF),
154+
color: primaryTextColor,
146155
),
147-
bodySmall: GoogleFonts.roboto(
156+
bodySmall: GoogleFonts.abel(
148157
fontSize: 12, // Ukuran untuk teks tambahan atau catatan
149-
color: const Color(0xFFB0BEC5),
158+
color: secondaryTextColor,
150159
),
151-
labelLarge: GoogleFonts.roboto(
160+
labelLarge: GoogleFonts.abel(
152161
fontSize:
153162
14, // Label besar, digunakan untuk tombol atau label penting
154-
color: const Color(0xFFE6E7F2),
163+
color: secondaryTextColor,
155164
),
156-
labelMedium: GoogleFonts.roboto(
165+
labelMedium: GoogleFonts.abel(
157166
fontSize: 12, // Label sedang untuk UI elemen
158-
color: const Color(0xFFE6E7F2),
167+
color: secondaryTextColor,
159168
),
160-
labelSmall: GoogleFonts.roboto(
169+
labelSmall: GoogleFonts.abel(
161170
fontSize: 11, // Label kecil, digunakan untuk indikator atau ikon
162-
color: const Color(0xFF98A1BD),
171+
color: secondaryTextColor,
163172
),
164173
),
165174
);

‎lib/screen/chose_topic.dart

Lines changed: 41 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -65,14 +65,18 @@ class ChoseTopicPage extends StatelessWidget {
6565
right: 0,
6666
left: 0,
6767
child: SvgPicture.asset(
68-
'assets/images/welcome/background_cloud.svg',
69-
width: MediaQuery.of(context).size.width +
70-
30, // Menyesuaikan lebar SVG sesuai layar
71-
height: MediaQuery.of(context).size.height +
72-
100, // Setengah tinggi layar
73-
fit: BoxFit
74-
.cover, // Mengatur SVG agar menutupi area yang diberikan
75-
color: Color.fromARGB(162, 3, 15, 44)),
68+
'assets/images/welcome/background_cloud.svg',
69+
width: MediaQuery.of(context).size.width +
70+
30, // Menyesuaikan lebar SVG sesuai layar
71+
height: MediaQuery.of(context).size.height +
72+
100, // Setengah tinggi layar
73+
fit: BoxFit
74+
.cover, // Mengatur SVG agar menutupi area yang diberikan
75+
// ignore: deprecated_member_use
76+
color: Theme.of(context).brightness == Brightness.light
77+
? Color(0xFFFAF8F5)
78+
: Color.fromARGB(162, 3, 15, 44),
79+
),
7680
),
7781
Column(
7882
crossAxisAlignment: CrossAxisAlignment.start,
@@ -98,18 +102,14 @@ class ChoseTopicPage extends StatelessWidget {
98102
),
99103
Text(
100104
'choose a topic to focuse on:',
101-
style: GoogleFonts.roboto(
102-
fontSize: 20,
103-
fontWeight: FontWeight.w300,
104-
color: Color(0xFFA1A4B2),
105-
),
105+
style: Theme.of(context).textTheme.titleLarge,
106106
)
107107
],
108108
),
109109
),
110110
),
111111
Flexible(
112-
flex: 9,
112+
flex: 11,
113113
child: ListView(
114114
padding: const EdgeInsets.all(8.0),
115115
children: [
@@ -124,10 +124,10 @@ class ChoseTopicPage extends StatelessWidget {
124124
.entries
125125
.where((entry) =>
126126
entry.key % 2 == 0) // Filter elemen genap
127-
.map((entry) => buildGridItem(
128-
entry.value['color'],
129-
entry.value['text'],
130-
entry.value['svg']))
127+
.map((entry) => AppTopicItems(
128+
color: entry.value['color'],
129+
text: entry.value['text'],
130+
svg: entry.value['svg']))
131131
.toList(),
132132
),
133133
),
@@ -140,10 +140,10 @@ class ChoseTopicPage extends StatelessWidget {
140140
.entries
141141
.where((entry) =>
142142
entry.key % 2 != 0) // Filter elemen ganjil
143-
.map((entry) => buildGridItem(
144-
entry.value['color'],
145-
entry.value['text'],
146-
entry.value['svg']))
143+
.map((entry) => AppTopicItems(
144+
color: entry.value['color'],
145+
text: entry.value['text'],
146+
svg: entry.value['svg']))
147147
.toList(),
148148
),
149149
),
@@ -158,8 +158,22 @@ class ChoseTopicPage extends StatelessWidget {
158158
),
159159
);
160160
}
161+
}
162+
163+
class AppTopicItems extends StatelessWidget {
164+
const AppTopicItems({
165+
super.key,
166+
required this.color,
167+
required this.text,
168+
required this.svg,
169+
});
161170

162-
Widget buildGridItem(Color color, String text, String svg) {
171+
final Color color;
172+
final String text;
173+
final String svg;
174+
175+
@override
176+
Widget build(BuildContext context) {
163177
final brightness = getBrightness(color);
164178
final textColor =
165179
brightness == Brightness.dark ? Colors.white : Colors.black;
@@ -187,10 +201,10 @@ class ChoseTopicPage extends StatelessWidget {
187201
width: 130,
188202
child: Text(
189203
text,
190-
style: GoogleFonts.roboto(
191-
fontSize: 18,
192-
color: textColor,
193-
),
204+
style: Theme.of(context)
205+
.textTheme
206+
.titleMedium!
207+
.copyWith(color: textColor),
194208
textAlign: TextAlign.start,
195209
),
196210
),

0 commit comments

Comments
 (0)