Skip to content

Commit 31bc20a

Browse files
sd-athlongithub-actions
authored and
thelukewalton
committed
feat(main): Tabs (#11)
* feat(main): Tabs * [automated commit] lint format and import sort --------- Co-authored-by: github-actions <[email protected]>
1 parent cbf46d9 commit 31bc20a

File tree

7 files changed

+191
-0
lines changed

7 files changed

+191
-0
lines changed

‎example/lib/home.dart

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import 'package:zeta_example/pages/components/navigation_bar_example.dart';
1616
import 'package:zeta_example/pages/components/radio_example.dart';
1717
import 'package:zeta_example/pages/components/switch_example.dart';
1818
import 'package:zeta_example/pages/components/snackbar_example.dart';
19+
import 'package:zeta_example/pages/components/tabs_example.dart';
1920
import 'package:zeta_example/pages/theme/color_example.dart';
2021
import 'package:zeta_example/pages/components/password_input_example.dart';
2122
import 'package:zeta_example/pages/components/progress_example.dart';
@@ -49,6 +50,7 @@ final List<Component> components = [
4950
Component(DropdownExample.name, (context) => const DropdownExample()),
5051
Component(ProgressExample.name, (context) => const ProgressExample()),
5152
Component(SnackBarExample.name, (context) => const SnackBarExample()),
53+
Component(TabsExample.name, (context) => const TabsExample()),
5254
Component(DialPadExample.name, (context) => const DialPadExample()),
5355
Component(RadioButtonExample.name, (context) => const RadioButtonExample()),
5456
Component(SwitchExample.name, (context) => const SwitchExample()),

‎example/lib/pages/components/tabs_example.dart

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import 'package:flutter/material.dart';
2+
import 'package:zeta_example/widgets.dart';
3+
import 'package:zeta_flutter/zeta_flutter.dart';
4+
5+
class TabsExample extends StatefulWidget {
6+
const TabsExample({super.key});
7+
8+
static const String name = 'Tabs';
9+
10+
@override
11+
State<TabsExample> createState() => _TabsExampleState();
12+
}
13+
14+
class _TabsExampleState extends State<TabsExample> {
15+
@override
16+
Widget build(BuildContext context) {
17+
return ExampleScaffold(
18+
name: TabsExample.name,
19+
child: Column(
20+
children: [
21+
DefaultTabController(
22+
length: 2,
23+
child: ZetaTabBar(
24+
context: context,
25+
tabs: [
26+
ZetaTab(icon: Icon(ZetaIcons.star_round), text: "Tab Item"),
27+
ZetaTab(icon: Icon(ZetaIcons.star_round), text: "Tab Item"),
28+
],
29+
),
30+
),
31+
Padding(
32+
padding: const EdgeInsets.only(top: ZetaSpacing.l),
33+
child: DefaultTabController(
34+
length: 5,
35+
child: ZetaTabBar(
36+
context: context,
37+
isScrollable: true,
38+
tabs: [
39+
ZetaTab(text: "Tab Item"),
40+
ZetaTab(text: "Tab Item"),
41+
ZetaTab(text: "Tab Item"),
42+
ZetaTab(text: "Tab Item"),
43+
ZetaTab(text: "Tab Item"),
44+
],
45+
),
46+
),
47+
),
48+
Padding(
49+
padding: const EdgeInsets.only(top: ZetaSpacing.l),
50+
child: DefaultTabController(
51+
length: 5,
52+
child: ZetaTabBar(
53+
context: context,
54+
isScrollable: true,
55+
enabled: false,
56+
tabs: [
57+
ZetaTab(icon: Icon(ZetaIcons.star_sharp), text: "Tab Item"),
58+
ZetaTab(icon: Icon(ZetaIcons.star_sharp), text: "Tab Item"),
59+
ZetaTab(icon: Icon(ZetaIcons.star_sharp), text: "Tab Item"),
60+
ZetaTab(icon: Icon(ZetaIcons.star_sharp), text: "Tab Item"),
61+
ZetaTab(icon: Icon(ZetaIcons.star_sharp), text: "Tab Item"),
62+
],
63+
),
64+
),
65+
),
66+
],
67+
),
68+
);
69+
}
70+
}

‎example/widgetbook/main.dart

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import 'pages/components/progress_widgetbook.dart';
2222
import 'pages/components/radio_widgetbook.dart';
2323
import 'pages/components/switch_widgetbook.dart';
2424
import 'pages/components/snack_bar_widgetbook.dart';
25+
import 'pages/components/tabs_widgetbook.dart';
2526
import 'pages/theme/color_widgetbook.dart';
2627
import 'pages/theme/radius_widgetbook.dart';
2728
import 'pages/theme/spacing_widgetbook.dart';
@@ -97,6 +98,7 @@ class HotReload extends StatelessWidget {
9798
name: 'Snack Bar',
9899
builder: (context) => snackBarUseCase(context),
99100
),
101+
WidgetbookUseCase(name: 'Tabs', builder: (context) => tabsUseCase(context)),
100102
]..sort((a, b) => a.name.compareTo(b.name)),
101103
),
102104
WidgetbookCategory(

‎example/widgetbook/pages/components/tabs_widgetbook.dart

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import 'package:flutter/material.dart';
2+
import 'package:widgetbook/widgetbook.dart';
3+
import 'package:zeta_flutter/zeta_flutter.dart';
4+
5+
import '../../test/test_components.dart';
6+
7+
Widget tabsUseCase(BuildContext context) {
8+
return WidgetbookTestWidget(
9+
widget: SingleChildScrollView(
10+
child: Column(
11+
children: [
12+
Padding(
13+
padding: const EdgeInsets.only(top: ZetaSpacing.l),
14+
child: DefaultTabController(
15+
length: 2,
16+
child: ZetaTabBar(
17+
context: context,
18+
enabled: context.knobs.boolean(
19+
label: "Enabled",
20+
initialValue: true,
21+
),
22+
tabs: [
23+
ZetaTab(icon: Icon(ZetaIcons.star_round), text: "Tab Item"),
24+
ZetaTab(icon: Icon(ZetaIcons.star_round), text: "Tab Item"),
25+
],
26+
),
27+
),
28+
),
29+
Padding(
30+
padding: const EdgeInsets.only(top: ZetaSpacing.l),
31+
child: DefaultTabController(
32+
length: 5,
33+
child: ZetaTabBar(
34+
context: context,
35+
enabled: context.knobs.boolean(label: "Enabled"),
36+
isScrollable: true,
37+
tabs: [
38+
ZetaTab(text: "Tab Item"),
39+
ZetaTab(text: "Tab Item"),
40+
ZetaTab(text: "Tab Item"),
41+
ZetaTab(text: "Tab Item"),
42+
ZetaTab(text: "Tab Item"),
43+
],
44+
),
45+
),
46+
),
47+
],
48+
),
49+
),
50+
);
51+
}

‎lib/src/components/tabs/tab.dart

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import 'package:flutter/material.dart';
2+
import '../../../zeta_flutter.dart';
3+
4+
/// Defines how the bounds of the selected tab indicator are computed. Intended to be used with [ZetaTabBar].
5+
class ZetaTab extends Tab {
6+
/// Creates a Zeta Design tab bar.
7+
ZetaTab({
8+
Widget? icon,
9+
String? text,
10+
super.key,
11+
}) : super(
12+
child: Row(
13+
mainAxisSize: MainAxisSize.min,
14+
mainAxisAlignment: MainAxisAlignment.center,
15+
children: [
16+
if (icon != null) ...[
17+
const SizedBox(width: ZetaSpacing.s),
18+
icon,
19+
],
20+
if (text != null)
21+
Padding(
22+
padding: icon != null ? const EdgeInsets.only(left: ZetaSpacing.x2) : EdgeInsets.zero,
23+
child: Text(text),
24+
),
25+
if (icon != null) const SizedBox(width: ZetaSpacing.s),
26+
],
27+
),
28+
);
29+
}

‎lib/src/components/tabs/tab_bar.dart

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import 'package:flutter/material.dart';
2+
import '../../../zeta_flutter.dart';
3+
4+
/// A Zeta Design primary tab bar.
5+
class ZetaTabBar extends TabBar {
6+
/// Creates a Zeta Design primary tab bar.
7+
ZetaTabBar({
8+
required BuildContext context,
9+
required List<ZetaTab> super.tabs,
10+
TabAlignment super.tabAlignment = TabAlignment.center,
11+
bool enabled = true,
12+
super.isScrollable,
13+
super.enableFeedback,
14+
super.dragStartBehavior,
15+
super.padding,
16+
super.onTap,
17+
super.key,
18+
}) : super(
19+
indicatorSize: isScrollable ? TabBarIndicatorSize.label : TabBarIndicatorSize.tab,
20+
labelPadding: isScrollable ? null : EdgeInsets.zero,
21+
indicator: UnderlineTabIndicator(
22+
borderSide: BorderSide(
23+
color: Zeta.of(context).colors.primary,
24+
width: enabled ? 4 : 0,
25+
),
26+
borderRadius: ZetaRadius.none,
27+
),
28+
labelStyle: ZetaTextStyles.labelLarge.copyWith(
29+
color: enabled ? Zeta.of(context).colors.textDefault : Zeta.of(context).colors.textDisabled,
30+
),
31+
unselectedLabelStyle: ZetaTextStyles.labelLarge.copyWith(
32+
color: enabled ? Zeta.of(context).colors.textSubtle : Zeta.of(context).colors.textDisabled,
33+
),
34+
);
35+
}

‎lib/zeta_flutter.dart

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,8 @@ export 'src/components/progress/progress_circle.dart';
3232
export 'src/components/radio/radio.dart';
3333
export 'src/components/snack_bar/snack_bar.dart';
3434
export 'src/components/switch/zeta_switch.dart';
35+
export 'src/components/tabs/tab.dart';
36+
export 'src/components/tabs/tab_bar.dart';
3537
export 'src/theme/color_extensions.dart';
3638
export 'src/theme/color_scheme.dart';
3739
export 'src/theme/color_swatch.dart';

0 commit comments

Comments
 (0)