From d747fea370ca45357b116d6578ade95b78d038c7 Mon Sep 17 00:00:00 2001 From: cp-mayank-v Date: Thu, 6 Jun 2024 11:55:35 +0530 Subject: [PATCH] Make common tab button --- .../ui/flow/my_game/my_game_tab_screen.dart | 34 +++------------ .../ui/flow/stats/my_stats_tab_screen.dart | 35 +++------------- .../flow/team/detail/team_detail_screen.dart | 37 ++++------------- style/lib/button/tab_button.dart | 41 +++++++++++++++++++ 4 files changed, 58 insertions(+), 89 deletions(-) create mode 100644 style/lib/button/tab_button.dart diff --git a/khelo/lib/ui/flow/my_game/my_game_tab_screen.dart b/khelo/lib/ui/flow/my_game/my_game_tab_screen.dart index a48df035..73d9de48 100644 --- a/khelo/lib/ui/flow/my_game/my_game_tab_screen.dart +++ b/khelo/lib/ui/flow/my_game/my_game_tab_screen.dart @@ -8,11 +8,10 @@ import 'package:khelo/ui/flow/matches/match_list_screen.dart'; import 'package:khelo/ui/flow/my_game/my_game_tab_view_model.dart'; import 'package:khelo/ui/flow/team/team_list_screen.dart'; import 'package:khelo/ui/flow/team/team_list_view_model.dart'; -import 'package:style/animations/on_tap_scale.dart'; import 'package:style/button/action_button.dart'; import 'package:style/button/large_icon_button.dart'; +import 'package:style/button/tab_button.dart'; import 'package:style/extensions/context_extensions.dart'; -import 'package:style/text/app_text_style.dart'; class MyGameTabScreen extends ConsumerStatefulWidget { const MyGameTabScreen({super.key}); @@ -109,17 +108,17 @@ class _MyGameTabScreenState extends ConsumerState padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8), child: Row( children: [ - _tabButton( + TabButton( context.l10n.common_matches_title, - _selectedTab == 0, + selected: _selectedTab == 0, onTap: () { _controller.jumpToPage(0); }, ), const SizedBox(width: 8), - _tabButton( + TabButton( context.l10n.my_game_teams_tab_title, - _selectedTab == 1, + selected: _selectedTab == 1, onTap: () { _controller.jumpToPage(1); }, @@ -141,29 +140,6 @@ class _MyGameTabScreenState extends ConsumerState ); } - Widget _tabButton(String title, bool selected, {VoidCallback? onTap}) { - return OnTapScale( - onTap: onTap, - child: Container( - padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8), - decoration: BoxDecoration( - color: selected - ? context.colorScheme.primary - : context.colorScheme.containerLow, - borderRadius: BorderRadius.circular(56), - ), - child: Text( - title, - style: AppTextStyle.body2.copyWith( - color: selected - ? context.colorScheme.onPrimary - : context.colorScheme.textSecondary, - ), - ), - ), - ); - } - Widget _floatingAddButton( BuildContext context, ) { diff --git a/khelo/lib/ui/flow/stats/my_stats_tab_screen.dart b/khelo/lib/ui/flow/stats/my_stats_tab_screen.dart index a12cacbf..90ad0a57 100644 --- a/khelo/lib/ui/flow/stats/my_stats_tab_screen.dart +++ b/khelo/lib/ui/flow/stats/my_stats_tab_screen.dart @@ -5,9 +5,7 @@ import 'package:khelo/domain/extensions/context_extensions.dart'; import 'package:khelo/ui/flow/stats/my_stats_tab_view_model.dart'; import 'package:khelo/ui/flow/stats/user_match/user_match_list_screen.dart'; import 'package:khelo/ui/flow/stats/user_stat/user_stat_screen.dart'; -import 'package:style/animations/on_tap_scale.dart'; -import 'package:style/extensions/context_extensions.dart'; -import 'package:style/text/app_text_style.dart'; +import 'package:style/button/tab_button.dart'; class MyStatsTabScreen extends ConsumerStatefulWidget { const MyStatsTabScreen({super.key}); @@ -98,17 +96,17 @@ class _MyStatsTabScreenState extends ConsumerState padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8), child: Row( children: [ - _tabButton( + TabButton( context.l10n.common_matches_title, - _selectedTab == 0, + selected: _selectedTab == 0, onTap: () { _controller.jumpToPage(0); }, ), const SizedBox(width: 8), - _tabButton( + TabButton( context.l10n.tab_stats_title, - _selectedTab == 1, + selected: _selectedTab == 1, onTap: () { _controller.jumpToPage(1); }, @@ -117,27 +115,4 @@ class _MyStatsTabScreenState extends ConsumerState ), ); } - - Widget _tabButton(String title, bool selected, {VoidCallback? onTap}) { - return OnTapScale( - onTap: onTap, - child: Container( - padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8), - decoration: BoxDecoration( - color: selected - ? context.colorScheme.primary - : context.colorScheme.containerLow, - borderRadius: BorderRadius.circular(56), - ), - child: Text( - title, - style: AppTextStyle.body2.copyWith( - color: selected - ? context.colorScheme.onPrimary - : context.colorScheme.textSecondary, - ), - ), - ), - ); - } } diff --git a/khelo/lib/ui/flow/team/detail/team_detail_screen.dart b/khelo/lib/ui/flow/team/detail/team_detail_screen.dart index 739386d0..e4d87178 100644 --- a/khelo/lib/ui/flow/team/detail/team_detail_screen.dart +++ b/khelo/lib/ui/flow/team/detail/team_detail_screen.dart @@ -9,8 +9,8 @@ import 'package:khelo/domain/formatter/date_formatter.dart'; import 'package:khelo/ui/app_route.dart'; import 'package:khelo/ui/flow/team/detail/components/team_detail_member_content.dart'; import 'package:khelo/ui/flow/team/detail/team_detail_view_model.dart'; -import 'package:style/animations/on_tap_scale.dart'; import 'package:style/button/action_button.dart'; +import 'package:style/button/tab_button.dart'; import 'package:style/extensions/context_extensions.dart'; import 'package:style/indicator/progress_indicator.dart'; import 'package:style/text/app_text_style.dart'; @@ -129,25 +129,25 @@ class _TeamDetailScreenState extends ConsumerState { padding: const EdgeInsets.symmetric(horizontal: 16.0), child: Row( children: [ - _tabButton( + TabButton( context.l10n.team_detail_match_tab_title, - _selectedTab == 0, + selected: _selectedTab == 0, onTap: () { _controller.jumpToPage(0); }, ), const SizedBox(width: 8), - _tabButton( + TabButton( context.l10n.team_detail_member_tab_title, - _selectedTab == 1, + selected: _selectedTab == 1, onTap: () { _controller.jumpToPage(1); }, ), const SizedBox(width: 8), - _tabButton( + TabButton( context.l10n.team_detail_stat_tab_title, - _selectedTab == 2, + selected: _selectedTab == 2, onTap: () { _controller.jumpToPage(2); }, @@ -166,29 +166,6 @@ class _TeamDetailScreenState extends ConsumerState { ); } - Widget _tabButton(String title, bool selected, {VoidCallback? onTap}) { - return OnTapScale( - onTap: onTap, - child: Container( - padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8), - decoration: BoxDecoration( - color: selected - ? context.colorScheme.primary - : context.colorScheme.containerLow, - borderRadius: BorderRadius.circular(56), - ), - child: Text( - title, - style: AppTextStyle.body2.copyWith( - color: selected - ? context.colorScheme.onPrimary - : context.colorScheme.textSecondary, - ), - ), - ), - ); - } - Widget _content(BuildContext context) { return Expanded( child: PageView( diff --git a/style/lib/button/tab_button.dart b/style/lib/button/tab_button.dart new file mode 100644 index 00000000..7e52a370 --- /dev/null +++ b/style/lib/button/tab_button.dart @@ -0,0 +1,41 @@ +import 'package:flutter/material.dart'; +import 'package:style/animations/on_tap_scale.dart'; +import 'package:style/extensions/context_extensions.dart'; +import 'package:style/text/app_text_style.dart'; + +class TabButton extends StatelessWidget { + final Function() onTap; + final String text; + final bool selected; + + const TabButton( + this.text, { + super.key, + required this.onTap, + this.selected = false, + }); + + @override + Widget build(BuildContext context) { + return OnTapScale( + onTap: onTap, + child: Container( + padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8), + decoration: BoxDecoration( + color: selected + ? context.colorScheme.primary + : context.colorScheme.containerLow, + borderRadius: BorderRadius.circular(30), + ), + child: Text( + text, + style: AppTextStyle.body2.copyWith( + color: selected + ? context.colorScheme.onPrimary + : context.colorScheme.textSecondary, + ), + ), + ), + ); + } +}