Skip to content

Commit 8d0cd7c

Browse files
vmeng-bvmeng-b
committed
feat: implement tab component examples in TabsScreen
This commit replaces the placeholder in `TabsScreen` with comprehensive examples of tab components, including both underlined and pill-style tab variants. It also removes the global `TabThemes` wrapper from the layout. ### Key Changes: * **Tabs Screen Implementation (`tabs_screen.dart`):** * Replaced `Placeholder` with a functional UI showcasing `TabList` (underlined) and `Tabs` (pills) components. * Added state management for tab switching using `indexUnderlined` and `indexPills`. * Integrated `CodeCard` to display both the live preview and the corresponding source code for each tab type. * Used `IndexedStack` to demonstrate content switching based on the selected tab. * **Theme Layout Refactor (`override_theme_layout.dart`):** * Removed `TabThemes` from the widget tree and deleted the associated import. * **Dependencies:** * Added imports for `CodeCard` and `text_extensions` to support the new UI components.
1 parent cac6003 commit 8d0cd7c

2 files changed

Lines changed: 209 additions & 7 deletions

File tree

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

Lines changed: 206 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
1+
import 'package:police_flutter_template/screens/widgets/code_card.dart';
12
import 'package:shadcn_flutter/shadcn_flutter.dart';
23

