Redesign profile screens (#20)

* redesign profile screens

* added config for image cropper

* use action button

khelo/android/app/src/main/AndroidManifest.xml

@@ -24,6 +24,11 @@
                 <category android:name="android.intent.category.LAUNCHER"/>
             </intent-filter>
         </activity>
+        <!-- configuration for image_cropper package -->
+        <activity
+            android:name="com.yalantis.ucrop.UCropActivity"
+            android:screenOrientation="portrait"
+            android:theme="@style/Theme.AppCompat.Light.NoActionBar"/>
         <!-- Don't delete the meta-data below.
              This is used by the Flutter tool to generate GeneratedPluginRegistrant.java -->
         <meta-data

khelo/assets/locales/app_en.arb

@@ -557,24 +557,24 @@
   "my_stat_stats_stumping_title": " Stumping",
   "@_PROFILE": {
   },
-  "tab_profile_title": "profile",
-  "edit_profile_screen_title": "Edit profile",
+  "tab_profile_title": "Profile",
+  "edit_profile_screen_title": "Edit Profile",
   "edit_profile_select_birth_date_placeholder": "Select your date of birth",
-  "edit_profile_name_placeholder": "NAME",
-  "edit_profile_email_placeholder": "EMAIL",
-  "edit_profile_location_placeholder": "LOCATION",
-  "edit_profile_dob_placeholder": "DOB",
-  "edit_profile_gender_placeholder": "GENDER",
-  "edit_profile_player_role_placeholder": "PLAYER ROLE",
-  "edit_profile_batting_style_placeholder": "BATTING STYLE",
-  "edit_profile_bowling_style_placeholder": "BOWLING STYLE",
+  "edit_profile_name_placeholder": "Name",
+  "edit_profile_email_placeholder": "Email",
+  "edit_profile_location_placeholder": "Location",
+  "edit_profile_dob_placeholder": "Date of birth",
+  "edit_profile_gender_placeholder": "Gender",
+  "edit_profile_player_role_placeholder": "Player role",
+  "edit_profile_batting_style_placeholder": "Batting style",
+  "edit_profile_bowling_style_placeholder": "Bowling style",
   "edit_profile_gender_male_title": "Male",
   "edit_profile_gender_female_title": "Female",
   "edit_profile_gender_other_title": "Other",
-  "edit_profile_save_title": "SAVE",
+  "edit_profile_save_title": "Save",
   "profile_complete_profile_btn_title": "Complete Profile",
-  "profile_complete_your_profile_title": "Complete Your Profile",
-  "profile_complete_profile_description_title": "Enhance your profile by filling in the remaining details. Let's make it more comprehensive and appealing.",
+  "profile_complete_your_profile_title": "Complete your profile",
+  "profile_complete_profile_description": "Enhance your profile by filling in the remaining details. Let's make it more comprehensive and appealing.",
   "image_picker_choose_option_title": "Choose an option.",
   "image_picker_crop_image_title": "Crop Image",
   "batting_style_right_hand_bat_title": "Right hand bat",

khelo/lib/components/action_bottom_sheet.dart

@@ -17,26 +17,29 @@ Future<T?> showActionBottomSheet<T>({
       ),
     ),
     useRootNavigator: useRootNavigator,
+    isScrollControlled: true,
     context: context,
-    builder: (context) => Container(
-      decoration: BoxDecoration(
-        borderRadius: const BorderRadius.vertical(
-          top: Radius.circular(16),
+    builder: (context) => SingleChildScrollView(
+      child: Container(
+        decoration: BoxDecoration(
+          borderRadius: const BorderRadius.vertical(
+            top: Radius.circular(16),
+          ),
+          color: context.colorScheme.surface,
         ),
-        color: context.colorScheme.surface,
-      ),
-      padding: EdgeInsets.only(
-        bottom: context.mediaQueryPadding.bottom,
-      ),
-      child: ColumnBuilder.separated(
-        separatorBuilder: (index) => Divider(
-          height: 0,
-          thickness: 1,
-          color: context.colorScheme.outline,
+        padding: EdgeInsets.only(
+          bottom: context.mediaQueryPadding.bottom,
+        ),
+        child: ColumnBuilder.separated(
+          separatorBuilder: (index) => Divider(
+            height: 0,
+            thickness: 1,
+            color: context.colorScheme.outline,
+          ),
+          itemBuilder: (index) => items[index],
+          itemCount: items.length,
+          mainAxisSize: MainAxisSize.min,
         ),
-        itemBuilder: (index) => items[index],
-        itemCount: items.length,
-        mainAxisSize: MainAxisSize.min,
       ),
     ),
   );
@@ -70,12 +73,13 @@ class BottomSheetAction extends StatelessWidget {
               visible: icon != null,
               child: const SizedBox(width: 20),
             ),
-            Text(
-              title,
-              style: AppTextStyle.subtitle2
-                  .copyWith(color: context.colorScheme.textPrimary),
+            Expanded(
+              child: Text(
+                title,
+                style: AppTextStyle.body1
+                    .copyWith(color: context.colorScheme.textPrimary),
+              ),
             ),
-            const Spacer(),
             Visibility(
               visible: child != null,
               child: child ?? const SizedBox(),

khelo/lib/components/profile_image_avatar.dart

@@ -0,0 +1,107 @@
+import 'package:cached_network_image/cached_network_image.dart';
+import 'package:flutter/cupertino.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:khelo/gen/assets.gen.dart';
+import 'package:style/animations/on_tap_scale.dart';
+import 'package:style/extensions/context_extensions.dart';
+import 'package:style/indicator/progress_indicator.dart';
+
+class ProfileImageAvatar extends StatelessWidget {
+  final double size;
+  final String? imageUrl;
+  final String placeHolderImage;
+  final bool isLoading;
+  final Function() onEditButtonTap;
+
+  const ProfileImageAvatar({
+    super.key,
+    required this.size,
+    this.imageUrl,
+    required this.placeHolderImage,
+    required this.isLoading,
+    required this.onEditButtonTap,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Center(
+      child: SizedBox(
+        height: size,
+        width: size,
+        child: Stack(
+          children: [
+            _roundedImageView(context),
+            _editImageButton(context, onTap: onEditButtonTap)
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget _roundedImageView(BuildContext context) {
+    return Container(
+      height: size,
+      width: size,
+      alignment: Alignment.center,
+      decoration: BoxDecoration(
+          shape: BoxShape.circle,
+          image: imageUrl != null && !isLoading
+              ? DecorationImage(
+                  image: CachedNetworkImageProvider(imageUrl!),
+                  fit: BoxFit.cover)
+              : null,
+          color: context.colorScheme.primary),
+      child: _imagePlaceHolder(context),
+    );
+  }
+
+  Widget? _imagePlaceHolder(BuildContext context) {
+    return imageUrl == null && !isLoading
+        ? SvgPicture.asset(
+            Assets.images.icProfileThin,
+            height: size / 2,
+            width: size / 2,
+            colorFilter: ColorFilter.mode(
+              context.colorScheme.textInversePrimary,
+              BlendMode.srcATop,
+            ),
+          )
+        : isLoading
+            ? AppProgressIndicator(color: context.colorScheme.surface)
+            : null;
+  }
+
+  Widget _editImageButton(
+    BuildContext context, {
+    required Function() onTap,
+  }) {
+    return Align(
+      alignment: Alignment.bottomRight,
+      child: OnTapScale(
+        onTap: onTap,
+        child: Stack(
+          alignment: Alignment.center,
+          children: [
+            Container(
+              height: 32,
+              width: 32,
+              decoration: BoxDecoration(
+                  color: context.colorScheme.surface,
+                  border: Border.all(color: context.colorScheme.textPrimary),
+                  shape: BoxShape.circle),
+            ),
+            SvgPicture.asset(
+              Assets.images.icEdit,
+              height: 18,
+              width: 18,
+              colorFilter: ColorFilter.mode(
+                context.colorScheme.textPrimary,
+                BlendMode.srcATop,
+              ),
+            )
+          ],
+        ),
+      ),
+    );
+  }
+}

khelo/lib/domain/formatter/date_formatter.dart

@@ -2,7 +2,7 @@ import 'package:flutter/cupertino.dart';
 import 'package:intl/intl.dart';
 import 'package:khelo/domain/extensions/context_extensions.dart';
 
-enum DateFormatType { dateAndTime, date, time}
+enum DateFormatType { dateAndTime, date, time, shortDate }
 
 extension DateFormatter on DateTime {
   String format(BuildContext context, DateFormatType type) {
@@ -14,13 +14,12 @@ extension DateFormatter on DateTime {
                 'EEE, dd MMM yyyy ${context.is24HourFormat ? 'HH:mm' : 'hh:mm a'}')
             .format(this);
       case DateFormatType.date:
-        return DateFormat(
-            'EEE, MMM dd yyyy')
-            .format(this);
+        return DateFormat('EEE, MMM dd yyyy').format(this);
       case DateFormatType.time:
-        return DateFormat(
-            context.is24HourFormat ? 'HH:mm' : 'hh:mm a')
+        return DateFormat(context.is24HourFormat ? 'HH:mm' : 'hh:mm a')
             .format(this);
+      case DateFormatType.shortDate:
+        return DateFormat('dd MMM yyyy').format(this);
     }
   }
 }

khelo/lib/ui/flow/main/main_screen.dart

@@ -126,7 +126,7 @@ class _MainScreenState extends ConsumerState<MainScreen>
         TabItem(
           tabIcon: const Icon(Icons.person_outlined),
           tabActiveIcon: const Icon(Icons.person),
-          tabLabel: context.l10n.tab_profile_title,
+          tabLabel: context.l10n.tab_profile_title.toLowerCase(),
           route: '',
           onTap: () {
             _materialPageController.jumpToPage(3);