Feat: done slicing page Profile
This commit is contained in:
orangdeso
parent
59a0193af1
commit
31e49efa3a
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7.29167 1.6665C4.99799 1.6665 3.125 3.53949 3.125 5.83317C3.125 8.12685 4.99799 9.99984 7.29167 9.99984C8.91827 9.99984 10.4868 9.02318 11.7049 8.10286C12.923 7.18255 13.7882 6.26123 13.7882 6.26123C13.8972 6.14532 13.9578 5.99224 13.9578 5.83317C13.9578 5.6741 13.8972 5.52102 13.7882 5.40511C13.7882 5.40511 12.923 4.48379 11.7049 3.56348C10.4868 2.64316 8.91827 1.6665 7.29167 1.6665ZM7.29167 2.9165C8.3734 2.9165 9.82565 3.71068 10.9513 4.5612C11.7936 5.19761 12.1142 5.55323 12.3934 5.83317C12.1142 6.11311 11.7936 6.46873 10.9513 7.10514C9.82565 7.95566 8.3734 8.74984 7.29167 8.74984C5.67368 8.74984 4.375 7.45116 4.375 5.83317C4.375 4.21518 5.67368 2.9165 7.29167 2.9165ZM14.5833 9.99984C12.0521 9.99984 10 12.0519 10 14.5832C10 17.1144 12.0521 19.1665 14.5833 19.1665C17.1146 19.1665 19.1667 17.1144 19.1667 14.5832C19.1667 12.0519 17.1146 9.99984 14.5833 9.99984ZM14.5833 11.2498C14.8133 11.2498 15 11.4365 15 11.6665V14.1665H17.5C17.73 14.1665 17.9167 14.3532 17.9167 14.5832C17.9167 14.8132 17.73 14.9998 17.5 14.9998H15V17.4998C15 17.7298 14.8133 17.9165 14.5833 17.9165C14.3533 17.9165 14.1667 17.7298 14.1667 17.4998V14.9998H11.6667C11.4367 14.9998 11.25 14.8132 11.25 14.5832C11.25 14.3532 11.4367 14.1665 11.6667 14.1665H14.1667V11.6665C14.1667 11.4365 14.3533 11.2498 14.5833 11.2498ZM2.80111 11.6665C1.94611 11.6665 1.25 12.4101 1.25 13.3242V13.9582C1.25 15.3253 1.95641 16.5133 3.23975 17.3029C4.31933 17.9675 5.75833 18.3332 7.29167 18.3332C8.355 18.3332 9.36934 18.1533 10.2531 17.8237C9.99976 17.4862 9.78182 17.1212 9.61182 16.7292C8.88807 16.9654 8.08083 17.0832 7.29167 17.0832C4.98375 17.0832 2.5 16.1053 2.5 13.9582V13.3242C2.5 13.103 2.63819 12.9165 2.80111 12.9165H9.43197C9.57613 12.4715 9.77771 12.0532 10.026 11.6665H2.80111Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10 1.6665C8.16642 1.6665 6.66667 3.16626 6.66667 4.99984V6.6665H5.20833C4.18021 6.6665 3.33333 7.51338 3.33333 8.5415V16.4582C3.33333 17.4863 4.18021 18.3332 5.20833 18.3332H14.7917C15.8198 18.3332 16.6667 17.4863 16.6667 16.4582V8.5415C16.6667 7.51338 15.8198 6.6665 14.7917 6.6665H13.3333V4.99984C13.3333 3.16626 11.8336 1.6665 10 1.6665ZM10 2.9165C11.1581 2.9165 12.0833 3.84175 12.0833 4.99984V6.6665H7.91667V4.99984C7.91667 3.84175 8.84191 2.9165 10 2.9165ZM5.20833 7.9165H14.7917C15.1444 7.9165 15.4167 8.1888 15.4167 8.5415V16.4582C15.4167 16.8109 15.1444 17.0832 14.7917 17.0832H5.20833C4.85563 17.0832 4.58333 16.8109 4.58333 16.4582V8.5415C4.58333 8.1888 4.85563 7.9165 5.20833 7.9165ZM10 11.2498C9.66848 11.2498 9.35054 11.3815 9.11612 11.616C8.8817 11.8504 8.75 12.1683 8.75 12.4998C8.75 12.8314 8.8817 13.1493 9.11612 13.3837C9.35054 13.6181 9.66848 13.7498 10 13.7498C10.3315 13.7498 10.6495 13.6181 10.8839 13.3837C11.1183 13.1493 11.25 12.8314 11.25 12.4998C11.25 12.1683 11.1183 11.8504 10.8839 11.616C10.6495 11.3815 10.3315 11.2498 10 11.2498Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10 1.6665C5.40512 1.6665 1.66667 5.40496 1.66667 9.99984C1.66667 14.5947 5.40512 18.3332 10 18.3332C12.6454 18.3332 15.0065 17.0928 16.5316 15.1667C16.5829 15.1024 16.6211 15.0286 16.6438 14.9495C16.6666 14.8704 16.6735 14.7876 16.6642 14.7059C16.6549 14.6241 16.6296 14.545 16.5896 14.473C16.5496 14.4011 16.4959 14.3378 16.4314 14.2867C16.3669 14.2356 16.2929 14.1977 16.2137 14.1752C16.1346 14.1528 16.0518 14.1462 15.97 14.1558C15.8883 14.1654 15.8093 14.1911 15.7375 14.2313C15.6657 14.2716 15.6026 14.3256 15.5518 14.3903C14.2535 16.03 12.2554 17.0832 10 17.0832C6.08071 17.0832 2.91667 13.9191 2.91667 9.99984C2.91667 6.08055 6.08071 2.9165 10 2.9165C12.2554 2.9165 14.2535 3.96967 15.5518 5.60938C15.6026 5.67407 15.6657 5.72809 15.7375 5.76833C15.8093 5.80857 15.8883 5.83424 15.97 5.84387C16.0518 5.8535 16.1346 5.84689 16.2137 5.82444C16.2929 5.80198 16.3669 5.76412 16.4314 5.71301C16.4959 5.66191 16.5496 5.59857 16.5896 5.52663C16.6296 5.4547 16.6549 5.37558 16.6642 5.29382C16.6735 5.21206 16.6666 5.12927 16.6438 5.05019C16.6211 4.97111 16.5829 4.89731 16.5316 4.83301C15.0065 2.90687 12.6454 1.6665 10 1.6665ZM15.2018 6.86833C15.0774 6.86836 14.9559 6.9055 14.8527 6.97499C14.7496 7.04449 14.6695 7.14318 14.6227 7.25845C14.576 7.37371 14.5647 7.5003 14.5903 7.62202C14.6159 7.74375 14.6772 7.85506 14.7664 7.94173L16.1987 9.37402L7.70915 9.3667C7.62633 9.36543 7.54409 9.38062 7.4672 9.41141C7.39031 9.44219 7.3203 9.48795 7.26125 9.54603C7.2022 9.6041 7.15527 9.67334 7.12321 9.7497C7.09114 9.82607 7.07458 9.90805 7.07447 9.99087C7.07436 10.0737 7.09072 10.1557 7.12258 10.2322C7.15445 10.3086 7.20119 10.378 7.26009 10.4362C7.31899 10.4944 7.38888 10.5404 7.46569 10.5714C7.5425 10.6023 7.6247 10.6178 7.70752 10.6167L16.2004 10.624L14.7664 12.0579C14.7065 12.1155 14.6586 12.1845 14.6256 12.2608C14.5926 12.3372 14.5752 12.4193 14.5743 12.5025C14.5735 12.5856 14.5892 12.6681 14.6207 12.7451C14.6521 12.8221 14.6986 12.892 14.7574 12.9508C14.8162 13.0096 14.8861 13.0561 14.9631 13.0875C15.0401 13.1189 15.1226 13.1347 15.2057 13.1339C15.2888 13.133 15.371 13.1156 15.4473 13.0826C15.5237 13.0496 15.5926 13.0017 15.6502 12.9417L18.1502 10.4417C18.2674 10.3245 18.3332 10.1656 18.3332 9.99984C18.3332 9.8341 18.2674 9.67516 18.1502 9.55794L15.6502 7.05794C15.592 6.99795 15.5223 6.95025 15.4452 6.91768C15.3682 6.88511 15.2854 6.86833 15.2018 6.86833Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.4 KiB |
|
|
@ -67,6 +67,34 @@ class HomeAppbarComponent extends StatelessWidget implements PreferredSizeWidget
|
|||
Size get preferredSize => Size.fromHeight(kToolbarHeight);
|
||||
}
|
||||
|
||||
class BasicAppbarComponent extends StatelessWidget implements PreferredSizeWidget {
|
||||
final String title;
|
||||
final Color backgroundColors;
|
||||
final Color? textColor;
|
||||
|
||||
const BasicAppbarComponent({
|
||||
Key? key,
|
||||
required this.title,
|
||||
this.backgroundColors = PrimaryColors.primary800,
|
||||
this.textColor,
|
||||
}) : super(key: key);
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return AppBar(
|
||||
backgroundColor: backgroundColors,
|
||||
elevation: 0,
|
||||
title: TypographyStyles.h6(
|
||||
title,
|
||||
color: textColor ?? Colors.white,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
Size get preferredSize => Size.fromHeight(kToolbarHeight);
|
||||
}
|
||||
|
||||
class DefaultAppbarComponent extends StatelessWidget implements PreferredSizeWidget {
|
||||
final String title;
|
||||
final Color backgroundColors;
|
||||
|
|
|
|||
|
|
@ -48,6 +48,9 @@ class CustomeIcons {
|
|||
static SvgPicture RefreshOutline({double? size, Color? color}) => getIcon('ic_refresh', color: color);
|
||||
static SvgPicture RunningOutline({double? size, Color? color}) => getIcon('ic_running', color: color);
|
||||
static SvgPicture VIPFilled({double? size, Color? color}) => getIcon('ic_vip', color: color);
|
||||
static SvgPicture LockFilled({double? size, Color? color}) => getIcon('ic_lock', color: color);
|
||||
static SvgPicture AddUserFemaleFilled({double? size, Color? color}) => getIcon('ic_add_user_female', color: color);
|
||||
static SvgPicture LogoutFilled({double? size, Color? color}) => getIcon('ic_logout', color: color);
|
||||
|
||||
static SvgPicture FlightSeatFilled({double? size, Color? color}) => getIcon('ic_flight_seat_filled', color: color);
|
||||
static SvgPicture PlaneRightFilled({double? size, Color? color}) => getIcon('ic_plane_filled', color: color);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,43 @@
|
|||
// ignore_for_file: deprecated_member_use
|
||||
|
||||
import 'package:e_porter/_core/component/icons/icons_library.dart';
|
||||
import 'package:e_porter/_core/constants/colors.dart';
|
||||
import 'package:e_porter/_core/constants/typography.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_screenutil/flutter_screenutil.dart';
|
||||
import 'package:flutter_svg/flutter_svg.dart';
|
||||
import 'package:zoom_tap_animation/zoom_tap_animation.dart';
|
||||
|
||||
class ProfileMenu extends StatelessWidget {
|
||||
final String label;
|
||||
final String svgIcon;
|
||||
final VoidCallback? onTap;
|
||||
|
||||
const ProfileMenu({
|
||||
Key? key,
|
||||
required this.label,
|
||||
required this.svgIcon,
|
||||
this.onTap,
|
||||
}) : super(key: key);
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return ZoomTapAnimation(
|
||||
child: GestureDetector(
|
||||
onTap: onTap,
|
||||
child: Row(
|
||||
children: [
|
||||
CircleAvatar(
|
||||
radius: 24.r,
|
||||
backgroundColor: PrimaryColors.primary800,
|
||||
child: SvgPicture.asset(svgIcon, color: Colors.white, width: 20.w, height: 20.h),
|
||||
),
|
||||
SizedBox(width: 20.w),
|
||||
Expanded(child: TypographyStyles.body(label, color: GrayColors.gray800, fontWeight: FontWeight.w500)),
|
||||
CustomeIcons.MoreThanOutline(),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,9 +1,12 @@
|
|||
import 'package:e_porter/_core/component/appbar/appbar_component.dart';
|
||||
import 'package:e_porter/_core/component/card/custome_shadow_cotainner.dart';
|
||||
import 'package:e_porter/_core/constants/typography.dart';
|
||||
import 'package:e_porter/presentation/screens/home/component/profile_avatar.dart';
|
||||
import 'package:e_porter/presentation/screens/profile/component/profile_menu.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_screenutil/flutter_screenutil.dart';
|
||||
|
||||
import '../../../../_core/constants/colors.dart';
|
||||
import '../../../../_core/constants/typography.dart';
|
||||
|
||||
|
||||
|
||||
class ProfileScreen extends StatefulWidget {
|
||||
const ProfileScreen({super.key});
|
||||
|
|
@ -17,8 +20,76 @@ class _ProfileScreenState extends State<ProfileScreen> {
|
|||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
backgroundColor: GrayColors.gray50,
|
||||
body: Center(
|
||||
child: TypographyStyles.h4('Profile'),
|
||||
appBar: BasicAppbarComponent(title: 'Profil'),
|
||||
body: SafeArea(
|
||||
child: Padding(
|
||||
padding: EdgeInsets.symmetric(vertical: 20.h),
|
||||
child: SingleChildScrollView(
|
||||
child: Column(
|
||||
children: [
|
||||
CustomeShadowCotainner(
|
||||
borderRadius: BorderRadius.circular(0.r),
|
||||
child: Row(
|
||||
children: [
|
||||
ProfileAvatar(fullName: 'fullName'),
|
||||
SizedBox(width: 16.w),
|
||||
Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
TypographyStyles.caption('Hi,', color: GrayColors.gray600, fontWeight: FontWeight.w400),
|
||||
TypographyStyles.body('Muhammad Al Kahfi', color: GrayColors.gray800),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
SizedBox(height: 20.h),
|
||||
CustomeShadowCotainner(
|
||||
borderRadius: BorderRadius.circular(0.r),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
TypographyStyles.h6('Pengaturan', color: GrayColors.gray800),
|
||||
SizedBox(height: 32.h),
|
||||
ProfileMenu(
|
||||
label: 'Lihat Profile',
|
||||
svgIcon: 'assets/icons/ic_profile.svg',
|
||||
onTap: () {},
|
||||
),
|
||||
Padding(
|
||||
padding: EdgeInsets.symmetric(vertical: 20.h),
|
||||
child: Divider(thickness: 1, color: GrayColors.gray100),
|
||||
),
|
||||
ProfileMenu(
|
||||
label: 'Ganti Kata Sandi',
|
||||
svgIcon: 'assets/icons/ic_lock.svg',
|
||||
onTap: () {},
|
||||
),
|
||||
Padding(
|
||||
padding: EdgeInsets.symmetric(vertical: 20.h),
|
||||
child: Divider(thickness: 1, color: GrayColors.gray100),
|
||||
),
|
||||
ProfileMenu(
|
||||
label: 'Tambah Penumpang',
|
||||
svgIcon: 'assets/icons/ic_add_user_female.svg',
|
||||
onTap: () {},
|
||||
),
|
||||
Padding(
|
||||
padding: EdgeInsets.symmetric(vertical: 20.h),
|
||||
child: Divider(thickness: 1, color: GrayColors.gray100),
|
||||
),
|
||||
ProfileMenu(
|
||||
label: 'Logout',
|
||||
svgIcon: 'assets/icons/ic_logout.svg',
|
||||
onTap: () {},
|
||||
),
|
||||
],
|
||||
),
|
||||
)
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue