diff --git a/README.md b/README.md index 976336c..2a5efe3 100644 --- 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 index 7939546..e19300e 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -175,6 +175,8 @@ class _HomePageState extends State { 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 { size: TUIButtonSize.xs, onPressed: () {}, ), + SizedBox( + height: 5, + ), TUIButton( label: "Secondary Button", iconData: Symbol.chevronDown.value, @@ -233,6 +238,9 @@ class _HomePageState extends State { iconPosition: TUIButtonIconPosition.right, onPressed: () {}, ), + SizedBox( + height: 5, + ), TUIButton( label: "Outlined Button", iconData: Symbol.chevronDown.value, @@ -240,6 +248,9 @@ class _HomePageState extends State { size: TUIButtonSize.m, onPressed: () {}, ), + SizedBox( + height: 5, + ), TUIButton( label: "Ghost Button", iconData: Symbol.chevronDown.value, @@ -247,6 +258,9 @@ class _HomePageState extends State { size: TUIButtonSize.l, onPressed: () {}, ), + SizedBox( + height: 5, + ), TUIButton( label: "Danger Button", iconData: Symbol.chevronDown.value, @@ -254,6 +268,9 @@ class _HomePageState extends State { size: TUIButtonSize.l, onPressed: () {}, ), + SizedBox( + height: 5, + ), TUIButton( iconData: Symbol.hamburgerMenu.value, type: TUIButtonType.ghost, @@ -1455,6 +1472,36 @@ class _HomePageState extends State { 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 index a982e01..0ef4e04 100644 --- 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 new file mode 100644 index 0000000..977de4e --- /dev/null +++ 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 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 index 74afc84..3bc957b 100644 --- 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';