mirror of
https://github.com/koloideal/Casha.git
synced 2026-08-08 17:51:14 +03:00
step
This commit is contained in:
@@ -7,14 +7,29 @@ import '../features/add_transaction/screen.dart';
|
|||||||
import '../features/categories/screen.dart';
|
import '../features/categories/screen.dart';
|
||||||
import '../features/settings/screen.dart';
|
import '../features/settings/screen.dart';
|
||||||
import '../features/settings/categories/category_manager_screen.dart';
|
import '../features/settings/categories/category_manager_screen.dart';
|
||||||
|
import '../features/onboarding/screen.dart';
|
||||||
import '../shared/models/transaction.dart';
|
import '../shared/models/transaction.dart';
|
||||||
import '../shared/paywall/paywall_screen.dart';
|
import '../shared/paywall/paywall_screen.dart';
|
||||||
|
import '../shared/providers/onboarding_provider.dart';
|
||||||
|
|
||||||
final _shellKey = GlobalKey<NavigatorState>();
|
final _shellKey = GlobalKey<NavigatorState>();
|
||||||
|
|
||||||
final appRouter = GoRouter(
|
final appRouter = GoRouter(
|
||||||
initialLocation: '/dashboard',
|
initialLocation: '/dashboard',
|
||||||
|
redirect: (context, state) {
|
||||||
|
final service = ProviderScope.containerOf(context)
|
||||||
|
.read(onboardingServiceProvider);
|
||||||
|
final location = state.uri.toString();
|
||||||
|
if (service.shouldShowOnboarding && location != '/onboarding') {
|
||||||
|
return '/onboarding';
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
},
|
||||||
routes: [
|
routes: [
|
||||||
|
GoRoute(
|
||||||
|
path: '/onboarding',
|
||||||
|
builder: (context, state) => const OnboardingScreen(),
|
||||||
|
),
|
||||||
ShellRoute(
|
ShellRoute(
|
||||||
navigatorKey: _shellKey,
|
navigatorKey: _shellKey,
|
||||||
builder: (context, state, child) => AppShell(child: child),
|
builder: (context, state, child) => AppShell(child: child),
|
||||||
|
|||||||
@@ -261,4 +261,17 @@ class AppStrings {
|
|||||||
_ru ? 'Изменение высоты карточки' : 'Resizable card height';
|
_ru ? 'Изменение высоты карточки' : 'Resizable card height';
|
||||||
String get premiumFeatureAccounts =>
|
String get premiumFeatureAccounts =>
|
||||||
_ru ? 'До 8 счетов' : 'Up to 8 accounts';
|
_ru ? 'До 8 счетов' : 'Up to 8 accounts';
|
||||||
|
|
||||||
|
String get onboardingWelcome => _ru ? 'Добро пожаловать в' : 'Welcome to';
|
||||||
|
String get onboardingMultiCurrencyTitle =>
|
||||||
|
_ru ? 'Все деньги на одном экране' : 'All Your Money, One View';
|
||||||
|
String get onboardingMultiCurrencyBody => _ru
|
||||||
|
? 'Счета в разных валютах с автоматической конвертацией по актуальным курсам'
|
||||||
|
: 'Accounts in different currencies, automatically converted at live exchange rates';
|
||||||
|
String get onboardingCardsTitle =>
|
||||||
|
_ru ? 'Живые карточки' : 'Cards That Come Alive';
|
||||||
|
String get onboardingCardsBody => _ru
|
||||||
|
? 'Наклоните телефон — и карточка оживает. Градиенты, цвета и высота — всё настраивается под вас'
|
||||||
|
: 'Tilt your phone and watch them respond. Customize gradients, colors and height to make them yours';
|
||||||
|
String get onboardingGetStarted => _ru ? 'Начать' : 'Get Started';
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -0,0 +1,18 @@
|
|||||||
|
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||||
|
import '../../shared/providers/onboarding_provider.dart';
|
||||||
|
|
||||||
|
class OnboardingNotifier extends Notifier<int> {
|
||||||
|
@override
|
||||||
|
int build() => 0;
|
||||||
|
|
||||||
|
void setPage(int page) => state = page;
|
||||||
|
|
||||||
|
Future<void> complete() async {
|
||||||
|
final service = ref.read(onboardingServiceProvider);
|
||||||
|
await service.completeOnboarding();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
final onboardingProvider = NotifierProvider<OnboardingNotifier, int>(
|
||||||
|
OnboardingNotifier.new,
|
||||||
|
);
|
||||||
@@ -0,0 +1,87 @@
|
|||||||
|
import 'package:flutter/material.dart';
|
||||||
|
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||||
|
import 'package:go_router/go_router.dart';
|
||||||
|
import '../../core/l10n/locale_provider.dart';
|
||||||
|
import 'provider.dart';
|
||||||
|
import 'widgets/onboarding_page.dart';
|
||||||
|
import 'widgets/onboarding_page_indicator.dart';
|
||||||
|
|
||||||
|
class OnboardingScreen extends ConsumerStatefulWidget {
|
||||||
|
const OnboardingScreen({super.key});
|
||||||
|
|
||||||
|
@override
|
||||||
|
ConsumerState<OnboardingScreen> createState() => _OnboardingScreenState();
|
||||||
|
}
|
||||||
|
|
||||||
|
class _OnboardingScreenState extends ConsumerState<OnboardingScreen> {
|
||||||
|
final _controller = PageController();
|
||||||
|
|
||||||
|
@override
|
||||||
|
void dispose() {
|
||||||
|
_controller.dispose();
|
||||||
|
super.dispose();
|
||||||
|
}
|
||||||
|
|
||||||
|
void _finish() {
|
||||||
|
ref.read(onboardingProvider.notifier).complete();
|
||||||
|
context.go('/dashboard');
|
||||||
|
}
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
final s = ref.watch(stringsProvider);
|
||||||
|
final currentPage = ref.watch(onboardingProvider);
|
||||||
|
|
||||||
|
return Scaffold(
|
||||||
|
body: SafeArea(
|
||||||
|
child: Column(
|
||||||
|
children: [
|
||||||
|
Expanded(
|
||||||
|
child: PageView(
|
||||||
|
controller: _controller,
|
||||||
|
onPageChanged: (page) =>
|
||||||
|
ref.read(onboardingProvider.notifier).setPage(page),
|
||||||
|
children: [
|
||||||
|
OnboardingPage.welcome(welcomeText: s.onboardingWelcome),
|
||||||
|
OnboardingPage.content(
|
||||||
|
icon: Icons.currency_exchange_rounded,
|
||||||
|
headline: s.onboardingMultiCurrencyTitle,
|
||||||
|
description: s.onboardingMultiCurrencyBody,
|
||||||
|
),
|
||||||
|
OnboardingPage.content(
|
||||||
|
icon: Icons.credit_card_rounded,
|
||||||
|
headline: s.onboardingCardsTitle,
|
||||||
|
description: s.onboardingCardsBody,
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
Padding(
|
||||||
|
padding: const EdgeInsets.only(bottom: 48),
|
||||||
|
child: Column(
|
||||||
|
children: [
|
||||||
|
OnboardingPageIndicator(
|
||||||
|
current: currentPage,
|
||||||
|
count: 3,
|
||||||
|
),
|
||||||
|
const SizedBox(height: 32),
|
||||||
|
if (currentPage == 2)
|
||||||
|
Padding(
|
||||||
|
padding: const EdgeInsets.symmetric(horizontal: 32),
|
||||||
|
child: SizedBox(
|
||||||
|
width: double.infinity,
|
||||||
|
child: ElevatedButton(
|
||||||
|
onPressed: _finish,
|
||||||
|
child: Text(s.onboardingGetStarted),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,86 @@
|
|||||||
|
import 'dart:async';
|
||||||
|
import 'package:flutter/material.dart';
|
||||||
|
import 'package:sensors_plus/sensors_plus.dart';
|
||||||
|
|
||||||
|
class CashaShimmerText extends StatefulWidget {
|
||||||
|
final String text;
|
||||||
|
final TextStyle? style;
|
||||||
|
|
||||||
|
const CashaShimmerText({
|
||||||
|
required this.text,
|
||||||
|
this.style,
|
||||||
|
super.key,
|
||||||
|
});
|
||||||
|
|
||||||
|
@override
|
||||||
|
State<CashaShimmerText> createState() => _CashaShimmerTextState();
|
||||||
|
}
|
||||||
|
|
||||||
|
class _CashaShimmerTextState extends State<CashaShimmerText>
|
||||||
|
with SingleTickerProviderStateMixin {
|
||||||
|
late final AnimationController _controller;
|
||||||
|
double _tilt = 0.0;
|
||||||
|
double _targetTilt = 0.0;
|
||||||
|
StreamSubscription<AccelerometerEvent>? _sub;
|
||||||
|
|
||||||
|
@override
|
||||||
|
void initState() {
|
||||||
|
super.initState();
|
||||||
|
_controller = AnimationController(
|
||||||
|
vsync: this,
|
||||||
|
duration: const Duration(seconds: 4),
|
||||||
|
)..repeat();
|
||||||
|
|
||||||
|
_sub = accelerometerEventStream(
|
||||||
|
samplingPeriod: const Duration(milliseconds: 50),
|
||||||
|
).listen((e) {
|
||||||
|
_targetTilt = (e.x / 9.8).clamp(-1.0, 1.0);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
@override
|
||||||
|
void dispose() {
|
||||||
|
_controller.dispose();
|
||||||
|
_sub?.cancel();
|
||||||
|
super.dispose();
|
||||||
|
}
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
final primary = Theme.of(context).colorScheme.primary;
|
||||||
|
|
||||||
|
return AnimatedBuilder(
|
||||||
|
animation: _controller,
|
||||||
|
builder: (context, child) {
|
||||||
|
_tilt += (_targetTilt - _tilt) * 0.12;
|
||||||
|
|
||||||
|
final sweep = (_controller.value * 2.0 - 1.0) + _tilt * 0.6;
|
||||||
|
|
||||||
|
return ShaderMask(
|
||||||
|
shaderCallback: (bounds) {
|
||||||
|
return LinearGradient(
|
||||||
|
begin: Alignment(sweep - 0.8, -0.3),
|
||||||
|
end: Alignment(sweep + 0.8, 0.3),
|
||||||
|
colors: [
|
||||||
|
primary.withValues(alpha: 0.7),
|
||||||
|
primary,
|
||||||
|
Colors.white,
|
||||||
|
primary.withValues(alpha: 0.9),
|
||||||
|
Colors.white,
|
||||||
|
primary,
|
||||||
|
primary.withValues(alpha: 0.7),
|
||||||
|
],
|
||||||
|
stops: [0.0, 0.2, 0.35, 0.45, 0.55, 0.8, 1.0],
|
||||||
|
).createShader(bounds);
|
||||||
|
},
|
||||||
|
blendMode: BlendMode.srcIn,
|
||||||
|
child: child,
|
||||||
|
);
|
||||||
|
},
|
||||||
|
child: Text(
|
||||||
|
widget.text,
|
||||||
|
style: widget.style?.copyWith(color: Colors.white),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,96 @@
|
|||||||
|
import 'package:flutter/material.dart';
|
||||||
|
import 'casha_shimmer_text.dart';
|
||||||
|
|
||||||
|
class OnboardingPage extends StatelessWidget {
|
||||||
|
final IconData? icon;
|
||||||
|
final String? headline;
|
||||||
|
final String? description;
|
||||||
|
final String? welcomeText;
|
||||||
|
final bool isWelcomePage;
|
||||||
|
|
||||||
|
const OnboardingPage.welcome({required this.welcomeText, super.key})
|
||||||
|
: icon = null,
|
||||||
|
headline = null,
|
||||||
|
description = null,
|
||||||
|
isWelcomePage = true;
|
||||||
|
|
||||||
|
const OnboardingPage.content({
|
||||||
|
required this.icon,
|
||||||
|
required this.headline,
|
||||||
|
required this.description,
|
||||||
|
super.key,
|
||||||
|
}) : welcomeText = null,
|
||||||
|
isWelcomePage = false;
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
if (isWelcomePage) {
|
||||||
|
final colorScheme = Theme.of(context).colorScheme;
|
||||||
|
return Center(
|
||||||
|
child: Column(
|
||||||
|
mainAxisSize: MainAxisSize.min,
|
||||||
|
children: [
|
||||||
|
Text(
|
||||||
|
welcomeText!,
|
||||||
|
style: Theme.of(context).textTheme.titleMedium?.copyWith(
|
||||||
|
fontWeight: FontWeight.w300,
|
||||||
|
color: colorScheme.onSurface.withOpacity(0.4),
|
||||||
|
letterSpacing: 2,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
const SizedBox(height: 12),
|
||||||
|
CashaShimmerText(
|
||||||
|
text: 'Casha',
|
||||||
|
style: Theme.of(context).textTheme.displayLarge?.copyWith(
|
||||||
|
fontSize: 72,
|
||||||
|
fontWeight: FontWeight.w900,
|
||||||
|
letterSpacing: -1,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
final colorScheme = Theme.of(context).colorScheme;
|
||||||
|
return Center(
|
||||||
|
child: Padding(
|
||||||
|
padding: const EdgeInsets.symmetric(horizontal: 32),
|
||||||
|
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,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
const SizedBox(height: 32),
|
||||||
|
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),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,33 @@
|
|||||||
|
import 'package:flutter/material.dart';
|
||||||
|
|
||||||
|
class OnboardingPageIndicator extends StatelessWidget {
|
||||||
|
final int current;
|
||||||
|
final int count;
|
||||||
|
|
||||||
|
const OnboardingPageIndicator({
|
||||||
|
required this.current,
|
||||||
|
required this.count,
|
||||||
|
super.key,
|
||||||
|
});
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
final color = Theme.of(context).colorScheme.primary;
|
||||||
|
return Row(
|
||||||
|
mainAxisAlignment: MainAxisAlignment.center,
|
||||||
|
children: List.generate(count, (i) {
|
||||||
|
final isActive = i == current;
|
||||||
|
return AnimatedContainer(
|
||||||
|
duration: const Duration(milliseconds: 200),
|
||||||
|
margin: const EdgeInsets.symmetric(horizontal: 4),
|
||||||
|
width: isActive ? 24 : 8,
|
||||||
|
height: 8,
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
color: isActive ? color : color.withOpacity(0.3),
|
||||||
|
borderRadius: BorderRadius.circular(4),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,8 @@
|
|||||||
|
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||||
|
import '../../features/dashboard/provider.dart';
|
||||||
|
import '../services/onboarding_service.dart';
|
||||||
|
|
||||||
|
final onboardingServiceProvider = Provider<OnboardingService>((ref) {
|
||||||
|
final prefs = ref.watch(sharedPreferencesProvider);
|
||||||
|
return OnboardingService(prefs);
|
||||||
|
});
|
||||||
@@ -0,0 +1,25 @@
|
|||||||
|
import 'package:flutter/foundation.dart';
|
||||||
|
import 'package:shared_preferences/shared_preferences.dart';
|
||||||
|
|
||||||
|
class OnboardingService {
|
||||||
|
static const _key = 'onboarding_completed';
|
||||||
|
static bool _shownInSession = false;
|
||||||
|
|
||||||
|
final SharedPreferences _prefs;
|
||||||
|
|
||||||
|
OnboardingService(this._prefs);
|
||||||
|
|
||||||
|
bool get shouldShowOnboarding {
|
||||||
|
if (kDebugMode) {
|
||||||
|
return !_shownInSession;
|
||||||
|
}
|
||||||
|
return !(_prefs.getBool(_key) ?? false);
|
||||||
|
}
|
||||||
|
|
||||||
|
Future<void> completeOnboarding() async {
|
||||||
|
_shownInSession = true;
|
||||||
|
if (!kDebugMode) {
|
||||||
|
await _prefs.setBool(_key, true);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user