uco-mobile-poc/lib/app/modules/user_profile/views/user_profile_view.dart

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:get/get.dart';


import '../../../core/constants/app_assets.dart';
import '../../../core/constants/translation_keys.dart';
import '../../../core/utils/SessionCache.dart';
import '../../../core/utils/logs_utils.dart';
import '../../../custom_widgets/custom_app_bar.dart';
import '../../../res/app_colors.dart';
import '../../../routes/app_pages.dart';
import '../controllers/user_profile_controller.dart';

enum meuType { personalDetails, bankAccountDetails, inviteFriends, changePass }

var menuList = [
  {"title": "Personal Details", "icons": AppAssets.ic_manage_account, "type": meuType.personalDetails},
  {"title": "Bank Account Details", "icons": AppAssets.bankDetails, "type": meuType.bankAccountDetails},
  {"title": "Invite Friends to UCO Digital", "icons": AppAssets.inviteFriendsUco, "type": meuType.inviteFriends},
  {"title": "Change Password", "icons": AppAssets.changePassoword, "type": meuType.changePass},
];

class UserProfileView extends GetView<UserProfileController> {
  const UserProfileView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    var name;

    try {
      name = SessionCache.instance.userInfo.name.substring(0, 1);
    } catch (e) {
      name = "SA";
    }

    return responsiveWidget(
      Scaffold(
        appBar: DashBoardAppBar(
          title: TranslationKeys.makeTranslation(TranslationKeys.textMyProfile),
          onBackButtonPressed: () {
            Get.back();
          },
        ),
        body: Padding(
          padding: const EdgeInsets.only(left: 14, right: 21),
          child: GetBuilder<UserProfileController>(builder: (controller) {
            return Column(
              children: [
                const SizedBox(height: 20),
                Align(
                  alignment: Alignment.center,
                  child: Card(
                    color: AppColors.colorGrey200,
                    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(120)),
                    child: Container(
                      width: 130,
                      height: 130,
                      margin: const EdgeInsets.all(12),
                      decoration: BoxDecoration(
                          border: Border.all(color: AppColors.colorGrey900),
                          borderRadius: BorderRadius.circular(120),
                          image: (controller.profilePic?.isEmpty ?? true)
                              ? null
                              : DecorationImage(
                                  image: MemoryImage(
                                    base64Decode(controller.profilePic.value),
                                  ),
                                  fit: BoxFit.cover)),
                      child: Stack(
                        clipBehavior: Clip.none,
                        children: [
                          (controller.profilePic?.isEmpty ?? true) ? Center(child: Text(name)) : const Center(),
                          Positioned(
                              bottom: -17,
                              left: 130 / 2 - 14,
                              child: GestureDetector(
                                onTap: () {
                                  showProfileUpdateSheet();
                                },
                                child: Container(
                                  width: 35,
                                  height: 35,
                                  decoration: BoxDecoration(color: AppColors.white, borderRadius: BorderRadius.circular(120)),
                                  child: const Icon(
                                    Icons.camera_alt_outlined,
                                    color: AppColors.colorPrimary,
                                    size: 18,
                                  ),
                                ),
                              ))
                        ],
                      ),
                    ),
                  ),
                ),
                const SizedBox(
                  height: 20,
                ),
                // const
                ...menuList
                    .map((Map e) => ProfileMenuTile(
                          iconPath: e["icons"]!!,
                          onTap: (title) {
                            dp("Menu", e["type"]);
                            controller.navigateTo(e["type"]);
                          },
                          title: e["title"]!,
                        ))
                    .toList()
              ],
            );
          }),
        ),
      ),
    );
  }
}

class ProfileMenuTile extends StatelessWidget {
  const ProfileMenuTile({
    super.key,
    required this.iconPath,
    required this.title,
    required this.onTap,
  });

