Add last onboarding screen, fix few stuff about wallet unlocking

This commit is contained in:
poka 2021-03-06 22:26:30 +01:00
parent 47f27d2342
commit 5e53977508
7 changed files with 237 additions and 176 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 115 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 MiB

View File

@ -11,6 +11,7 @@ import 'package:gecko/models/walletOptions.dart';
import 'package:gecko/screens/home.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:gecko/screens/myWallets/walletsHome.dart';
import 'package:graphql_flutter/graphql_flutter.dart';
import 'package:provider/provider.dart';
import 'package:flutter/foundation.dart';
@ -130,6 +131,9 @@ class Gecko extends StatelessWidget {
),
home: HomeScreen(),
initialRoute: "/",
routes: {
'/mywallets': (context) => WalletsHome(),
},
),
));
}

View File

@ -1,10 +1,5 @@
import 'dart:async';
import 'package:flutter/material.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 {
// Exemple de Widget
@ -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 {

View File

@ -20,8 +20,8 @@ class WalletOptions extends StatelessWidget with ChangeNotifier {
String walletName;
int derivation;
// ignore: close_sinks
StreamController<ErrorAnimationType> errorController;
TextEditingController _enterPin = TextEditingController();
final formKey = GlobalKey<FormState>();
bool hasError = false;
var pinColor = Color(0xffF9F9F1);
@ -39,6 +39,7 @@ class WalletOptions extends StatelessWidget with ChangeNotifier {
Provider.of<MyWalletsProvider>(context);
errorController = StreamController<ErrorAnimationType>();
// _walletOptions.isWalletUnlock = false;
print("Is unlock ? ${_walletOptions.isWalletUnlock}");
final int _pinLenght = _walletOptions.getPinLenght(this.walletNbr);
@ -178,87 +179,177 @@ class WalletOptions extends StatelessWidget with ChangeNotifier {
fontWeight: FontWeight.w400),
),
SizedBox(height: 50),
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(
this.walletNbr,
_pin.toUpperCase(),
_pinLenght,
this.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));
this.walletPin = _pin.toUpperCase();
// isWalletUnlock = true;
notifyListeners();
}
},
onChanged: (value) {
if (pinColor != Color(0xffF9F9F1)) {
pinColor = Color(0xffF9F9F1);
}
print(value);
},
)),
)
pinForm(context, _pinLenght, walletNbr, derivation)
// 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(
// this.walletNbr,
// _pin.toUpperCase(),
// _pinLenght,
// this.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));
// this.walletPin = _pin.toUpperCase();
// // isWalletUnlock = true;
// notifyListeners();
// }
// },
// onChanged: (value) {
// if (pinColor != Color(0xffF9F9F1)) {
// pinColor = Color(0xffF9F9F1);
// }
// 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);
},
)),
);
}
}

View File

@ -7,6 +7,7 @@ import 'package:gecko/models/generateWallets.dart';
import 'package:gecko/models/myWallets.dart';
import 'package:gecko/models/walletOptions.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:provider/provider.dart';
@ -118,9 +119,9 @@ class OnboardingStepFourteen extends StatelessWidget {
_myWalletProvider.getAllWalletsNames();
_walletOptions.reloadBuild();
_myWalletProvider.rebuildWidget();
Navigator.popUntil(
Navigator.push(
context,
ModalRoute.withName('/'),
SmoothTransition(page: OnboardingStepFiveteen()),
);
} else {
errorController.add(ErrorAnimationType

View File

@ -0,0 +1,58 @@
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),
]),
));
}
}