Skip to content

Commit c0727ab

Browse files
vmeng-bvmeng-b
committed
```
style: Implement custom tab themes and refine documentation This commit replaces the placeholder in `TabThemes` with a functional implementation that adapts to dark and light modes using `ThemeCubit`. It also integrates these tab themes into the global layout and improves the code examples in the documentation. ### Key Changes: * **Tab Theme Implementation (`tab_themes.dart`):** * Replaced `Placeholder` with `ComponentTheme` logic. * Defined `TabListTheme` and `TabsTheme` with dynamic colors based on the current theme (e.g., using `Colors.blue` for light mode and `Colors.gray` for dark mode). * **Global Layout Integration (`override_theme_layout.dart`):** * Wrapped the application's component hierarchy with the new `TabThemes` widget to ensure consistent tab styling throughout the app. * **Documentation and Example Updates (`tabs_screen.dart`):** * Updated the `TabsScreen` examples to explicitly set text color to black for better visibility against light-colored background containers. * Refined code snippets and formatting within `CodeCard` components to match the updated implementation and improve readability.
1 parent 8d0cd7c commit c0727ab

3 files changed

Lines changed: 87 additions & 43 deletions

File tree

‎lib/screens/components/tabs/tabs_screen.dart‎

Lines changed: 66 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -41,44 +41,46 @@ class _TabsScreenState extends State<TabsScreen> {
4141
});
4242
},
4343
children: const [
44-
TabItem(
45-
child: Text('Tab 1'),
46-
),
47-
TabItem(
48-
child: Text('Tab 2'),
49-
),
50-
TabItem(
51-
child: Text('Tab 3'),
52-
),
44+
TabItem(child: Text('Tab 1')),
45+
TabItem(child: Text('Tab 2')),
46+
TabItem(child: Text('Tab 3')),
5347
],
54-
),const Gap(16),
48+
),
49+
const Gap(16),
5550
IndexedStack(
5651
index: indexUnderlined,
5752
children: [
5853
Container(
5954
alignment: Alignment.center,
6055
color: Colors.red[100],
61-
child: const Text('Tab 1').h4,
56+
child: const Text(
57+
'Tab 1',
58+
style: TextStyle(color: Colors.black),
59+
).h4,
6260
),
6361
Container(
6462
alignment: Alignment.center,
6563
color: Colors.yellow[100],
66-
child: const Text('Tab 2').h4,
64+
child: const Text(
65+
'Tab 2',
66+
style: TextStyle(color: Colors.black),
67+
).h4,
6768
),
6869
Container(
6970
alignment: Alignment.center,
7071
color: Colors.blue[100],
71-
child: const Text('Tab 3').h4,
72+
child: const Text(
73+
'Tab 3',
74+
style: TextStyle(color: Colors.black),
75+
).h4,
7276
),
7377
],
7478
).sized(height: 100),
7579
],
7680
),
7781
lines: [
7882
CodeCommentLine("# Am Anfang der Klasse angeben"),
79-
CodeTextLine(
80-
"int indexUnderlined = 0;",
81-
),
83+
CodeTextLine("int indexUnderlined = 0;"),
8284
CodeTextLine(""),
8385
CodeCommentLine("# Beispiel für Unterstrichene Tabs"),
8486
CodeTextLine("Column("),
@@ -91,42 +93,47 @@ class _TabsScreenState extends State<TabsScreen> {
9193
CodeTextLine(" });"),
9294
CodeTextLine(" },"),
9395
CodeTextLine(" children: const ["),
94-
CodeTextLine(" TabItem("),
95-
CodeTextLine(" child: Text('Tab 1'),"),
96-
CodeTextLine(" ),"),
97-
CodeTextLine(" TabItem("),
98-
CodeTextLine(" child: Text('Tab 2'),"),
99-
CodeTextLine(" ),"),
100-
CodeTextLine(" TabItem("),
101-
CodeTextLine(" child: Text('Tab 3'),"),
102-
CodeTextLine(" ),"),
96+
CodeTextLine(" TabItem(child: Text('Tab 1')),"),
97+
CodeTextLine(" TabItem(child: Text('Tab 2')),"),
98+
CodeTextLine(" TabItem(child: Text('Tab 3')),"),
10399
CodeTextLine(" ],"),
104-
CodeTextLine(" ),const Gap(16),"),
100+
CodeTextLine(" ),"),
101+
CodeTextLine(" const Gap(16),"),
105102
CodeTextLine(" IndexedStack("),
106103
CodeTextLine(" index: indexUnderlined,"),
107104
CodeTextLine(" children: ["),
108105
CodeTextLine(" Container("),
109106
CodeTextLine(" alignment: Alignment.center,"),
110107
CodeTextLine(" color: Colors.red[100],"),
111-
CodeTextLine(" child: const Text('Tab 1').h4,"),
108+
CodeTextLine(" child: const Text("),
109+
CodeTextLine(" 'Tab 1',"),
110+
CodeTextLine(" style: TextStyle(color: Colors.black),"),
111+
CodeTextLine(" ).h4,"),
112112
CodeTextLine(" ),"),
113113
CodeTextLine(" Container("),
114114
CodeTextLine(" alignment: Alignment.center,"),
115115
CodeTextLine(" color: Colors.yellow[100],"),
116-
CodeTextLine(" child: const Text('Tab 2').h4,"),
116+
CodeTextLine(" child: const Text("),
117+
CodeTextLine(" 'Tab 2',"),
118+
CodeTextLine(" style: TextStyle(color: Colors.black),"),
119+
CodeTextLine(" ).h4,"),
117120
CodeTextLine(" ),"),
118121
CodeTextLine(" Container("),
119122
CodeTextLine(" alignment: Alignment.center,"),
120123
CodeTextLine(" color: Colors.blue[100],"),
121-
CodeTextLine(" child: const Text('Tab 3').h4,"),
124+
CodeTextLine(" child: const Text("),
125+
CodeTextLine(" 'Tab 3',"),
126+
CodeTextLine(" style: TextStyle(color: Colors.black),"),
127+
CodeTextLine(" ).h4,"),
122128
CodeTextLine(" ),"),
123129
CodeTextLine(" ],"),
124130
CodeTextLine(" ).sized(height: 100),"),
125131
CodeTextLine(" ],"),
126132
CodeTextLine("),"),
127133
],
128134
).withPadding(horizontal: 10),
129-
Gap(20),CodeCard(
135+
Gap(20),
136+
CodeCard(
130137
title: 'Pillen-Tabs',
131138
example: Column(
132139
children: [
@@ -142,34 +149,42 @@ class _TabsScreenState extends State<TabsScreen> {
142149
indexPills = value;
143150
});
144151
},
145-
),const Gap(16),
152+
),
153+
const Gap(16),
146154
IndexedStack(
147155
index: indexPills,
148156
children: [
149157
Container(
150158
alignment: Alignment.center,
151159
color: Colors.red[100],
152-
child: const Text('Tab 1').h4,
160+
child: const Text(
161+
'Tab 1',
162+
style: TextStyle(color: Colors.black),
163+
).h4,
153164
),
154165
Container(
155166
alignment: Alignment.center,
156167
color: Colors.yellow[100],
157-
child: const Text('Tab 2').h4,
168+
child: const Text(
169+
'Tab 2',
170+
style: TextStyle(color: Colors.black),
171+
).h4,
158172
),
159173
Container(
160174
alignment: Alignment.center,
161175
color: Colors.blue[100],
162-
child: const Text('Tab 3').h4,
176+
child: const Text(
177+
'Tab 3',
178+
style: TextStyle(color: Colors.black),
179+
).h4,
163180
),
164181
],
165182
).sized(height: 100),
166183
],
167184
),
168185
lines: [
169186
CodeCommentLine("# Am Anfang der Klasse angeben"),
170-
CodeTextLine(
171-
"int indexPills = 0;",
172-
),
187+
CodeTextLine("int indexPills = 0;"),
173188
CodeTextLine(""),
174189
CodeCommentLine("# Beispiel für Pillen-Tabs"),
175190
CodeTextLine("Column("),
@@ -186,24 +201,34 @@ class _TabsScreenState extends State<TabsScreen> {
186201
CodeTextLine(" indexPills = value;"),
187202
CodeTextLine(" });"),
188203
CodeTextLine(" },"),
189-
CodeTextLine(" ),const Gap(16),"),
204+
CodeTextLine(" ),"),
205+
CodeTextLine(" const Gap(16),"),
190206
CodeTextLine(" IndexedStack("),
191207
CodeTextLine(" index: indexPills,"),
192208
CodeTextLine(" children: ["),
193209
CodeTextLine(" Container("),
194210
CodeTextLine(" alignment: Alignment.center,"),
195211
CodeTextLine(" color: Colors.red[100],"),
196-
CodeTextLine(" child: const Text('Tab 1').h4,"),
212+
CodeTextLine(" child: const Text("),
213+
CodeTextLine(" 'Tab 1',"),
214+
CodeTextLine(" style: TextStyle(color: Colors.black),"),
215+
CodeTextLine(" ).h4,"),
197216
CodeTextLine(" ),"),
198217
CodeTextLine(" Container("),
199218
CodeTextLine(" alignment: Alignment.center,"),
200219
CodeTextLine(" color: Colors.yellow[100],"),
201-
CodeTextLine(" child: const Text('Tab 2').h4,"),
220+
CodeTextLine(" child: const Text("),
221+
CodeTextLine(" 'Tab 2',"),
222+
CodeTextLine(" style: TextStyle(color: Colors.black),"),
223+
CodeTextLine(" ).h4,"),
202224
CodeTextLine(" ),"),
203225
CodeTextLine(" Container("),
204226
CodeTextLine(" alignment: Alignment.center,"),
205227
CodeTextLine(" color: Colors.blue[100],"),
206-
CodeTextLine(" child: const Text('Tab 3').h4,"),
228+
CodeTextLine(" child: const Text("),
229+
CodeTextLine(" 'Tab 3',"),
230+
CodeTextLine(" style: TextStyle(color: Colors.black),"),
231+
CodeTextLine(" ).h4,"),
207232
CodeTextLine(" ),"),
208233
CodeTextLine(" ],"),
209234
CodeTextLine(" ).sized(height: 100),"),

‎lib/screens/widgets/layouts/override_theme_layout.dart‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import 'package:shadcn_flutter/shadcn_flutter.dart';
44
import '../overrides/button_themes.dart';
55
import '../overrides/card_themes.dart';
66
import '../overrides/container_themes.dart';
7+
import '../overrides/tab_themes.dart';
78

89
class OverrideThemeLayout extends StatelessWidget {
910
const OverrideThemeLayout({super.key, required this.child});
@@ -14,7 +15,9 @@ class OverrideThemeLayout extends StatelessWidget {
1415
Widget build(BuildContext context) {
1516
return FormThemes(
1617
child: ButtonThemes(
17-
child: ContainerThemes(child: CardThemes(child: child)),
18+
child: ContainerThemes(
19+
child: CardThemes(child: TabThemes(child: child)),
20+
),
1821
),
1922
);
2023
}

‎lib/screens/widgets/overrides/tab_themes.dart‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
1+
import 'package:flutter_bloc/flutter_bloc.dart';
12
import 'package:shadcn_flutter/shadcn_flutter.dart';
23

4+
import '../../../theme/cubit/theme_cubit.dart';
35

46
class TabThemes extends StatelessWidget {
57
const TabThemes({super.key, required this.child});
@@ -8,6 +10,20 @@ class TabThemes extends StatelessWidget {
810

911
@override
1012
Widget build(BuildContext context) {
11-
return const Placeholder();
13+
final isDark = context.watch<ThemeCubit>().state.isDarkMode;
14+
return ComponentTheme(
15+
data: TabListTheme(
16+
borderColor: isDark ? Colors.gray[400] : Colors.blue[900],
17+
borderWidth: 1,
18+
indicatorColor: isDark ? Colors.gray[400] : Colors.blue[900],
19+
indicatorHeight: 3,
20+
),
21+
child: ComponentTheme(
22+
data: TabsTheme(
23+
backgroundColor: isDark ? Colors.gray[600] : Colors.blue[100],
24+
),
25+
child: child,
26+
),
27+
);
1228
}
1329
}

0 commit comments

Comments
 (0)