  final String iconPath;
  final String title;
  final Function(String) onTap;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: InkWell(
        customBorder: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(12),
        ),
        onTap: () {
          onTap(title);
        },
        child: Container(
          decoration: BoxDecoration(
            border: Border.all(color: AppColors.colorGrey350),
            borderRadius: BorderRadius.circular(8),
          ),
          child: Row(
            children: [
              Padding(
                padding: const EdgeInsets.all(6.0),
                child: Card(
                  elevation: 0.0,
                  color: AppColors.colorGrey200,
                  shape: const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(22))),
                  child: SvgPicture.asset(
                    iconPath,
                    height: 30,
                    width: 30,
                  ),
                ),
              ),
              Text(
                title,
                style: context.textTheme.bodyMedium!.copyWith(fontSize: 13, fontWeight: FontWeight.w400),
              ),
              const Spacer(),
              const Padding(padding: EdgeInsets.all(16.0), child: Icon(Icons.arrow_forward_ios_outlined, size: 15, color: AppColors.colorGrey700))
            ],
          ),
        ),
      ),
    );
  }
}

showProfileUpdateSheet() {
  Get.bottomSheet(
    responsiveWidget(
      GetBuilder<UserProfileController>(builder: (controller) {
        return Stack(
          fit: StackFit.loose,
          children: [
            Align(
              alignment: Alignment.bottomCenter,
              child: Container(
                decoration: BoxDecoration(
                  color: Colors.white,
                  border: Border.all(color: Colors.grey, width: 1),
                  borderRadius: const BorderRadius.only(topLeft: Radius.circular(10), topRight: Radius.circular(10)),
                ),
                margin: const EdgeInsets.symmetric(horizontal: 20),
                padding: const EdgeInsets.only(left: 20, right: 30, top: 20, bottom: 20),
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        const Spacer(),
                        InkWell(
                          onTap: () {
                            Navigator.pop(Get.context!);
                          },
                          child: SvgPicture.asset(AppAssets.ic_cross, width: 15, height: 15),
                        ),
                      ],
                    ),
                    const CircleAvatar(
                      radius: 16,
                      backgroundColor: AppColors.colorGrey300,
                      child: Icon(Icons.camera_alt_outlined, color: AppColors.colorPrimary, size: 15),
                    ),
                    const SizedBox(height: 20),
                    SizedBox(
                      width: 150,
                      child: Text(
                        "Change \nProfile Picture",
                        style: Get.context!.textTheme.bodyMedium!.copyWith(fontSize: 16, fontWeight: FontWeight.w400, color: AppColors.black, height: 2),
                        textAlign: TextAlign.center,
                      ),
                    ),
                    const SizedBox(height: 20),
                    btnTileB("Choose From Photos", () {
                      dp("", "");
                      // controller.updateProfilePic(fromCamera: false);
                    }),
                    btnTileB("Take a photo", () {
                      dp("", "");
                      // controller.updateProfilePic(fromCamera: true);
                    }),
                    btnTileB("Remove Profile Picture", () {
                      dp("", "");
                      controller.removeProfilePic();
                    }, color: Colors.red, textColor: AppColors.white),
                  ],
                ),
              ),
            ),
          ],
        );
      }),
    ),
    useRootNavigator: true,
    backgroundColor: Colors.transparent,
    shape: const RoundedRectangleBorder(borderRadius: BorderRadius.only(topLeft: Radius.circular(10), topRight: Radius.circular(10))),
  );
}

Widget btnTileB(String title, Function() onTap, {Color color = AppColors.E5E9F2, Color textColor = AppColors.c212121}) {
  return GestureDetector(
    onTap: onTap,
    child: SizedBox(
      height: 45,
      width: Get.width,
      child: Card(
        elevation: 0.0,
        color: color,
        child: Center(
            child: Text(
          title,
          style: Get.context!.textTheme.bodyMedium!.copyWith(fontSize: 13, fontWeight: FontWeight.w400, color: textColor),
        )),
      ),
    ),
  );
}