Skip to content

Commit 7fd27db

Browse files
zaelgoharyzaelgohary
committed
Revamp wizard to include all app features
1 parent d0516d0 commit 7fd27db

6 files changed

Lines changed: 936 additions & 81 deletions

File tree

‎app/lib/screens/wizard/page1.dart‎

Lines changed: 95 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,104 @@
11
import 'package:flutter/material.dart';
2-
import 'package:threebotlogin/widgets/wizard/common_page.dart';
2+
import 'package:flutter_svg/svg.dart';
33

4-
class Page1 extends StatelessWidget {
4+
class Page1 extends StatefulWidget {
55
const Page1({super.key});
66

7+
@override
8+
State<Page1> createState() => _Page1State();
9+
}
10+
11+
class _Page1State extends State<Page1> with SingleTickerProviderStateMixin {
12+
late AnimationController _animationController;
13+
late Animation<double> _fadeAnimation;
14+
late Animation<Offset> _slideAnimation;
15+
16+
@override
17+
void initState() {
18+
super.initState();
19+
_animationController = AnimationController(
20+
duration: const Duration(milliseconds: 800),
21+
vsync: this,
22+
);
23+
24+
_fadeAnimation = Tween<double>(
25+
begin: 0.0,
26+
end: 1.0,
27+
).animate(CurvedAnimation(
28+
parent: _animationController,
29+
curve: Curves.easeOut,
30+
));
31+
32+
_slideAnimation = Tween<Offset>(
33+
begin: const Offset(0, 0.3),
34+
end: Offset.zero,
35+
).animate(CurvedAnimation(
36+
parent: _animationController,
37+
curve: Curves.easeOut,
38+
));
39+
40+
_animationController.forward();
41+
}
42+
43+
@override
44+
void dispose() {
45+
_animationController.dispose();
46+
super.dispose();
47+
}
48+
749
@override
850
Widget build(BuildContext context) {
9-
return const CommonPage(
10-
title: 'WELCOME TO',
11-
subtitle: '',
12-
imagePath: 'assets/TF_logo.svg',
13-
widthPercentage: 0.65,
14-
heightPercentage: 0.25,
15-
description:
16-
'ThreeFold Connect is your main access point to the ThreeFold Grid, ThreeFold Token, and more. Please allow us to quickly show you around!',
51+
final theme = Theme.of(context);
52+
final colorScheme = theme.colorScheme;
53+
54+
return FadeTransition(
55+
opacity: _fadeAnimation,
56+
child: SlideTransition(
57+
position: _slideAnimation,
58+
child: Padding(
59+
padding: const EdgeInsets.symmetric(horizontal: 32),
60+
child: Column(
61+
mainAxisAlignment: MainAxisAlignment.center,
62+
children: [
63+
const Spacer(flex: 1),
64+
// Logo
65+
SvgPicture.asset(
66+
'assets/TF_logo.svg',
67+
width: MediaQuery.of(context).size.width * 0.6,
68+
colorFilter: ColorFilter.mode(
69+
colorScheme.primary,
70+
BlendMode.srcIn,
71+
),
72+
),
73+
SizedBox(height: MediaQuery.of(context).size.height * 0.08),
74+
75+
// Title
76+
Text(
77+
'Welcome to\nThreeFold Connect',
78+
textAlign: TextAlign.center,
79+
style: theme.textTheme.headlineLarge!.copyWith(
80+
color: colorScheme.onSurface,
81+
fontWeight: FontWeight.bold,
82+
height: 1.2,
83+
),
84+
),
85+
SizedBox(height: MediaQuery.of(context).size.height * 0.04),
86+
87+
// Description
88+
Text(
89+
'Your secure gateway to the ThreeFold Grid, managing your digital identity, tokens, and more.',
90+
textAlign: TextAlign.center,
91+
style: theme.textTheme.bodyLarge!.copyWith(
92+
color: colorScheme.onSurface.withOpacity(0.7),
93+
height: 1.5,
94+
fontSize: 16,
95+
),
96+
),
97+
const Spacer(flex: 2),
98+
],
99+
),
100+
),
101+
),
17102
);
18103
}
19104
}

‎app/lib/screens/wizard/page2.dart‎

Lines changed: 144 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,153 @@
11
import 'package:flutter/material.dart';
2-
import 'package:threebotlogin/widgets/wizard/common_page.dart';
32

4-
class Page2 extends StatelessWidget {
3+
class Page2 extends StatefulWidget {
54
const Page2({super.key});
65

6+
@override
7+
State<Page2> createState() => _Page2State();
8+
}
9+
10+
class _Page2State extends State<Page2>
11+
with SingleTickerProviderStateMixin {
12+
late AnimationController _animationController;
13+
late Animation<double> _fadeAnimation;
14+
late Animation<double> _scaleAnimation;
15+
16+
@override
17+
void initState() {
18+
super.initState();
19+
_animationController = AnimationController(
20+
duration: const Duration(milliseconds: 800),
21+
vsync: this,
22+
);
23+
24+
_fadeAnimation = Tween<double>(
25+
begin: 0.0,
26+
end: 1.0,
27+
).animate(CurvedAnimation(
28+
parent: _animationController,
29+
curve: const Interval(0.0, 0.6, curve: Curves.easeOut),
30+
));
31+
32+
_scaleAnimation = Tween<double>(
33+
begin: 0.8,
34+
end: 1.0,
35+
).animate(CurvedAnimation(
36+
parent: _animationController,
37+
curve: const Interval(0.2, 1.0, curve: Curves.easeOut),
38+
));
39+
40+
_animationController.forward();
41+
}
42+
43+
@override
44+
void dispose() {
45+
_animationController.dispose();
46+
super.dispose();
47+
}
48+
749
@override
850
Widget build(BuildContext context) {
9-
return const CommonPage(
10-
title: 'MAXIMUM',
11-
subtitle: 'SECURITY',
12-
imagePath: 'assets/finger_outline.png',
13-
widthPercentage: 0.6,
14-
heightPercentage: 0.4,
15-
description:
16-
'The app provides a secure authentication mechanism that creates your virtual identity on the ThreeFold Grid.',
51+
final theme = Theme.of(context);
52+
final colorScheme = theme.colorScheme;
53+
54+
return FadeTransition(
55+
opacity: _fadeAnimation,
56+
child: ScaleTransition(
57+
scale: _scaleAnimation,
58+
child: Padding(
59+
padding: const EdgeInsets.symmetric(horizontal: 32),
60+
child: Column(
61+
mainAxisAlignment: MainAxisAlignment.center,
62+
children: [
63+
const Spacer(flex: 1),
64+
65+
// Icon with background
66+
Container(
67+
width: 160,
68+
height: 160,
69+
decoration: BoxDecoration(
70+
color: colorScheme.primaryContainer.withOpacity(0.3),
71+
shape: BoxShape.circle,
72+
),
73+
child: Icon(
74+
Icons.account_balance_wallet_rounded,
75+
size: 80,
76+
color: colorScheme.primary,
77+
),
78+
),
79+
SizedBox(height: MediaQuery.of(context).size.height * 0.06),
80+
81+
// Title
82+
Text(
83+
'Manage Your Wallet',
84+
textAlign: TextAlign.center,
85+
style: theme.textTheme.headlineMedium!.copyWith(
86+
color: colorScheme.onSurface,
87+
fontWeight: FontWeight.bold,
88+
),
89+
),
90+
SizedBox(height: MediaQuery.of(context).size.height * 0.03),
91+
92+
// Description
93+
Text(
94+
'Send and receive ThreeFold Tokens (TFT) across multiple networks. Bridge tokens between TFChain, Stellar, and Solana.',
95+
textAlign: TextAlign.center,
96+
style: theme.textTheme.bodyLarge!.copyWith(
97+
color: colorScheme.onSurface.withOpacity(0.7),
98+
height: 1.6,
99+
fontSize: 16,
100+
),
101+
),
102+
103+
// Features list
104+
SizedBox(height: MediaQuery.of(context).size.height * 0.04),
105+
_buildFeatureItem(
106+
context,
107+
'Multi-chain wallet support',
108+
Icons.link_rounded,
109+
),
110+
const SizedBox(height: 12),
111+
_buildFeatureItem(
112+
context,
113+
'Real-time balance tracking',
114+
Icons.trending_up_rounded,
115+
),
116+
const SizedBox(height: 12),
117+
_buildFeatureItem(
118+
context,
119+
'Secure transactions',
120+
Icons.shield_rounded,
121+
),
122+
123+
const Spacer(flex: 2),
124+
],
125+
),
126+
),
127+
),
128+
);
129+
}
130+
131+
Widget _buildFeatureItem(BuildContext context, String text, IconData icon) {
132+
final theme = Theme.of(context);
133+
final colorScheme = theme.colorScheme;
134+
135+
return Row(
136+
mainAxisAlignment: MainAxisAlignment.center,
137+
children: [
138+
Icon(
139+
icon,
140+
size: 20,
141+
color: colorScheme.primary,
142+
),
143+
const SizedBox(width: 12),
144+
Text(
145+
text,
146+
style: theme.textTheme.bodyMedium!.copyWith(
147+
color: colorScheme.onSurface.withOpacity(0.8),
148+
),
149+
),
150+
],
17151
);
18152
}
19153
}

0 commit comments

Comments
 (0)