apksel-dev/apskel-owner-flutter
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update profile

Browse Source
This commit is contained in:
efrilm 2025-08-13 00:02:35 +07:00
parent 138640d47d
commit 644531500d
4 changed files with 367 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
lib/presentation/pages/home/home_page.dart
View File

@ -106,7 +106,11 @@ class _HomePageState extends State<HomePage> with TickerProviderStateMixin {
], ],
), ),
), ),
titlePadding: const EdgeInsets.only(left: 16, bottom: 16), titlePadding: const EdgeInsets.only(
left: 20,
right: 12,
bottom: 16,
),
background: AnimatedBuilder( background: AnimatedBuilder(
animation: _headerAnimationController, animation: _headerAnimationController,
builder: (context, child) { builder: (context, child) {

101
lib/presentation/pages/profile/profile_page.dart
View File

@ -1,7 +1,9 @@
import 'package:auto_route/auto_route.dart'; import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:line_icons/line_icons.dart';
import '../../../common/theme/theme.dart'; import '../../../common/theme/theme.dart';
import '../../components/button/button.dart';
import '../../components/spacer/spacer.dart'; import '../../components/spacer/spacer.dart';
import 'widgets/account_info.dart'; import 'widgets/account_info.dart';
import 'widgets/app_setting.dart'; import 'widgets/app_setting.dart';
@ -23,43 +25,76 @@ class _ProfilePageState extends State<ProfilePage> {
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Scaffold( return Scaffold(
backgroundColor: AppColor.background, backgroundColor: AppColor.background,
appBar: AppBar( body: CustomScrollView(
title: Text( slivers: [
'Profile', SliverAppBar(
style: AppStyle.xxl.copyWith( backgroundColor: AppColor.primary,
color: AppColor.textWhite, elevation: 0,
fontWeight: FontWeight.w600, pinned: true,
expandedHeight: 264.0,
flexibleSpace: LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
// Calculate the collapse ratio
final double top = constraints.biggest.height;
final double collapsedHeight =
MediaQuery.of(context).padding.top + kToolbarHeight;
final double expandedHeight = 264.0;
final double shrinkRatio =
((expandedHeight - top) /
(expandedHeight - collapsedHeight))
.clamp(0.0, 1.0);
return FlexibleSpaceBar(
background: ProfileHeader(),
titlePadding: const EdgeInsets.only(
left: 20,
right: 12,
bottom: 16,
),
title: Opacity(
opacity: shrinkRatio,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'Profile',
style: AppStyle.xl.copyWith(
fontWeight: FontWeight.w700,
fontSize: 18,
letterSpacing: -0.5,
color: AppColor.white,
),
),
ActionIconButton(
onTap: () {},
icon: LineIcons.userEdit,
),
],
),
),
);
},
),
), ),
), SliverToBoxAdapter(
backgroundColor: AppColor.primary, child: Column(
elevation: 0, children: [
actions: [ const SpaceHeight(20),
IconButton( ProfileAccountInfo(),
icon: const Icon(Icons.edit, color: AppColor.textWhite), const SpaceHeight(12),
onPressed: () { ProfileBusinessSetting(),
// Navigate to edit profile const SpaceHeight(12),
}, ProfileAppSetting(),
const SpaceHeight(12),
ProfileSupport(),
const SpaceHeight(12),
ProfileDangerZone(),
const SpaceHeight(30),
],
),
), ),
], ],
), ),
body: SingleChildScrollView(
child: Column(
children: [
ProfileHeader(),
const SpaceHeight(20),
ProfileAccountInfo(),
const SpaceHeight(12),
ProfileBusinessSetting(),
const SpaceHeight(12),
ProfileAppSetting(),
const SpaceHeight(12),
ProfileSupport(),
const SpaceHeight(12),
ProfileDangerZone(),
const SpaceHeight(30),
],
),
),
); );
} }
} }

55
lib/presentation/pages/profile/widgets/app_setting.dart
View File

