Skip to content
Snippets Groups Projects
Commit 5e539775 authored by poka's avatar poka
Browse files

Add last onboarding screen, fix few stuff about wallet unlocking

parent 47f27d23
No related branches found
No related tags found
1 merge request!6Figma onboarding workflow
Hide whitespace changes
Inline Side-by-side
assets/onBoarding/GIF.png deleted 100755 → 0
+ 0
− 0
View file @ 47f27d23
assets/onBoarding/GIF.png

115 KiB

assets/onBoarding/gecko-clin.gif 0 → 100644
+ 0
− 0
View file @ 5e539775
assets/onBoarding/gecko-clin.gif

1.74 MiB

lib/main.dart
+ 4
− 0
View file @ 5e539775
...@@ -11,6 +11,7 @@ import 'package:gecko/models/walletOptions.dart'; ...@@ -11,6 +11,7 @@ import 'package:gecko/models/walletOptions.dart';
import 'package:gecko/screens/home.dart'; import 'package:gecko/screens/home.dart';
import 'package:flutter/cupertino.dart'; import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:gecko/screens/myWallets/walletsHome.dart';
import 'package:graphql_flutter/graphql_flutter.dart'; import 'package:graphql_flutter/graphql_flutter.dart';
import 'package:provider/provider.dart'; import 'package:provider/provider.dart';
import 'package:flutter/foundation.dart'; import 'package:flutter/foundation.dart';
...@@ -130,6 +131,9 @@ class Gecko extends StatelessWidget { ...@@ -130,6 +131,9 @@ class Gecko extends StatelessWidget {
), ),
home: HomeScreen(), home: HomeScreen(),
initialRoute: "/", initialRoute: "/",
routes: {
'/mywallets': (context) => WalletsHome(),
},
), ),
)); ));
} }
......
lib/screens/commonElements.dart
+ 0
− 93
View file @ 5e539775
import 'dart:async';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:bubble/bubble.dart'; import 'package:bubble/bubble.dart';
import 'package:gecko/models/walletOptions.dart';
import 'package:pin_code_fields/pin_code_fields.dart';
import 'package:provider/provider.dart';
class CommonElements { class CommonElements {
// Exemple de Widget // Exemple de Widget
...@@ -119,94 +114,6 @@ class CommonElements { ...@@ -119,94 +114,6 @@ class CommonElements {
), ),
); );
} }
Widget pinForm(context, _pinLenght, int _walletNbr, int _derivation) {
final formKey = GlobalKey<FormState>();
bool hasError = false;
var pinColor = Color(0xffF9F9F1);
// var _walletPin = '';
// ignore: close_sinks
StreamController<ErrorAnimationType> errorController =
StreamController<ErrorAnimationType>();
TextEditingController _enterPin = TextEditingController();
WalletOptionsProvider _walletOptions =
Provider.of<WalletOptionsProvider>(context);
return Form(
key: formKey,
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 8.0, horizontal: 30),
child: PinCodeTextField(
autoFocus: true,
appContext: context,
pastedTextStyle: TextStyle(
color: Colors.green.shade600,
fontWeight: FontWeight.bold,
),
length: _pinLenght,
obscureText: false,
obscuringCharacter: '*',
animationType: AnimationType.fade,
validator: (v) {
if (v.length < _pinLenght) {
return "Votre code PIN fait $_pinLenght caractères";
} else {
return null;
}
},
pinTheme: PinTheme(
shape: PinCodeFieldShape.box,
borderRadius: BorderRadius.circular(5),
fieldHeight: 60,
fieldWidth: 50,
activeFillColor: hasError ? Colors.orange : Colors.white,
),
cursorColor: Colors.black,
animationDuration: Duration(milliseconds: 300),
textStyle: TextStyle(fontSize: 20, height: 1.6),
backgroundColor: pinColor,
enableActiveFill: false,
errorAnimationController: errorController,
controller: _enterPin,
keyboardType: TextInputType.text,
boxShadows: [
BoxShadow(
offset: Offset(0, 1),
color: Colors.black12,
blurRadius: 10,
)
],
onCompleted: (_pin) async {
print("Completed");
final resultWallet = await _walletOptions.readLocalWallet(
_walletNbr, _pin.toUpperCase(), _pinLenght, _derivation);
if (resultWallet == 'bad') {
errorController.add(ErrorAnimationType
.shake); // Triggering error shake animation
hasError = true;
pinColor = Colors.red[200];
// notifyListeners();
} else {
pinColor = Colors.green[200];
// setState(() {});
// await Future.delayed(Duration(milliseconds: 50));
// _walletPin = _pin.toUpperCase();
// isWalletUnlock = true;
// notifyListeners();
}
},
onChanged: (value) {
if (pinColor != Color(0xffF9F9F1)) {
pinColor = Color(0xffF9F9F1);
}
print(value);
},
)),
);
}
} }
class SmoothTransition extends PageRouteBuilder { class SmoothTransition extends PageRouteBuilder {
......
lib/screens/myWallets/walletOptions.dart
+ 172
− 81
View file @ 5e539775
...@@ -20,8 +20,8 @@ class WalletOptions extends StatelessWidget with ChangeNotifier { ...@@ -20,8 +20,8 @@ class WalletOptions extends StatelessWidget with ChangeNotifier {
String walletName; String walletName;
int derivation; int derivation;
// ignore: close_sinks
StreamController<ErrorAnimationType> errorController; StreamController<ErrorAnimationType> errorController;
TextEditingController _enterPin = TextEditingController();
final formKey = GlobalKey<FormState>(); final formKey = GlobalKey<FormState>();
bool hasError = false; bool hasError = false;
var pinColor = Color(0xffF9F9F1); var pinColor = Color(0xffF9F9F1);
...@@ -39,6 +39,7 @@ class WalletOptions extends StatelessWidget with ChangeNotifier { ...@@ -39,6 +39,7 @@ class WalletOptions extends StatelessWidget with ChangeNotifier {
Provider.of<MyWalletsProvider>(context); Provider.of<MyWalletsProvider>(context);
errorController = StreamController<ErrorAnimationType>(); errorController = StreamController<ErrorAnimationType>();
// _walletOptions.isWalletUnlock = false; // _walletOptions.isWalletUnlock = false;
print("Is unlock ? ${_walletOptions.isWalletUnlock}");
final int _pinLenght = _walletOptions.getPinLenght(this.walletNbr); final int _pinLenght = _walletOptions.getPinLenght(this.walletNbr);
...@@ -178,87 +179,177 @@ class WalletOptions extends StatelessWidget with ChangeNotifier { ...@@ -178,87 +179,177 @@ class WalletOptions extends StatelessWidget with ChangeNotifier {
fontWeight: FontWeight.w400), fontWeight: FontWeight.w400),
), ),
SizedBox(height: 50), SizedBox(height: 50),
Form( pinForm(context, _pinLenght, walletNbr, derivation)
key: formKey, // Form(
child: Padding( // key: formKey,
padding: const EdgeInsets.symmetric( // child: Padding(
vertical: 8.0, horizontal: 30), // padding: const EdgeInsets.symmetric(
child: PinCodeTextField( // vertical: 8.0, horizontal: 30),
autoFocus: true, // child: PinCodeTextField(
appContext: context, // autoFocus: true,
pastedTextStyle: TextStyle( // appContext: context,
color: Colors.green.shade600, // pastedTextStyle: TextStyle(
fontWeight: FontWeight.bold, // color: Colors.green.shade600,
), // fontWeight: FontWeight.bold,
length: _pinLenght, // ),
obscureText: false, // length: _pinLenght,
obscuringCharacter: '*', // obscureText: false,
animationType: AnimationType.fade, // obscuringCharacter: '*',
validator: (v) { // animationType: AnimationType.fade,
if (v.length < _pinLenght) { // validator: (v) {
return "Votre code PIN fait $_pinLenght caractères"; // if (v.length < _pinLenght) {
} else { // return "Votre code PIN fait $_pinLenght caractères";
return null; // } else {
} // return null;
}, // }
pinTheme: PinTheme( // },
shape: PinCodeFieldShape.box, // pinTheme: PinTheme(
borderRadius: BorderRadius.circular(5), // shape: PinCodeFieldShape.box,
fieldHeight: 60, // borderRadius: BorderRadius.circular(5),
fieldWidth: 50, // fieldHeight: 60,
activeFillColor: hasError // fieldWidth: 50,
? Colors.orange // activeFillColor: hasError
: Colors.white, // ? Colors.orange
), // : Colors.white,
cursorColor: Colors.black, // ),
animationDuration: // cursorColor: Colors.black,
Duration(milliseconds: 300), // animationDuration:
textStyle: // Duration(milliseconds: 300),
TextStyle(fontSize: 20, height: 1.6), // textStyle:
backgroundColor: pinColor, // TextStyle(fontSize: 20, height: 1.6),
enableActiveFill: false, // backgroundColor: pinColor,
errorAnimationController: errorController, // enableActiveFill: false,
controller: _enterPin, // errorAnimationController: errorController,
keyboardType: TextInputType.text, // controller: _enterPin,
boxShadows: [ // keyboardType: TextInputType.text,
BoxShadow( // boxShadows: [
offset: Offset(0, 1), // BoxShadow(
color: Colors.black12, // offset: Offset(0, 1),
blurRadius: 10, // color: Colors.black12,
) // blurRadius: 10,
], // )
onCompleted: (_pin) async { // ],
print("Completed"); // onCompleted: (_pin) async {
final resultWallet = // print("Completed");
await _walletOptions.readLocalWallet( // final resultWallet =
this.walletNbr, // await _walletOptions.readLocalWallet(
_pin.toUpperCase(), // this.walletNbr,
_pinLenght, // _pin.toUpperCase(),
this.derivation); // _pinLenght,
if (resultWallet == 'bad') { // this.derivation);
errorController.add(ErrorAnimationType // if (resultWallet == 'bad') {
.shake); // Triggering error shake animation // errorController.add(ErrorAnimationType
hasError = true; // .shake); // Triggering error shake animation
pinColor = Colors.red[200]; // hasError = true;
notifyListeners(); // pinColor = Colors.red[200];
} else { // notifyListeners();
pinColor = Colors.green[200]; // } else {
// setState(() {}); // pinColor = Colors.green[200];
// await Future.delayed(Duration(milliseconds: 50)); // // setState(() {});
this.walletPin = _pin.toUpperCase(); // // await Future.delayed(Duration(milliseconds: 50));
// isWalletUnlock = true; // this.walletPin = _pin.toUpperCase();
notifyListeners(); // // isWalletUnlock = true;
} // notifyListeners();
}, // }
onChanged: (value) { // },
if (pinColor != Color(0xffF9F9F1)) { // onChanged: (value) {
pinColor = Color(0xffF9F9F1); // if (pinColor != Color(0xffF9F9F1)) {
} // pinColor = Color(0xffF9F9F1);
print(value); // }
}, // print(value);
)), // },
) // )),
// )
]))), ]))),
]))))); ])))));
} }
Widget pinForm(context, _pinLenght, int _walletNbr, int _derivation) {
// var _walletPin = '';
// ignore: close_sinks
StreamController<ErrorAnimationType> errorController =
StreamController<ErrorAnimationType>();
TextEditingController _enterPin = TextEditingController();
WalletOptionsProvider _walletOptions =
Provider.of<WalletOptionsProvider>(context);
return Form(
key: formKey,
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 8.0, horizontal: 30),
child: PinCodeTextField(
autoFocus: true,
appContext: context,
pastedTextStyle: TextStyle(
color: Colors.green.shade600,
fontWeight: FontWeight.bold,
),
length: _pinLenght,
obscureText: false,
obscuringCharacter: '*',
animationType: AnimationType.fade,
validator: (v) {
if (v.length < _pinLenght) {
return "Votre code PIN fait $_pinLenght caractères";
} else {
return null;
}
},
pinTheme: PinTheme(
activeColor: pinColor,
borderWidth: 4,
shape: PinCodeFieldShape.box,
borderRadius: BorderRadius.circular(5),
fieldHeight: 60,
fieldWidth: 50,
activeFillColor: hasError ? Colors.blueAccent : Colors.black,
),
cursorColor: Colors.black,
animationDuration: Duration(milliseconds: 300),
textStyle: TextStyle(fontSize: 20, height: 1.6),
backgroundColor: Color(0xffF9F9F1),
enableActiveFill: false,
errorAnimationController: errorController,
controller: _enterPin,
keyboardType: TextInputType.text,
boxShadows: [
BoxShadow(
offset: Offset(0, 1),
color: Colors.black12,
blurRadius: 10,
)
],
onCompleted: (_pin) async {
print("Completed");
final resultWallet = await _walletOptions.readLocalWallet(
this.walletNbr,
_pin.toUpperCase(),
_pinLenght,
this.derivation);
if (resultWallet == 'bad') {
errorController.add(ErrorAnimationType
.shake); // Triggering error shake animation
hasError = true;
pinColor = Colors.red[600];
_walletOptions.reloadBuild();
} else {
pinColor = Colors.green[400];
// setState(() {});
// await Future.delayed(Duration(milliseconds: 50));
this.walletPin = _pin.toUpperCase();
_walletOptions.isWalletUnlock = true;
// isWalletUnlock = true;
_walletOptions.reloadBuild();
// notifyListeners();
}
},
onChanged: (value) {
if (pinColor != Color(0xFFA4B600)) {
pinColor = Color(0xFFA4B600);
}
print(value);
},
)),
);
}
} }
lib/screens/onBoarding/14_stepFourteen.dart
+ 3
− 2
View file @ 5e539775
...@@ -7,6 +7,7 @@ import 'package:gecko/models/generateWallets.dart'; ...@@ -7,6 +7,7 @@ import 'package:gecko/models/generateWallets.dart';
import 'package:gecko/models/myWallets.dart'; import 'package:gecko/models/myWallets.dart';
import 'package:gecko/models/walletOptions.dart'; import 'package:gecko/models/walletOptions.dart';
import 'package:gecko/screens/commonElements.dart'; import 'package:gecko/screens/commonElements.dart';
import 'package:gecko/screens/onBoarding/15_stepFiveteen.dart';
import 'package:pin_code_fields/pin_code_fields.dart'; import 'package:pin_code_fields/pin_code_fields.dart';
import 'package:provider/provider.dart'; import 'package:provider/provider.dart';
...@@ -118,9 +119,9 @@ class OnboardingStepFourteen extends StatelessWidget { ...@@ -118,9 +119,9 @@ class OnboardingStepFourteen extends StatelessWidget {
_myWalletProvider.getAllWalletsNames(); _myWalletProvider.getAllWalletsNames();
_walletOptions.reloadBuild(); _walletOptions.reloadBuild();
_myWalletProvider.rebuildWidget(); _myWalletProvider.rebuildWidget();
Navigator.popUntil( Navigator.push(
context, context,
ModalRoute.withName('/'), SmoothTransition(page: OnboardingStepFiveteen()),
); );
} else { } else {
errorController.add(ErrorAnimationType errorController.add(ErrorAnimationType
......
lib/screens/onBoarding/15_stepFiveteen.dart 0 → 100644
+ 58
− 0
View file @ 5e539775
import 'package:flutter/services.dart';
import 'package:flutter/material.dart';
import 'package:gecko/screens/commonElements.dart';
import 'package:gecko/screens/myWallets/walletsHome.dart';
// ignore: must_be_immutable
class OnboardingStepFiveteen extends StatelessWidget {
TextEditingController tplController = TextEditingController();
final int progress = 28;
@override
Widget build(BuildContext context) {
SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
CommonElements common = CommonElements();
return Scaffold(
extendBodyBehindAppBar: true,
body: SafeArea(
child: Column(children: <Widget>[
common.onboardingProgressBar('Ma phrase de restauration', progress),
common.bubbleSpeak(
"Top !\n\nVotre trousseau de clef et votre portefeuille ont été créés avec un immense succès.\n\nFélicitations !",
),
SizedBox(height: 10),
Image.asset(
'assets/onBoarding/gecko-clin.gif',
height: 300,
),
Expanded(
child: Align(
alignment: Alignment.bottomCenter,
child: SizedBox(
width: 400,
height: 62,
child: ElevatedButton(
style: ElevatedButton.styleFrom(
elevation: 5,
primary: Color(0xffD28928),
onPrimary: Colors.white, // foreground
),
onPressed: () {
Navigator.popUntil(
context,
ModalRoute.withName('/'),
);
Navigator.push(
context,
SmoothTransition(page: WalletsHome()),
);
},
child: Text("Accéder à mes portefeuilles",
style: TextStyle(fontSize: 20))),
))),
SizedBox(height: 80),
]),
));
}
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment