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

feat: update home ui

Browse Source
This commit is contained in:
Efril
2026-06-23 21:27:27 +07:00
parent e236d811ce
commit 83f4e065ed
34 changed files with 2128 additions and 1597 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/presentation/pages/auth/login/login_page.dart
+70 -188
View File
@@ -16,86 +16,12 @@ import 'widgets/email_field.dart';
import 'widgets/password_field.dart';
@RoutePage()
class LoginPage extends StatefulWidget implements AutoRouteWrapper {
class LoginPage extends StatelessWidget implements AutoRouteWrapper {
const LoginPage({super.key});
@override
State<LoginPage> createState() => _LoginPageState();
@override
Widget wrappedRoute(BuildContext context) =>
BlocProvider(create: (_) => getIt<LoginFormBloc>(), child: this);
}
class _LoginPageState extends State<LoginPage> with TickerProviderStateMixin {
late AnimationController _fadeController;
late AnimationController _slideController;
late AnimationController _backgroundController;
late AnimationController _floatingController;
late Animation<double> _fadeAnimation;
late Animation<Offset> _slideAnimation;
late Animation<double> _backgroundAnimation;
late Animation<double> _floatingAnimation;
@override
void initState() {
super.initState();
_fadeController = AnimationController(
duration: const Duration(milliseconds: 1500),
vsync: this,
);
_slideController = AnimationController(
duration: const Duration(milliseconds: 1200),
vsync: this,
);
_backgroundController = AnimationController(
duration: const Duration(seconds: 10),
vsync: this,
)..repeat();
_floatingController = AnimationController(
duration: const Duration(seconds: 6),
vsync: this,
)..repeat(reverse: true);
_fadeAnimation = Tween<double>(begin: 0.0, end: 1.0).animate(
CurvedAnimation(parent: _fadeController, curve: Curves.easeInOut),
);
_slideAnimation =
Tween<Offset>(begin: const Offset(0, 0.3), end: Offset.zero).animate(
CurvedAnimation(parent: _slideController, curve: Curves.easeOutCubic),
);
_backgroundAnimation = Tween<double>(
begin: 0.0,
end: 2 * math.pi,
).animate(_backgroundController);
_floatingAnimation = Tween<double>(begin: -20.0, end: 20.0).animate(
CurvedAnimation(parent: _floatingController, curve: Curves.easeInOut),
);
_fadeController.forward();
_slideController.forward();
}
@override
void dispose() {
_fadeController.dispose();
_slideController.dispose();
_backgroundController.dispose();
_floatingController.dispose();
super.dispose();
}
Future<void> _handleLogin() async {
context.read<LoginFormBloc>().add(LoginFormEvent.submitted());
}
@override
Widget build(BuildContext context) {
@@ -117,83 +43,63 @@ class _LoginPageState extends State<LoginPage> with TickerProviderStateMixin {
);
},
child: Scaffold(
body: AnimatedBuilder(
animation: Listenable.merge([
_backgroundController,
_floatingController,
]),
builder: (context, child) {
return Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: AppColor.primaryGradient,
),
),
child: Stack(
children: [
// Animated background elements
_buildAnimatedBackground(),
// Main content
SafeArea(
child: Center(
child: SingleChildScrollView(
padding: EdgeInsets.symmetric(
horizontal: AppValue.padding,
),
child: FadeTransition(
opacity: _fadeAnimation,
child: SlideTransition(
position: _slideAnimation,
child: BlocBuilder<LoginFormBloc, LoginFormState>(
builder: (context, state) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
_buildLogo(context),
SpaceHeight(48),
_buildLoginCard(
context,
state.isSubmitting,
state.showErrorMessages,
),
],
);
},
body: Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: AppColor.primaryGradient,
),
),
child: Stack(
children: [
_buildStaticBackground(context),
SafeArea(
child: Center(
child: SingleChildScrollView(
padding: EdgeInsets.symmetric(horizontal: AppValue.padding),
child: BlocBuilder<LoginFormBloc, LoginFormState>(
builder: (context, state) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
_buildLogo(context),
const SpaceHeight(48),
_buildLoginCard(
context,
state.isSubmitting,
state.showErrorMessages,
),
),
),
),
],
);
},
),
),
],
),
),
);
},
],
),
),
),
);
}
Widget _buildAnimatedBackground() {
Widget _buildStaticBackground(BuildContext context) {
final size = MediaQuery.of(context).size;
return Stack(
children: [
// Floating circles
// Static circles
...List.generate(6, (index) {
final double size = 80 + (index * 40);
final double left =
(index * 60.0) % MediaQuery.of(context).size.width;
final double top =
(index * 120.0) % MediaQuery.of(context).size.height;
final double circleSize = 80 + (index * 40);
final double left = (index * 60.0) % size.width;
final double top = (index * 120.0) % size.height;
return Positioned(
left: left + math.sin(_backgroundAnimation.value + index) * 30,
top: top + _floatingAnimation.value + (index * 10),
left: left,
top: top,
child: Container(
width: size,
height: size,
width: circleSize,
height: circleSize,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.white.withOpacity(0.1),
@@ -206,12 +112,12 @@ class _LoginPageState extends State<LoginPage> with TickerProviderStateMixin {
);
}),
// Rotating geometric shapes
// Geometric shapes
Positioned(
top: 100,
right: 50,
child: Transform.rotate(
angle: _backgroundAnimation.value,
angle: math.pi / 4,
child: Container(
width: 60,
height: 60,
@@ -230,46 +136,37 @@ class _LoginPageState extends State<LoginPage> with TickerProviderStateMixin {
Positioned(
bottom: 150,
left: 30,
child: Transform.rotate(
angle: -_backgroundAnimation.value * 0.5,
child: Container(
width: 80,
height: 80,
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.06),
shape: BoxShape.circle,
border: Border.all(
color: Colors.white.withOpacity(0.12),
width: 1,
),
child: Container(
width: 80,
height: 80,
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.06),
shape: BoxShape.circle,
border: Border.all(
color: Colors.white.withOpacity(0.12),
width: 1,
),
),
),
),
// Floating particles
// Static particles
...List.generate(8, (index) {
return Positioned(
left: (index * 45.0) % MediaQuery.of(context).size.width,
top: (index * 80.0) % MediaQuery.of(context).size.height,
child: Transform.translate(
offset: Offset(
math.sin(_backgroundAnimation.value + index * 0.5) * 20,
math.cos(_backgroundAnimation.value + index * 0.3) * 15,
),
child: Container(
width: 4 + (index % 3) * 2,
height: 4 + (index % 3) * 2,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.white.withOpacity(0.3),
),
left: (index * 45.0) % size.width,
top: (index * 80.0) % size.height,
child: Container(
width: 4.0 + (index % 3) * 2,
height: 4.0 + (index % 3) * 2,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.white.withOpacity(0.3),
),
),
);
}),
// Gradient overlay for better text readability
// Gradient overlay
Container(
decoration: BoxDecoration(
gradient: LinearGradient(
@@ -295,29 +192,13 @@ class _LoginPageState extends State<LoginPage> with TickerProviderStateMixin {
style: AppStyle.h1.copyWith(
fontWeight: FontWeight.bold,
color: AppColor.white,
shadows: [
Shadow(
offset: const Offset(0, 2),
blurRadius: 10,
color: Colors.black.withOpacity(0.3),
),
],
),
textAlign: TextAlign.center,
),
const SpaceHeight(8),
Text(
context.lang.login_desc,
style: AppStyle.lg.copyWith(
color: AppColor.textLight,
shadows: [
Shadow(
offset: const Offset(0, 1),
blurRadius: 5,
color: Colors.black.withOpacity(0.2),
),
],
),
style: AppStyle.lg.copyWith(color: AppColor.textLight),
),
],
);
@@ -353,7 +234,6 @@ class _LoginPageState extends State<LoginPage> with TickerProviderStateMixin {
autovalidateMode: showErrorMessages
? AutovalidateMode.always
: AutovalidateMode.disabled,
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
@@ -363,7 +243,7 @@ class _LoginPageState extends State<LoginPage> with TickerProviderStateMixin {
const SpaceHeight(16),
_buildForgetPassword(context),
const SpaceHeight(32),
_buildLoginButton(isLoading),
_buildLoginButton(context, isLoading),
],
),
),
@@ -386,11 +266,13 @@ class _LoginPageState extends State<LoginPage> with TickerProviderStateMixin {
);
}
Widget _buildLoginButton(bool isLoading) {
Widget _buildLoginButton(BuildContext context, bool isLoading) {
return AppElevatedButton(
text: context.lang.sign_in,
isLoading: isLoading,
onPressed: _handleLogin,
onPressed: () {
context.read<LoginFormBloc>().add(LoginFormEvent.submitted());
},
);
}
}