Redesign team detail (#60)

* redesign team detail * remove comments * use circle avatar
canopas · Jun 27, 2024 · 421b9f8 · 421b9f8
1 parent 4a8a07d
commit 421b9f8
Show file tree

Hide file tree

Showing 10 changed files with 242 additions and 122 deletions.
diff --git a/khelo/assets/locales/app_en.arb b/khelo/assets/locales/app_en.arb
@@ -234,6 +234,7 @@
   "team_detail_empty_match_title": "Team hasn't compete with opponent till now.",
   "team_detail_stat_tab_title": "Stat",
   "team_detail_empty_stat_title": "Team's analysis will be shown here based on it's previous matches.",
+  "team_detail_add_member_title": "Add member",
   "team_detail_won_title": "Won({win})",
   "@team_detail_won_title": {
     "description": "Won({win})",

diff --git a/khelo/lib/components/action_bottom_sheet.dart b/khelo/lib/components/action_bottom_sheet.dart
@@ -80,7 +80,7 @@ class BottomSheetAction extends StatelessWidget {
             Expanded(
               child: Text(
                 title,
-                style: AppTextStyle.body1
+                style: AppTextStyle.subtitle2
                     .copyWith(color: context.colorScheme.textPrimary),
               ),
             ),

diff --git a/khelo/lib/components/app_page.dart b/khelo/lib/components/app_page.dart
@@ -1,8 +1,8 @@
 import 'dart:io';
-
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:style/text/app_text_style.dart';
+import 'package:style/widgets/custom_cupertino_navigation_bar.dart';
 
 class AppPage extends StatelessWidget {
   final String? title;
@@ -11,9 +11,10 @@ class AppPage extends StatelessWidget {
   final Widget? leading;
   final Widget? floatingActionButton;
   final Widget? body;
+  final EdgeInsets? padding;
   final bool automaticallyImplyLeading;
   final bool resizeToAvoidBottomInset;
-  final Color? backgroundColor;
+  final Color? appBarBackgroundColor;
 
   const AppPage({
     super.key,
@@ -22,10 +23,11 @@ class AppPage extends StatelessWidget {
     this.actions,
     this.leading,
     this.body,
+    this.padding,
     this.automaticallyImplyLeading = true,
     this.resizeToAvoidBottomInset = true,
     this.floatingActionButton,
-    this.backgroundColor,
+    this.appBarBackgroundColor,
   });
 
   @override
@@ -38,16 +40,16 @@ class AppPage extends StatelessWidget {
   }
 
   Widget _cupertino(BuildContext context) => CupertinoPageScaffold(
-        backgroundColor: backgroundColor,
         resizeToAvoidBottomInset: resizeToAvoidBottomInset,
         navigationBar: (title == null && titleWidget == null) &&
                 actions == null &&
                 leading == null
             ? null
-            : CupertinoNavigationBar(
+            : CustomCupertinoNavigationBar(
                 leading: leading,
+                padding: padding ?? const EdgeInsets.symmetric(horizontal: 8),
+                backgroundColor: appBarBackgroundColor,
                 middle: titleWidget ?? _title(),
-                border: null,
                 trailing: actions == null
                     ? null
                     : actions!.length == 1
@@ -76,14 +78,18 @@ class AppPage extends StatelessWidget {
       );
 
   Widget _material() => Scaffold(
-        backgroundColor: backgroundColor,
         resizeToAvoidBottomInset: resizeToAvoidBottomInset,
         appBar: (title == null && titleWidget == null) &&
                 actions == null &&
                 leading == null
             ? null
             : AppBar(
-                title: titleWidget ?? _title(),
+                backgroundColor: appBarBackgroundColor,
+                toolbarHeight: kToolbarHeight + (padding?.vertical ?? 0),
+                title: Padding(
+                    padding:
+                        padding ?? const EdgeInsets.symmetric(horizontal: 8),
+                    child: titleWidget ?? _title()),
                 actions: actions,
                 leading: leading,
                 automaticallyImplyLeading: automaticallyImplyLeading,

diff --git a/khelo/lib/ui/flow/sign_in/phone_verification/phone_verification_screen.dart b/khelo/lib/ui/flow/sign_in/phone_verification/phone_verification_screen.dart
@@ -1,5 +1,4 @@
 import 'package:flutter/cupertino.dart';
-import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:khelo/components/app_page.dart';
@@ -57,12 +56,11 @@ class _PhoneVerificationScreenState
     _observeActionError(context, ref);
     _observeVerificationComplete();
 
-    return PopScope(
-      canPop: false,
-      child: IntroGradientBackground(
-        child: AppPage(
-          backgroundColor: Colors.transparent,
-          body: Builder(builder: (context) {
+    return AppPage(
+      body: IntroGradientBackground(
+        child: PopScope(
+          canPop: false,
+          child: Builder(builder: (context) {
             return Padding(
               padding: context.mediaQueryPadding +
                   const EdgeInsets.symmetric(horizontal: 16.0),

diff --git a/khelo/lib/ui/flow/sign_in/sign_in_with_phone/sign_in_with_phone_screen.dart b/khelo/lib/ui/flow/sign_in/sign_in_with_phone/sign_in_with_phone_screen.dart
@@ -1,6 +1,5 @@
 import 'package:data/storage/app_preferences.dart';
 import 'package:flutter/cupertino.dart';
-import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:khelo/components/app_page.dart';
@@ -27,10 +26,9 @@ class SignInWithPhoneScreen extends ConsumerWidget {
     _observeOtp(context: context, ref: ref);
     _observeSignInSuccess(context: context, ref: ref);
 
-    return IntroGradientBackground(
-      child: AppPage(
-        backgroundColor: Colors.transparent,
-        body: PopScope(
+    return AppPage(
+      body: IntroGradientBackground(
+        child: PopScope(
           canPop: false,
           child: Builder(builder: (context) {
             return Padding(

diff --git a/khelo/lib/ui/flow/team/detail/components/team_detail_match_content.dart b/khelo/lib/ui/flow/team/detail/components/team_detail_match_content.dart
@@ -17,7 +17,7 @@ class TeamDetailMatchContent extends ConsumerWidget {
 
     if (state.matches != null && state.matches!.isNotEmpty) {
       return ListView.separated(
-        padding: const EdgeInsets.all(16) + context.mediaQueryPadding,
+        padding: const EdgeInsets.all(16),
         itemCount: state.matches?.length ?? 0,
         itemBuilder: (context, index) {
           final match = state.matches![index];

diff --git a/khelo/lib/ui/flow/team/detail/components/team_detail_member_content.dart b/khelo/lib/ui/flow/team/detail/components/team_detail_member_content.dart
@@ -2,7 +2,9 @@ import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:khelo/components/user_detail_cell.dart';
 import 'package:khelo/domain/extensions/context_extensions.dart';
+import 'package:khelo/ui/app_route.dart';
 import 'package:khelo/ui/flow/team/detail/team_detail_view_model.dart';
+import 'package:style/animations/on_tap_scale.dart';
 import 'package:style/extensions/context_extensions.dart';
 import 'package:style/text/app_text_style.dart';
 
@@ -18,10 +20,17 @@ class TeamDetailMemberContent extends ConsumerWidget {
     if (state.team?.players != null &&
         state.team?.players?.isNotEmpty == true) {
       return ListView.separated(
-        padding: context.mediaQueryPadding + const EdgeInsets.all(16),
-        itemCount: state.team!.players!.length,
+        padding: const EdgeInsets.all(16),
+        itemCount: state.team!.players!.length + 1,
         itemBuilder: (context, index) {
-          final member = state.team!.players![index];
+          if (index == 0) {
+            return _addMemberButton(
+              context,
+              onTap: () =>
+                  AppRoute.addTeamMember(team: state.team!).push(context),
+            );
+          }
+          final member = state.team!.players![index - 1];
           return UserDetailCell(
               user: member,
               onTap: () => UserDetailSheet.show(context, member),
@@ -43,4 +52,29 @@ class TeamDetailMemberContent extends ConsumerWidget {
       );
     }
   }
+
+  Widget _addMemberButton(BuildContext context, {required Function() onTap}) {
+    return OnTapScale(
+      onTap: onTap,
+      child: Row(
+        children: [
+          CircleAvatar(
+            radius: 20,
+            backgroundColor: context.colorScheme.containerLow,
+            child: Icon(
+              Icons.add,
+              size: 24,
+              color: context.colorScheme.primary,
+            ),
+          ),
+          const SizedBox(width: 10),
+          Text(
+            context.l10n.team_detail_add_member_title,
+            style: AppTextStyle.subtitle2
+                .copyWith(color: context.colorScheme.primary),
+          )
+        ],
+      ),
+    );
+  }
 }