Merge pull request #87 from tarkalabs/ibrahim/tab-bar

Ibrahim/tab bar
tarkalabs · May 28, 2024 · 5bd4aa8 · 5bd4aa8
2 parents e0572c8 + 2292c47
commit 5bd4aa8
Show file tree

Hide file tree

Showing 5 changed files with 120 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -49,6 +49,7 @@ Tarka UI Kit is a pre-built component library for building Flutter apps. It is b
 - TUISlider
 - TUISnackBar
 - TUISuccessCheckMark
+- TUITabBar
 - TUITag
 - TUIToggleRow
 - TUIToggleSwitch

diff --git a/example/lib/main.dart b/example/lib/main.dart
@@ -175,6 +175,8 @@ class _HomePageState extends State<HomePage> {
   bool _firstRadioButtonState = false;
   bool _secondRadioButtonState = true;
 
+  int _selectedIndexForTab = 2;
+
   @override
   Widget build(BuildContext context) {
     final theme = TUITheme.of(context);
@@ -225,6 +227,9 @@ class _HomePageState extends State<HomePage> {
               size: TUIButtonSize.xs,
               onPressed: () {},
             ),
+            SizedBox(
+              height: 5,
+            ),
             TUIButton(
               label: "Secondary Button",
               iconData: Symbol.chevronDown.value,
@@ -233,27 +238,39 @@ class _HomePageState extends State<HomePage> {
               iconPosition: TUIButtonIconPosition.right,
               onPressed: () {},
             ),
+            SizedBox(
+              height: 5,
+            ),
             TUIButton(
               label: "Outlined Button",
               iconData: Symbol.chevronDown.value,
               type: TUIButtonType.outlined,
               size: TUIButtonSize.m,
               onPressed: () {},
             ),
+            SizedBox(
+              height: 5,
+            ),
             TUIButton(
               label: "Ghost Button",
               iconData: Symbol.chevronDown.value,
               type: TUIButtonType.ghost,
               size: TUIButtonSize.l,
               onPressed: () {},
             ),
+            SizedBox(
+              height: 5,
+            ),
             TUIButton(
               label: "Danger Button",
               iconData: Symbol.chevronDown.value,
               type: TUIButtonType.danger,
               size: TUIButtonSize.l,
               onPressed: () {},
             ),
+            SizedBox(
+              height: 5,
+            ),
             TUIButton(
               iconData: Symbol.hamburgerMenu.value,
               type: TUIButtonType.ghost,
@@ -1455,6 +1472,36 @@ class _HomePageState extends State<HomePage> {
                 print(files);
               },
             ),
+            const SizedBox(height: 8),
+            Text("Tab bar", style: theme.typography.baseBold),
+            const SizedBox(height: 8),
+            TUITabBar(
+                titles: const [
+                  "Tab 1",
+                  "Tab 2",
+                  "Tab 3",
+                ],
+                selectedIndex: _selectedIndexForTab,
+                size: TabBarSize.regular,
+                onPressed: (index) {
+                  setState(() {
+                    _selectedIndexForTab = index;
+                  });
+                }),
+            const SizedBox(height: 8),
+            TUITabBar(
+                titles: const [
+                  "Tab 1",
+                  "Tab 2",
+                  "Tab 3",
+                ],
+                selectedIndex: _selectedIndexForTab,
+                size: TabBarSize.large,
+                onPressed: (index) {
+                  setState(() {
+                    _selectedIndexForTab = index;
+                  });
+                }),
             const SizedBox(height: 100),
           ],
         ),

diff --git a/lib/components/button/button.dart b/lib/components/button/button.dart
@@ -126,14 +126,12 @@ class TUIButton extends StatelessWidget {
       buttonChild = Icon(iconData);
     }
 
-    return Container(
-        margin: const EdgeInsets.all(5),
-        child: TextButton(
-          onPressed: onPressed,
-          onLongPress: onLongPress,
-          style: buttonStyle,
-          child: buttonChild,
-        ));
+    return TextButton(
+      onPressed: onPressed,
+      onLongPress: onLongPress,
+      style: buttonStyle,
+      child: buttonChild,
+    );
   }
 }
 

diff --git a/lib/components/tab_bar/tab_bar.dart b/lib/components/tab_bar/tab_bar.dart
@@ -0,0 +1,65 @@
+import 'package:flutter/material.dart';
+import 'package:tarka_ui/styles/theme.dart';
+
+import '../button/button.dart';
+import '../button/style.dart';
+
+enum TabBarSize { regular, large }
+
+class TUITabBar extends StatelessWidget {
+  final List<String> titles;
+  final int selectedIndex;
+  final TabBarSize size;
+  final Function(int)? onPressed;
+
+  const TUITabBar({
+    super.key,
+    required this.titles,
+    required this.selectedIndex,
+    required this.size,
+    required this.onPressed,
+  });
+
+  Widget _buildItem(int index, String item) {
+    return Padding(
+      padding: EdgeInsets.fromLTRB(index == 0 ? 4 : 2, 4, 2, 4),
+      child: TUIButton(
+        label: item,
+        type: selectedIndex == index
+            ? TUIButtonType.secondary
+            : TUIButtonType.ghost,
+        size: size == TabBarSize.regular ? TUIButtonSize.s : TUIButtonSize.m,
+        onPressed: () {
+          if (onPressed != null) {
+            onPressed!(index);
+          }
+        },
+      ),
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = TUITheme.of(context);
+    final colors = theme.colors;
+
+    return Align(
+      alignment: Alignment.topLeft,
+      child: Container(
+        decoration: ShapeDecoration(
+          color: colors.surfaceVariant,
+          shape: const StadiumBorder(),
+        ),
+        height: size == TabBarSize.regular ? 40 : 48,
+        child: ListView(
+          shrinkWrap: true,
+          scrollDirection: Axis.horizontal,
+          children: List.generate(titles.length, (index) {
+            final item = titles[index];
+            return _buildItem(index, item);
+          }),
+        ),
+      ),
+    );
+  }
+}
diff --git a/lib/tarka_ui.dart b/lib/tarka_ui.dart
@@ -59,6 +59,7 @@ export 'package:tarka_ui/components/selection_card/selection_card.dart';
 export 'package:tarka_ui/components/slider/slider.dart';
 export 'package:tarka_ui/components/snack_bar/snack_bar.dart';
 export 'package:tarka_ui/components/success_check_mark/success_check_mark.dart';
+export 'package:tarka_ui/components/tab_bar/tab_bar.dart';
 export 'package:tarka_ui/components/tag/tag.dart';
 export 'package:tarka_ui/components/textfield/text_field.dart';
 export 'package:tarka_ui/components/toggle_row/toggle_row.dart';