@ -2,7 +2,6 @@ import 'package:flutter/material.dart';
import '../../../../common/theme/theme.dart'; import '../../../../common/theme/theme.dart';
import 'divider.dart'; import 'divider.dart';
import 'profile_switch_tile.dart';
import 'profile_tile.dart'; import 'profile_tile.dart';
class ProfileAppSetting extends StatefulWidget { class ProfileAppSetting extends StatefulWidget {
@ -13,8 +12,8 @@ class ProfileAppSetting extends StatefulWidget {
} }
class _ProfileAppSettingState extends State<ProfileAppSetting> { class _ProfileAppSettingState extends State<ProfileAppSetting> {
bool _notificationsEnabled = true; // bool _notificationsEnabled = true;
bool _darkModeEnabled = false; // bool _darkModeEnabled = false;
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
@ -46,34 +45,32 @@ class _ProfileAppSettingState extends State<ProfileAppSetting> {
), ),
), ),
ProfileSwitchTile( // ProfileSwitchTile(
icon: Icons.notifications_outlined, // icon: Icons.notifications_outlined,
title: 'Notifications', // title: 'Notifications',
subtitle: 'Receive app notifications', // subtitle: 'Receive app notifications',
value: _notificationsEnabled, // value: _notificationsEnabled,
onChanged: (value) { // onChanged: (value) {
setState(() { // setState(() {
_notificationsEnabled = value; // _notificationsEnabled = value;
}); // });
}, // },
), // ),
ProfileDivider(), // ProfileDivider(),
ProfileSwitchTile(
icon: Icons.dark_mode_outlined,
title: 'Dark Mode',
subtitle: 'Switch to dark theme',
value: _darkModeEnabled,
onChanged: (value) {
setState(() {
_darkModeEnabled = value;
});
},
),
ProfileDivider(),
// ProfileSwitchTile(
// icon: Icons.dark_mode_outlined,
// title: 'Dark Mode',
// subtitle: 'Switch to dark theme',
// value: _darkModeEnabled,
// onChanged: (value) {
// setState(() {
// _darkModeEnabled = value;
// });
// },
// ),
// ProfileDivider(),
ProfileTile( ProfileTile(
icon: Icons.language_outlined, icon: Icons.language_outlined,
title: 'Language', title: 'Language',

321
lib/presentation/pages/profile/widgets/header.dart
View File

@ -3,76 +3,291 @@ import 'package:flutter/material.dart';
import '../../../../common/theme/theme.dart'; import '../../../../common/theme/theme.dart';
import '../../../components/spacer/spacer.dart'; import '../../../components/spacer/spacer.dart';
class ProfileHeader extends StatelessWidget { class ProfileHeader extends StatefulWidget {
const ProfileHeader({super.key}); const ProfileHeader({super.key});
@override
State<ProfileHeader> createState() => _ProfileHeaderState();
}
class _ProfileHeaderState extends State<ProfileHeader>
with SingleTickerProviderStateMixin {
late AnimationController _animationController;
late Animation<double> _fadeInAnimation;
late Animation<Offset> _slideAnimation;
late Animation<double> _scaleAnimation;
@override
void initState() {
super.initState();
_animationController = AnimationController(
duration: const Duration(milliseconds: 1200),
vsync: this,
);
_fadeInAnimation = Tween<double>(begin: 0.0, end: 1.0).animate(
CurvedAnimation(
parent: _animationController,
curve: const Interval(0.0, 0.6, curve: Curves.easeOut),
),
);
_slideAnimation =
Tween<Offset>(begin: const Offset(0, 0.5), end: Offset.zero).animate(
CurvedAnimation(
parent: _animationController,
curve: const Interval(0.2, 0.8, curve: Curves.easeOutCubic),
),
);
_scaleAnimation = Tween<double>(begin: 0.8, end: 1.0).animate(
CurvedAnimation(
parent: _animationController,
curve: const Interval(0.0, 0.7, curve: Curves.elasticOut),
),
);
_animationController.forward();
}
@override
void dispose() {
_animationController.dispose();
super.dispose();
}
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Container( return Container(
width: double.infinity, width: double.infinity,
decoration: const BoxDecoration( decoration: BoxDecoration(
gradient: LinearGradient( gradient: LinearGradient(
colors: AppColor.primaryGradient, colors: [
begin: Alignment.topCenter, ...AppColor.primaryGradient,
end: Alignment.bottomCenter, AppColor.primaryGradient.last.withOpacity(0.8),
],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
), ),
boxShadow: [
BoxShadow(
color: AppColor.primaryGradient.first.withOpacity(0.3),
blurRadius: 20,
offset: const Offset(0, 10),
),
],
), ),
child: Column( child: Stack(
alignment: Alignment.center,
children: [ children: [
const SpaceHeight(20), // Background decoration with floating circles
...List.generate(
// Profile Picture 6,
Container( (index) => Positioned(
width: 100, top: (index * 30.0) + 20,
height: 100, right: (index * 40.0) - 50,
decoration: BoxDecoration( child: AnimatedBuilder(
shape: BoxShape.circle, animation: _animationController,
border: Border.all(color: AppColor.textWhite, width: 3), builder: (context, child) {
color: AppColor.primaryLight, return Transform.rotate(
angle: _animationController.value * 2 * 3.14159 * 0.5,
child: Container(
width: 20 + (index * 5.0),
height: 20 + (index * 5.0),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: AppColor.textWhite.withOpacity(0.1),
),
),
);
},
),
), ),
child: ClipOval( ),
child: Container(
color: AppColor.primaryLight, // Main content
child: const Icon( Column(
Icons.person, crossAxisAlignment: CrossAxisAlignment.center,
size: 50, mainAxisAlignment: MainAxisAlignment.center,
color: AppColor.textWhite, children: [
const SpaceHeight(30),
// Profile Picture with enhanced design
AnimatedBuilder(
animation: _scaleAnimation,
builder: (context, child) {
return Transform.scale(
scale: _scaleAnimation.value,
child: Stack(
alignment: Alignment.center,
children: [
// Outer glow effect
Container(
width: 120,
height: 120,
decoration: BoxDecoration(
shape: BoxShape.circle,
boxShadow: [
BoxShadow(
color: AppColor.textWhite.withOpacity(0.3),
blurRadius: 20,
spreadRadius: 5,
),
],
),
),
// Profile picture container
Container(
width: 110,
height: 110,
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(
color: AppColor.textWhite,
width: 4,
),
gradient: LinearGradient(
colors: [
AppColor.primaryLight,
AppColor.primaryLight.withOpacity(0.8),
],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
),
child: ClipOval(
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
AppColor.primaryLight,
AppColor.primaryLight.withOpacity(0.7),
],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
),
),
child: const Icon(
Icons.person,
size: 55,
color: AppColor.textWhite,
),
),
),
),
// Online status indicator
Positioned(
bottom: 5,
right: 5,
child: Container(
width: 24,
height: 24,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.green,
border: Border.all(
color: AppColor.textWhite,
width: 3,
),
),
),
),
],
),
);
},
),
const SpaceHeight(20),
// Name with animation
SlideTransition(
position: _slideAnimation,
child: FadeTransition(
opacity: _fadeInAnimation,
child: Column(
children: [
Text(
'John Doe',
style: AppStyle.h5.copyWith(
fontWeight: FontWeight.bold,
color: AppColor.textWhite,
shadows: [
Shadow(
color: Colors.black.withOpacity(0.3),
offset: const Offset(0, 2),
blurRadius: 4,
),
],
),
),
const SpaceHeight(4),
Container(
height: 2,
width: 60,
decoration: BoxDecoration(
color: AppColor.textWhite.withOpacity(0.7),
borderRadius: BorderRadius.circular(1),
),
),
],
),
), ),
), ),
),
),
const SpaceHeight(16), const SpaceHeight(12),
// Name // Enhanced Role Badge
Text( FadeTransition(
'John Doe', opacity: _fadeInAnimation,
style: AppStyle.h5.copyWith( child: SlideTransition(
fontSize: 24, position: _slideAnimation,
fontWeight: FontWeight.bold, child: Container(
color: AppColor.textWhite, padding: const EdgeInsets.symmetric(
), horizontal: 20,
), vertical: 10,
),
const SpaceHeight(4), decoration: BoxDecoration(
color: AppColor.textWhite.withOpacity(0.25),
// Role Badge borderRadius: BorderRadius.circular(25),
Container( border: Border.all(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 6), color: AppColor.textWhite.withOpacity(0.3),
decoration: BoxDecoration( width: 1,
color: AppColor.textWhite.withOpacity(0.2), ),
borderRadius: BorderRadius.circular(20), boxShadow: [
), BoxShadow(
child: Text( color: Colors.black.withOpacity(0.1),
'Business Owner', blurRadius: 10,
style: AppStyle.md.copyWith( offset: const Offset(0, 4),
color: AppColor.textWhite, ),
fontWeight: FontWeight.w500, ],
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
Icons.business_center,
size: 16,
color: AppColor.textWhite.withOpacity(0.9),
),
const SpaceHeight(6),
Text(
'Business Owner',
style: AppStyle.md.copyWith(
color: AppColor.textWhite,
fontWeight: FontWeight.w600,
letterSpacing: 0.5,
),
),
],
),
),
),
), ),
),
),
const SpaceHeight(30), const SpaceHeight(30),
],
),
], ],
), ),
); );