add: profile photo

1 month ago · 232a8ae027
23 changed files with 421 additions and 55 deletions
--- a/assets/images/sample_avatar.png
+++ b/assets/images/sample_avatar.png
--- a/assets/svg/icon_location.svg
+++ b/assets/svg/icon_location.svg
@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.95833 7.79167C4.95833 6.22625 6.22625 4.95833 7.79167 4.95833C9.35708 4.95833 10.625 6.22625 10.625 7.79167C10.625 9.35708 9.35708 10.625 7.79167 10.625C6.22625 10.625 4.95833 9.35708 4.95833 7.79167ZM7.08333 14.1242C5.64692 13.9637 4.30776 13.3196 3.28574 12.2976C2.26373 11.2756 1.61961 9.93641 1.45917 8.5H0.708333C0.31875 8.5 0 8.18125 0 7.79167C0 7.40208 0.31875 7.08333 0.708333 7.08333H1.45917C1.61961 5.64692 2.26373 4.30776 3.28574 3.28574C4.30776 2.26373 5.64692 1.61961 7.08333 1.45917V0.708333C7.08333 0.31875 7.40208 0 7.79167 0C8.18125 0 8.5 0.31875 8.5 0.708333V1.45917C9.93641 1.61961 11.2756 2.26373 12.2976 3.28574C13.3196 4.30776 13.9637 5.64692 14.1242 7.08333H14.875C15.2646 7.08333 15.5833 7.40208 15.5833 7.79167C15.5833 8.18125 15.2646 8.5 14.875 8.5H14.1242C13.9637 9.93641 13.3196 11.2756 12.2976 12.2976C11.2756 13.3196 9.93641 13.9637 8.5 14.1242V14.875C8.5 15.2646 8.18125 15.5833 7.79167 15.5833C7.40208 15.5833 7.08333 15.2646 7.08333 14.875V14.1242ZM12.75 7.79167C12.75 5.05042 10.5329 2.83333 7.79167 2.83333C5.05042 2.83333 2.83333 5.05042 2.83333 7.79167C2.83333 10.5329 5.05042 12.75 7.79167 12.75C10.5329 12.75 12.75 10.5329 12.75 7.79167Z" fill="white"/>
+</svg>
--- a/assets/svg/icon_logout.svg
+++ b/assets/svg/icon_logout.svg
@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 2H16C16.7956 2 17.5587 2.31607 18.1213 2.87868C18.6839 3.44129 19 4.20435 19 5V19C19 19.2652 18.8946 19.5196 18.7071 19.7071C18.5196 19.8946 18.2652 20 18 20H15" stroke="#F6F6F6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 12V14M5 2L12.588 3.518C13.268 3.65392 13.8799 4.02121 14.3197 4.55739C14.7594 5.09358 14.9998 5.76555 15 6.459V20.78C14.9999 20.9279 14.967 21.0739 14.9037 21.2076C14.8404 21.3412 14.7482 21.4592 14.6338 21.5529C14.5194 21.6466 14.3856 21.7138 14.2422 21.7496C14.0987 21.7854 13.949 21.789 13.804 21.76L6.608 20.322C6.15444 20.2313 5.74633 19.9863 5.45314 19.6286C5.15995 19.2708 4.99982 18.8225 5 18.36V2Z" stroke="#F6F6F6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/lib/common_ui/resources/my_assets.dart
+++ b/lib/common_ui/resources/my_assets.dart
@ -30,7 +30,8 @@ class MyAssets {
  static const String friendBattle = 'assets/svg/friend_battle.svg';
  static const String question = 'assets/svg/question.svg';
  static const String introStar = 'assets/svg/intro_star.svg';
-
+  static const String iconLocation = 'assets/svg/icon_location.svg';
+  static const String iconLogout = 'assets/svg/icon_logout.svg';

  /// ----- Audios -----
  static const String sampleAudio = 'assets/audios/sample.mp3';
--- a/lib/core/routers/my_routes.dart
+++ b/lib/core/routers/my_routes.dart
@ -48,25 +48,21 @@ List<GetPage> get appPages => [
        name: Routes.homePage,
        page: () => const HomePage(),
        binding: HomeBinding(),
-        transition: Transition.fadeIn,
      ),
      GetPage(
        name: Routes.shopPage,
        page: () => const ShopPage(),
        binding: ShopBinding(),
-        transition: Transition.fadeIn,
      ),
      GetPage(
        name: Routes.awardsPage,
        page: () => const AwardsPage(),
        binding: AwardsBinding(),
-        transition: Transition.fadeIn,
      ),
      GetPage(
        name: Routes.profilePage,
        page: () => const ProfilePage(),
        binding: ProfileBinding(),
-        transition: Transition.fadeIn,
      ),
    ],
  ),
--- a/lib/core/widgets/background/my_background.dart
+++ b/lib/core/widgets/background/my_background.dart
@ -0,0 +1,25 @@
+import 'package:flutter/material.dart';
+import 'package:shia_game_flutter/common_ui/resources/my_spaces.dart';
+import 'package:shia_game_flutter/common_ui/theme/my_theme.dart';
+
+class MyBackground extends StatelessWidget {
+  const MyBackground({super.key, required this.child});
+
+  final Widget child;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      decoration: BoxDecoration(
+        gradient: RadialGradient(
+          radius: 0.6,
+          colors: [const Color(0xFF321A6D), context.backgroundColor],
+        ),
+      ),
+      child: SingleChildScrollView(
+        padding: EdgeInsets.symmetric(horizontal: MySpaces.s30),
+        child: child,
+      ),
+    );
+  }
+}
--- a/lib/core/widgets/button/my_gradient_button.dart
+++ b/lib/core/widgets/button/my_gradient_button.dart
@ -0,0 +1,45 @@
+import 'package:flutter/material.dart';
+import 'package:shia_game_flutter/common_ui/resources/my_text_style.dart';
+import 'package:shia_game_flutter/core/widgets/container/gradient_container.dart';
+
+class MyGradientButton extends StatelessWidget {
+  const MyGradientButton({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return GradientContainer(
+      height: 32,
+      width: 116,
+      onTap: () {},
+      borderColor: Color(0XFF6D2ADA),
+      borderRadius: BorderRadius.all(Radius.circular(5)),
+      gradient: LinearGradient(
+        begin: AlignmentDirectional.topStart,
+        end: AlignmentDirectional.bottomEnd,
+        colors: [Color(0XFF823FEB), Color(0XFF4F09BF)],
+      ),
+      child: ShaderMask(
+        blendMode: BlendMode.modulate,
+        shaderCallback: (bounds) => LinearGradient(
+          begin: Alignment.topCenter,
+          end: Alignment.bottomCenter,
+          colors: [Color(0XFFFFFFFF), Color(0XFFFFFFFF), Color(0XFF9C8CC2)],
+        ).createShader(bounds),
+        child: Text(
+          'Change Profile',
+          style: Lexend.extraBold.copyWith(
+            fontSize: 12,
+            shadows: [
+              BoxShadow(
+                color: Color(0xFF1B0D31),
+                blurRadius: 0,
+                offset: Offset(0, 1.69),
+                spreadRadius: 0,
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}
--- a/lib/core/widgets/container/gradient_container.dart
+++ b/lib/core/widgets/container/gradient_container.dart
@ -1,11 +1,11 @@
 import 'package:flutter/material.dart';
+import 'package:shia_game_flutter/common_ui/theme/my_theme.dart';

 class GradientContainer extends StatelessWidget {
  const GradientContainer({
    super.key,
    this.width,
    this.height,
-    this.margin,
    this.padding,
    this.shapeBorder,
    this.boxShape,
@ -17,11 +17,11 @@ class GradientContainer extends StatelessWidget {
    this.image,
    this.gradient,
    this.borderColor,
+    this.onTap,
  });

  final double? width;
  final double? height;
-  final EdgeInsetsGeometry? margin;
  final EdgeInsetsGeometry? padding;
  final ShapeBorder? shapeBorder;
  final BoxShape? boxShape;
@ -33,29 +33,38 @@ class GradientContainer extends StatelessWidget {
  final Color? borderColor;
  final Widget? child;
  final DecorationImage? image;
+  final VoidCallback? onTap;

  @override
  Widget build(BuildContext context) {
-    return Container(
+    return Material(
+      color: context.noColor,
+      borderRadius: borderRadius,
+      shadowColor: boxShadow?.first.color,
+      elevation: boxShadow?.first.blurRadius ?? 0,
+      shape: shapeBorder,
+      child: InkWell(
+        onTap: onTap,
+        customBorder: RoundedRectangleBorder(
+          borderRadius: borderRadius ?? BorderRadius.zero,
+        ),
+        child: Ink(
          padding: EdgeInsets.all(1),
          width: width,
          height: height,
-      margin: margin,
          decoration: shapeBorder == null
              ? BoxDecoration(
                  shape: boxShape ?? BoxShape.rectangle,
                  gradient: borderGradient,
                  borderRadius: borderRadius,
-              boxShadow: boxShadow,
                  color: borderColor,
                )
              : ShapeDecoration(
                  shape: shapeBorder!,
                  gradient: borderGradient,
-              shadows: boxShadow,
                  color: borderColor,
                ),
-      child: Container(
+          child: Ink(
            padding: padding,
            decoration: shapeBorder == null
                ? BoxDecoration(
@ -71,7 +80,9 @@ class GradientContainer extends StatelessWidget {
                    color: color,
                    image: image,
                  ),
-        child: child,
+            child: Center(child: child),
+          ),
+        ),
      ),
    );
  }
--- a/lib/core/widgets/input/my_input.dart
+++ b/lib/core/widgets/input/my_input.dart
@ -0,0 +1,91 @@
+import 'package:flutter/material.dart';
+import 'package:shia_game_flutter/common_ui/resources/my_spaces.dart';
+import 'package:shia_game_flutter/common_ui/resources/my_text_style.dart';
+import 'package:shia_game_flutter/common_ui/theme/my_theme.dart';
+
+class MyInput extends StatelessWidget {
+  const MyInput({
+    super.key,
+    this.labelText,
+    this.hintText,
+    this.controller,
+    this.obscureText,
+    this.keyboardType,
+    this.action,
+    this.validator,
+    this.onChanged,
+    this.onTap,
+    this.onEditingComplete,
+    this.onTapOutside,
+    this.enabled,
+    this.readOnly,
+    this.maxLines,
+    this.minLines,
+  });
+
+  final String? labelText;
+  final String? hintText;
+  final TextEditingController? controller;
+  final bool? obscureText;
+  final TextInputType? keyboardType;
+  final TextInputAction? action;
+  final String? Function(String?)? validator;
+  final void Function(String)? onChanged;
+  final void Function()? onTap;
+  final void Function()? onEditingComplete;
+  final void Function(PointerDownEvent)? onTapOutside;
+  final bool? enabled;
+  final bool? readOnly;
+  final int? maxLines;
+  final int? minLines;
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      spacing: MySpaces.s8,
+      children: [
+        if (labelText != null && labelText!.isNotEmpty)
+          Text(
+            labelText ?? '',
+            style: Lexend.bold.copyWith(fontSize: 12),
+          ),
+        TextFormField(
+          controller: controller,
+          obscureText: obscureText ?? false,
+          keyboardType: keyboardType,
+          textInputAction: action,
+          validator: validator,
+          onChanged: onChanged,
+          onTap: onTap,
+          onEditingComplete: onEditingComplete,
+          enabled: enabled,
+          readOnly: readOnly ?? false,
+          maxLines: maxLines,
+          minLines: minLines,
+          style: Lexend.extraBold.copyWith(fontSize: 12),
+          cursorColor: context.primaryColor,
+          decoration: InputDecoration(
+            contentPadding: EdgeInsets.all(MySpaces.s14),
+            enabledBorder: OutlineInputBorder(
+              borderRadius: BorderRadius.all(Radius.circular(12)),
+              borderSide: BorderSide(color: Color(0XFF5715BF), width: 1),
+            ),
+            focusedBorder: OutlineInputBorder(
+              borderRadius: BorderRadius.all(Radius.circular(12)),
+              borderSide: BorderSide(color: Color(0XFF5715BF), width: 1),
+            ),
+            fillColor: Color(0XFF000000).withValues(alpha: 0.2),
+            filled: true,
+            hintText: hintText,
+            hintStyle: Lexend.extraBold.copyWith(fontSize: 12),
+          ),
+          onTapOutside: (event) {
+            FocusManager.instance.primaryFocus?.unfocus();
+            onTapOutside?.call(event);
+          },
+        ),
+      ],
+    );
+  }
+}
--- a/lib/features/home/presentation/pages/home_page.dart
+++ b/lib/features/home/presentation/pages/home_page.dart
@ -1,8 +1,9 @@
-import 'package:flutter/material.dart' hide BoxShadow, BoxDecoration;
+import 'package:flutter/material.dart' ;
 import 'package:get/get.dart';
 import 'package:shia_game_flutter/common_ui/resources/my_assets.dart';
 import 'package:shia_game_flutter/common_ui/resources/my_spaces.dart';
 import 'package:shia_game_flutter/core/utils/gap.dart';
+import 'package:shia_game_flutter/core/widgets/background/my_background.dart';
 import 'package:shia_game_flutter/core/widgets/image/my_image.dart';
 import 'package:shia_game_flutter/features/home/presentation/controller/home_controller.dart';
 import 'package:shia_game_flutter/features/home/presentation/pages/widgets/home_battle_cast.dart';
@ -15,8 +16,7 @@ class HomePage extends GetView<HomeController> {

  @override
  Widget build(BuildContext context) {
-    return SingleChildScrollView(
-      padding: EdgeInsets.symmetric(horizontal: MySpaces.s32),
+    return MyBackground(
      child: Column(
        children: [
          MySpaces.s28.gapHeight,
--- a/lib/features/home/presentation/pages/widgets/home_battle_cast.dart
+++ b/lib/features/home/presentation/pages/widgets/home_battle_cast.dart
@ -20,7 +20,7 @@ class HomeBattleCast extends StatelessWidget {
      children: [
        GradientContainer(
          height: 120,
-          borderRadius: BorderRadiusDirectional.all(Radius.circular(MySpaces.s20)),
+          borderRadius: BorderRadius.all(Radius.circular(MySpaces.s20)),
          borderGradient: LinearGradient(
            begin: AlignmentDirectional.topCenter,
            end: AlignmentDirectional.bottomCenter,
--- a/lib/features/home/presentation/pages/widgets/home_battle_league.dart
+++ b/lib/features/home/presentation/pages/widgets/home_battle_league.dart
@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:shia_game_flutter/common_ui/resources/my_assets.dart';
 import 'package:shia_game_flutter/common_ui/resources/my_spaces.dart';
 import 'package:shia_game_flutter/common_ui/resources/my_text_style.dart';
+import 'package:shia_game_flutter/core/utils/gap.dart';
 import 'package:shia_game_flutter/core/utils/screen_size.dart';
 import 'package:shia_game_flutter/core/widgets/container/gradient_container.dart';
 import 'package:shia_game_flutter/core/widgets/image/my_image.dart';
@ -36,6 +37,7 @@ class HomeBattleLeague extends StatelessWidget {
            mainAxisAlignment: MainAxisAlignment.end,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
+              context.widthScreen.gapWidth,
              ShaderMask(
                blendMode: BlendMode.modulate,
                shaderCallback: (bounds) => LinearGradient(
--- a/lib/features/home/presentation/pages/widgets/home_membership.dart
+++ b/lib/features/home/presentation/pages/widgets/home_membership.dart
@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:shia_game_flutter/common_ui/resources/my_assets.dart';
+import 'package:shia_game_flutter/common_ui/resources/my_colors.dart';
 import 'package:shia_game_flutter/common_ui/resources/my_spaces.dart';
 import 'package:shia_game_flutter/common_ui/resources/my_text_style.dart';
 import 'package:shia_game_flutter/common_ui/theme/my_theme.dart';
@ -28,7 +29,7 @@ class HomeMembership extends StatelessWidget {
      borderRadius: BorderRadius.all(Radius.circular(MySpaces.s20)),
      boxShadow: [
        BoxShadow(
-          color: Color(0x3F000000),
+          color: MyColors.black,
          blurRadius: 17,
          offset: Offset(0, 4),
          spreadRadius: 20,
--- a/lib/features/intro/presentation/ui/intro_page.dart
+++ b/lib/features/intro/presentation/ui/intro_page.dart
@ -24,7 +24,7 @@ class IntroPage extends GetView<IntroController> {
          decoration: BoxDecoration(
            gradient: RadialGradient(
              radius: 0.7,
-              colors: [const Color(0xFF321A6D), const Color(0x00160C30)],
+              colors: [const Color(0xFF321A6D), context.backgroundColor],
            ),
          ),
          child: Stack(
--- a/lib/features/master/presentation/ui/master_page.dart
+++ b/lib/features/master/presentation/ui/master_page.dart
@ -1,5 +1,4 @@
 import 'package:flutter/material.dart';
-import 'package:shia_game_flutter/common_ui/theme/my_theme.dart';
 import 'package:shia_game_flutter/core/routers/my_routes.dart';
 import 'package:shia_game_flutter/core/widgets/app_bar/master_app_bar.dart';
 import 'package:shia_game_flutter/core/widgets/bottom_nav_bar/bottom_nav_bar.dart';
@ -12,7 +11,7 @@ class MasterPage extends GetView<MasterController> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
-      backgroundColor: context.backgroundColor,
+      resizeToAvoidBottomInset: false,
      appBar: MasterAppBar(),
      bottomNavigationBar: BottomNavBar(),
      body: GetRouterOutlet(
--- a/lib/features/profile/presentation/ui/profile_page.dart
+++ b/lib/features/profile/presentation/ui/profile_page.dart
@ -1,14 +1,64 @@
 import 'package:flutter/material.dart';
-import 'package:shia_game_flutter/features/profile/presentation/controller/profile_controller.dart';
 import 'package:get/get.dart';
+import 'package:shia_game_flutter/common_ui/resources/my_spaces.dart';
+import 'package:shia_game_flutter/core/utils/gap.dart';
+import 'package:shia_game_flutter/core/widgets/background/my_background.dart';
+import 'package:shia_game_flutter/core/widgets/button/my_gradient_button.dart';
+import 'package:shia_game_flutter/core/widgets/input/my_input.dart';
+import 'package:shia_game_flutter/features/profile/presentation/controller/profile_controller.dart';
+import 'package:shia_game_flutter/features/profile/presentation/ui/widgets/profile_avatar.dart';
+import 'package:shia_game_flutter/features/profile/presentation/ui/widgets/profile_delete_account.dart';
+import 'package:shia_game_flutter/features/profile/presentation/ui/widgets/profile_location.dart';
+import 'package:shia_game_flutter/features/profile/presentation/ui/widgets/profile_logout.dart';

 class ProfilePage extends GetView<ProfileController> {
  const ProfilePage({super.key});

  @override
  Widget build(BuildContext context) {
-    return const Center(
-      child: Text('Profile Page'),
+    return MyBackground(
+      child: Column(
+        children: [
+          60.0.gapHeight,
+          ProfileAvatar(),
+          MyGradientButton(),
+          MySpaces.s40.gapHeight,
+          MyInput(
+            labelText: 'User Name',
+            hintText: 'Unknown123456',
+          ),
+          MySpaces.s28.gapHeight,
+          _locationInput(),
+          200.0.gapHeight,
+          _bottomButtons(),
+        ],
+      ),
+    );
+  }
+
+  Row _locationInput() {
+    return Row(
+      crossAxisAlignment: CrossAxisAlignment.end,
+      spacing: MySpaces.s10,
+      children: [
+        Expanded(
+          child: MyInput(
+            labelText: 'Your Region',
+            hintText: 'Iran - Tehran',
+          ),
+        ),
+        ProfileLocation(),
+      ],
+    );
+  }
+
+  Row _bottomButtons() {
+    return Row(
+      spacing: MySpaces.s20,
+      children: [
+        Expanded(child: ProfileDeleteAccount()),
+        Expanded(child: ProfileLogout()),
+      ],
    );
  }
 }
--- a/lib/features/profile/presentation/ui/widgets/profile_avatar.dart
+++ b/lib/features/profile/presentation/ui/widgets/profile_avatar.dart
@ -0,0 +1,21 @@
+import 'package:flutter/material.dart';
+import 'package:shia_game_flutter/common_ui/resources/my_assets.dart';
+import 'package:shia_game_flutter/common_ui/theme/my_theme.dart';
+import 'package:shia_game_flutter/core/widgets/image/my_image.dart';
+
+class ProfileAvatar extends StatelessWidget {
+  const ProfileAvatar({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      height: 106,
+      width: 106,
+      decoration: BoxDecoration(
+        shape: BoxShape.circle,
+        border: Border.all(width: 2.5, color: context.primaryColor),
+      ),
+      child: MyImage(asset: MyAssets.sampleAvatar),
+    );
+  }
+}
--- a/lib/features/profile/presentation/ui/widgets/profile_delete_account.dart
+++ b/lib/features/profile/presentation/ui/widgets/profile_delete_account.dart
@ -0,0 +1,39 @@
+import 'package:flutter/material.dart';
+import 'package:shia_game_flutter/common_ui/resources/my_spaces.dart';
+import 'package:shia_game_flutter/common_ui/resources/my_text_style.dart';
+import 'package:shia_game_flutter/common_ui/theme/my_theme.dart';
+import 'package:shia_game_flutter/core/utils/my_localization.dart';
+import 'package:shia_game_flutter/core/widgets/container/gradient_container.dart';
+
+class ProfileDeleteAccount extends StatelessWidget {
+  const ProfileDeleteAccount({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return GradientContainer(
+      height: 58,
+      onTap: () {},
+      borderRadius: BorderRadius.all(Radius.circular(MySpaces.s12)),
+      color: context.backgroundColor,
+      borderGradient: LinearGradient(
+        begin: AlignmentDirectional.centerStart,
+        end: AlignmentDirectional.centerEnd,
+        colors: [
+          Color(0XFF7E94B4).withValues(alpha: 0.3),
+          Color(0XFF304053).withValues(alpha: 0),
+        ],
+      ),
+      padding: EdgeInsets.symmetric(
+        vertical: MySpaces.s16,
+        horizontal: MySpaces.s28,
+      ),
+      child: FittedBox(
+        child: Text(
+          context.translate.delete_account,
+          maxLines: 1,
+          style: Lexend.semiBold.copyWith(fontSize: 14, color: Color(0XFF5F5F88)),
+        ),
+      ),
+    );
+  }
+}
--- a/lib/features/profile/presentation/ui/widgets/profile_location.dart
+++ b/lib/features/profile/presentation/ui/widgets/profile_location.dart
@ -0,0 +1,20 @@
+import 'package:flutter/material.dart';
+import 'package:shia_game_flutter/common_ui/resources/my_assets.dart';
+import 'package:shia_game_flutter/core/widgets/container/gradient_container.dart';
+import 'package:shia_game_flutter/core/widgets/image/my_image.dart';
+
+class ProfileLocation extends StatelessWidget {
+  const ProfileLocation({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return GradientContainer(
+      onTap: () {},
+      width: 48,
+      height: 48,
+      color: Color(0XFF5715BF),
+      borderRadius: BorderRadius.all(Radius.circular(12)),
+      child: MyImage(asset: MyAssets.iconLocation),
+    );
+  }
+}
--- a/lib/features/profile/presentation/ui/widgets/profile_logout.dart
+++ b/lib/features/profile/presentation/ui/widgets/profile_logout.dart
@ -0,0 +1,38 @@
+import 'package:flutter/material.dart';
+import 'package:shia_game_flutter/common_ui/resources/my_assets.dart';
+import 'package:shia_game_flutter/common_ui/resources/my_spaces.dart';
+import 'package:shia_game_flutter/common_ui/resources/my_text_style.dart';
+import 'package:shia_game_flutter/core/utils/my_localization.dart';
+import 'package:shia_game_flutter/core/widgets/container/gradient_container.dart';
+import 'package:shia_game_flutter/core/widgets/image/my_image.dart';
+
+class ProfileLogout extends StatelessWidget {
+  const ProfileLogout({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return GradientContainer(
+      height: 58,
+      onTap: () {},
+      borderRadius: BorderRadius.all(Radius.circular(MySpaces.s12)),
+      color: Color(0XFF270A59),
+      padding: EdgeInsets.symmetric(
+        vertical: MySpaces.s16,
+        horizontal: MySpaces.s28,
+      ),
+      child: Row(
+        spacing: MySpaces.s10,
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: [
+          MyImage(asset: MyAssets.iconLogout),
+          FittedBox(
+            child: Text(
+              context.translate.logout,
+              style: Lexend.semiBold.copyWith(fontSize: 14),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
--- a/lib/l10n/app_en.arb
+++ b/lib/l10n/app_en.arb
@ -7,5 +7,7 @@
  "profile": "Profile",
  "pro_membership": "Pro Membership",
  "custom_league": "Custom League",
-  "friends_battle": "Friends Battle"
+  "friends_battle": "Friends Battle",
+  "logout": "Log out",
+  "delete_account": "Delete Account"
 }
--- a/lib/l10n/app_localizations.dart
+++ b/lib/l10n/app_localizations.dart
@ -141,6 +141,18 @@ abstract class AppLocalizations {
  /// In en, this message translates to:
  /// **'Friends Battle'**
  String get friends_battle;
+
+  /// No description provided for @logout.
+  ///
+  /// In en, this message translates to:
+  /// **'Log out'**
+  String get logout;
+
+  /// No description provided for @delete_account.
+  ///
+  /// In en, this message translates to:
+  /// **'Delete Account'**
+  String get delete_account;
 }

 class _AppLocalizationsDelegate
--- a/lib/l10n/app_localizations_en.dart
+++ b/lib/l10n/app_localizations_en.dart
@ -31,4 +31,10 @@ class AppLocalizationsEn extends AppLocalizations {

  @override
  String get friends_battle => 'Friends Battle';
+
+  @override
+  String get logout => 'Log out';
+
+  @override
+  String get delete_account => 'Delete Account';
 }