kolo/Casha
1
0
Fork 0
mirror of https://github.com/koloideal/Casha.git synced 2026-08-08 17:51:14 +03:00
Code Issues Packages Projects Releases Wiki Activity

step

Browse Source
This commit is contained in:
kolo
2026-06-29 19:37:28 +03:00
parent 7b9bf6d060
commit 00bdd63ea6
5 changed files with 250 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/features/onboarding/screen.dart
+86 -51
View File
@@ -4,6 +4,7 @@ import 'package:go_router/go_router.dart';
import '../../core/l10n/locale_provider.dart';
import '../../core/services/haptic_service.dart';
import 'provider.dart';
import 'widgets/fade_slide_in.dart';
import 'widgets/onboarding_page.dart';
import 'widgets/onboarding_page_indicator.dart';
@@ -49,67 +50,23 @@ class _OnboardingScreenState extends ConsumerState<OnboardingScreen> {
controller: _controller,
onPageChanged: _onPageChanged,
children: [
OnboardingPage.welcome(welcomeText: s.onboardingWelcome),
OnboardingPage.welcome(
welcomeText: s.onboardingWelcome,
isActive: currentPage == 0,
),
OnboardingPage.content(
icon: Icons.currency_exchange_rounded,
headline: s.onboardingMultiCurrencyTitle,
description: s.onboardingMultiCurrencyBody,
isActive: currentPage == 1,
),
OnboardingPage.content(
icon: Icons.credit_card_rounded,
headline: s.onboardingCardsTitle,
description: s.onboardingCardsBody,
isActive: currentPage == 2,
),
Center(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 32),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
Icons.waving_hand_rounded,
size: 72,
color: Theme.of(context).colorScheme.primary,
),
const SizedBox(height: 28),
Text(
s.onboardingReadyTitle,
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.headlineMedium?.copyWith(
fontWeight: FontWeight.bold,
color: Theme.of(context).colorScheme.onSurface,
),
),
const SizedBox(height: 12),
Text(
s.onboardingReadyBody,
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.bodyLarge?.copyWith(
color: Theme.of(context).colorScheme.onSurface.withOpacity(0.5),
),
),
const SizedBox(height: 24),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
s.onboardingSwipeRight,
style: Theme.of(context).textTheme.titleMedium?.copyWith(
color: Theme.of(context).colorScheme.primary,
fontWeight: FontWeight.w600,
),
),
const SizedBox(width: 8),
Icon(
Icons.arrow_forward_rounded,
color: Theme.of(context).colorScheme.primary,
),
],
),
],
),
),
),
_ReadyPage(isActive: currentPage == 3),
const SizedBox.shrink(),
],
),
@@ -127,3 +84,81 @@ class _OnboardingScreenState extends ConsumerState<OnboardingScreen> {
);
}
}
class _ReadyPage extends ConsumerWidget {
final bool isActive;
const _ReadyPage({required this.isActive});
@override
Widget build(BuildContext context, WidgetRef ref) {
final s = ref.watch(stringsProvider);
final colorScheme = Theme.of(context).colorScheme;
return Center(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 32),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
FadeSlideIn(
active: isActive,
child: Icon(
Icons.waving_hand_rounded,
size: 72,
color: colorScheme.primary,
),
),
const SizedBox(height: 28),
FadeSlideIn(
active: isActive,
delay: const Duration(milliseconds: 150),
child: Text(
s.onboardingReadyTitle,
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.headlineMedium?.copyWith(
fontWeight: FontWeight.bold,
color: colorScheme.onSurface,
),
),
),
const SizedBox(height: 12),
FadeSlideIn(
active: isActive,
delay: const Duration(milliseconds: 300),
child: Text(
s.onboardingReadyBody,
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.bodyLarge?.copyWith(
color: colorScheme.onSurface.withOpacity(0.5),
),
),
),
const SizedBox(height: 24),
FadeSlideIn(
active: isActive,
delay: const Duration(milliseconds: 450),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
s.onboardingSwipeRight,
style: Theme.of(context).textTheme.titleMedium?.copyWith(
color: colorScheme.primary,
fontWeight: FontWeight.w600,
),
),
const SizedBox(width: 8),
Icon(
Icons.arrow_forward_rounded,
color: colorScheme.primary,
),
],
),
),
],
),
),
);
}
}
lib/features/onboarding/widgets/fade_slide_in.dart
+78
View File
@@ -0,0 +1,78 @@
import 'package:flutter/material.dart';
class FadeSlideIn extends StatefulWidget {
final bool active;
final Duration delay;
final Duration duration;
final Widget child;
const FadeSlideIn({
required this.active,
required this.child,
this.delay = Duration.zero,
this.duration = const Duration(milliseconds: 500),
super.key,
});
@override
State<FadeSlideIn> createState() => _FadeSlideInState();
}
class _FadeSlideInState extends State<FadeSlideIn>
with SingleTickerProviderStateMixin {
late final AnimationController _controller;
late final Animation<double> _opacity;
late final Animation<Offset> _offset;
@override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this,
duration: widget.duration,
);
_opacity = Tween<double>(begin: 0.0, end: 1.0).animate(
CurvedAnimation(parent: _controller, curve: Curves.easeOut),
);
_offset = Tween<Offset>(
begin: const Offset(0, 0.15),
end: Offset.zero,
).animate(CurvedAnimation(parent: _controller, curve: Curves.easeOut));
}
@override
void didUpdateWidget(covariant FadeSlideIn oldWidget) {
super.didUpdateWidget(oldWidget);
if (widget.active && !oldWidget.active) {
_controller.reset();
Future.delayed(widget.delay, () {
if (mounted) _controller.forward();
});
} else if (!widget.active && oldWidget.active) {
_controller.reset();
}
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: _controller,
builder: (context, child) {
return Opacity(
opacity: _opacity.value,
child: FractionalTranslation(
translation: _offset.value,
child: child,
),
);
},
child: widget.child,
);
}
}
lib/features/onboarding/widgets/onboarding_page.dart
+42 -25
View File
@@ -1,5 +1,6 @@
import 'package:flutter/material.dart';
import 'casha_shimmer_text.dart';
import 'fade_slide_in.dart';
class OnboardingPage extends StatelessWidget {
final IconData? icon;
@@ -7,9 +8,13 @@ class OnboardingPage extends StatelessWidget {
final String? description;
final String? welcomeText;
final bool isWelcomePage;
final bool isActive;
const OnboardingPage.welcome({required this.welcomeText, super.key})
: icon = null,
const OnboardingPage.welcome({
required this.welcomeText,
this.isActive = false,
super.key,
}) : icon = null,
headline = null,
description = null,
isWelcomePage = true;
@@ -18,6 +23,7 @@ class OnboardingPage extends StatelessWidget {
required this.icon,
required this.headline,
required this.description,
this.isActive = false,
super.key,
}) : welcomeText = null,
isWelcomePage = false;
@@ -59,34 +65,45 @@ class OnboardingPage extends StatelessWidget {
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
padding: const EdgeInsets.all(24),
decoration: BoxDecoration(
color: colorScheme.primary.withOpacity(0.12),
shape: BoxShape.circle,
),
child: Icon(
icon,
size: 64,
color: colorScheme.primary,
FadeSlideIn(
active: isActive,
child: Container(
padding: const EdgeInsets.all(24),
decoration: BoxDecoration(
color: colorScheme.primary.withOpacity(0.12),
shape: BoxShape.circle,
),
child: Icon(
icon,
size: 64,
color: colorScheme.primary,
),
),
),
const SizedBox(height: 32),
Text(
headline!,
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.headlineSmall?.copyWith(
fontWeight: FontWeight.bold,
color: colorScheme.onSurface,
),
FadeSlideIn(
active: isActive,
delay: const Duration(milliseconds: 150),
child: Text(
headline!,
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.headlineSmall?.copyWith(
fontWeight: FontWeight.bold,
color: colorScheme.onSurface,
),
),
),
const SizedBox(height: 12),
Text(
description!,
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
color: colorScheme.onSurface.withOpacity(0.6),
),
FadeSlideIn(
active: isActive,
delay: const Duration(milliseconds: 300),
child: Text(
description!,
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
color: colorScheme.onSurface.withOpacity(0.6),
),
),
),
],
),