4+
import '../../../extensions/text_extensions.dart';
5+
36
class TabsScreen extends StatefulWidget {
47
const TabsScreen({super.key});
58

@@ -8,8 +11,210 @@ class TabsScreen extends StatefulWidget {
811
}
912

1013
class _TabsScreenState extends State<TabsScreen> {
14+
int indexUnderlined = 0;
15+
int indexPills = 0;
16+
1117
@override
1218
Widget build(BuildContext context) {
13-
return const Placeholder();
19+
return Column(
20+
mainAxisSize: MainAxisSize.max,
21+
children: [
22+
Gap(64),
23+
Text(
24+
'Tab-Elemente',
25+
).h3.setColors(lightColor: Colors.gray[800], darkColor: Colors.white),
26+
Gap(50),
27+
ConstrainedBox(
28+
constraints: BoxConstraints(maxWidth: 752),
29+
child: Column(
30+
crossAxisAlignment: CrossAxisAlignment.stretch,
31+
children: [
32+
CodeCard(
33+
title: 'Unterstrichene Tabs',
34+
example: Column(
35+
children: [
36+
TabList(
37+
index: indexUnderlined,
38+
onChanged: (value) {
39+
setState(() {
40+
indexUnderlined = value;
41+
});
42+
},
43+
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+
),
53+
],
54+
),const Gap(16),
55+
IndexedStack(
56+
index: indexUnderlined,
57+
children: [
58+
Container(
59+
alignment: Alignment.center,
60+
color: Colors.red[100],
61+
child: const Text('Tab 1').h4,
62+
),
63+
Container(
64+
alignment: Alignment.center,
65+
color: Colors.yellow[100],
66+
child: const Text('Tab 2').h4,
67+
),
68+
Container(
69+
alignment: Alignment.center,
70+
color: Colors.blue[100],
71+
child: const Text('Tab 3').h4,
72+
),
73+
],
74+
).sized(height: 100),
75+
],
76+
),
77+
lines: [
78+
CodeCommentLine("# Am Anfang der Klasse angeben"),
79+
CodeTextLine(
80+
"int indexUnderlined = 0;",
81+
),
82+
CodeTextLine(""),
83+
CodeCommentLine("# Beispiel für Unterstrichene Tabs"),
84+
CodeTextLine("Column("),
85+
CodeTextLine(" children: ["),
86+
CodeTextLine(" TabList("),
87+
CodeTextLine(" index: indexUnderlined,"),
88+
CodeTextLine(" onChanged: (value) {"),
89+
CodeTextLine(" setState(() {"),
90+
CodeTextLine(" indexUnderlined = value;"),
91+
CodeTextLine(" });"),
92+
CodeTextLine(" },"),
93+
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(" ),"),
103+
CodeTextLine(" ],"),
104+
CodeTextLine(" ),const Gap(16),"),
105+
CodeTextLine(" IndexedStack("),
106+
CodeTextLine(" index: indexUnderlined,"),
107+
CodeTextLine(" children: ["),
108+
CodeTextLine(" Container("),
109+
CodeTextLine(" alignment: Alignment.center,"),
110+
CodeTextLine(" color: Colors.red[100],"),
111+
CodeTextLine(" child: const Text('Tab 1').h4,"),
112+
CodeTextLine(" ),"),
113+
CodeTextLine(" Container("),
114+
CodeTextLine(" alignment: Alignment.center,"),
115+
CodeTextLine(" color: Colors.yellow[100],"),
116+
CodeTextLine(" child: const Text('Tab 2').h4,"),
117+
CodeTextLine(" ),"),
118+
CodeTextLine(" Container("),
119+
CodeTextLine(" alignment: Alignment.center,"),
120+
CodeTextLine(" color: Colors.blue[100],"),
121+
CodeTextLine(" child: const Text('Tab 3').h4,"),
122+
CodeTextLine(" ),"),
123+
CodeTextLine(" ],"),
124+
CodeTextLine(" ).sized(height: 100),"),
125+
CodeTextLine(" ],"),
126+
CodeTextLine("),"),
127+
],
128+
).withPadding(horizontal: 10),
129+
Gap(20),CodeCard(
130+
title: 'Pillen-Tabs',
131+
example: Column(
132+
children: [
133+
Tabs(
134+
index: indexPills,
135+
children: const [
136+
TabItem(child: Text('Tab 1')),
137+
TabItem(child: Text('Tab 2')),
138+
TabItem(child: Text('Tab 3')),
139+
],
140+
onChanged: (int value) {
141+
setState(() {
142+
indexPills = value;
143+
});
144+
},
145+
),const Gap(16),
146+
IndexedStack(
147+
index: indexPills,
148+
children: [
149+
Container(
150+
alignment: Alignment.center,
151+
color: Colors.red[100],
152+
child: const Text('Tab 1').h4,
153+
),
154+
Container(
155+
alignment: Alignment.center,
156+
color: Colors.yellow[100],
157+
child: const Text('Tab 2').h4,
158+
),
159+
Container(
160+
alignment: Alignment.center,
161+
color: Colors.blue[100],
162+
child: const Text('Tab 3').h4,
163+
),
164+
],
165+
).sized(height: 100),
166+
],
167+
),
168+
lines: [
169+
CodeCommentLine("# Am Anfang der Klasse angeben"),
170+
CodeTextLine(
171+
"int indexPills = 0;",
172+
),
173+
CodeTextLine(""),
174+
CodeCommentLine("# Beispiel für Pillen-Tabs"),
175+
CodeTextLine("Column("),
176+
CodeTextLine(" children: ["),
177+
CodeTextLine(" Tabs("),
178+
CodeTextLine(" index: indexPills,"),
179+
CodeTextLine(" children: const ["),
180+
CodeTextLine(" TabItem(child: Text('Tab 1')),"),
181+
CodeTextLine(" TabItem(child: Text('Tab 2')),"),
182+
CodeTextLine(" TabItem(child: Text('Tab 3')),"),
183+
CodeTextLine(" ],"),
184+
CodeTextLine(" onChanged: (int value) {"),
185+
CodeTextLine(" setState(() {"),
186+
CodeTextLine(" indexPills = value;"),
187+
CodeTextLine(" });"),
188+
CodeTextLine(" },"),
189+
CodeTextLine(" ),const Gap(16),"),
190+
CodeTextLine(" IndexedStack("),
191+
CodeTextLine(" index: indexPills,"),
192+
CodeTextLine(" children: ["),
193+
CodeTextLine(" Container("),
194+
CodeTextLine(" alignment: Alignment.center,"),
195+
CodeTextLine(" color: Colors.red[100],"),
196+
CodeTextLine(" child: const Text('Tab 1').h4,"),
197+
CodeTextLine(" ),"),
198+
CodeTextLine(" Container("),
199+
CodeTextLine(" alignment: Alignment.center,"),
200+
CodeTextLine(" color: Colors.yellow[100],"),
201+
CodeTextLine(" child: const Text('Tab 2').h4,"),
202+
CodeTextLine(" ),"),
203+
CodeTextLine(" Container("),
204+
CodeTextLine(" alignment: Alignment.center,"),
205+
CodeTextLine(" color: Colors.blue[100],"),
206+
CodeTextLine(" child: const Text('Tab 3').h4,"),
207+
CodeTextLine(" ),"),
208+
CodeTextLine(" ],"),
209+
CodeTextLine(" ).sized(height: 100),"),
210+
CodeTextLine(" ],"),
211+
CodeTextLine("),"),
212+
],
213+
).withPadding(horizontal: 10),
214+
],
215+
),
216+
),
217+
],
218+
);
14219
}
15220
}

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

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ 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';
87

98
class OverrideThemeLayout extends StatelessWidget {
109
const OverrideThemeLayout({super.key, required this.child});
@@ -13,11 +12,9 @@ class OverrideThemeLayout extends StatelessWidget {
1312

1413
@override
1514
Widget build(BuildContext context) {
16-
return TabThemes(
17-
child: FormThemes(
18-
child: ButtonThemes(
19-
child: ContainerThemes(child: CardThemes(child: child)),
20-
),
15+
return FormThemes(
16+
child: ButtonThemes(
17+
child: ContainerThemes(child: CardThemes(child: child)),
2118
),
2219
);
2320
}

0 commit comments

Comments
 (0)