Figma onboarding workflow

lib/screens/myWallets/unlockingWallet.dart

+import 'dart:async';
+
+import 'package:dubp/dubp.dart';
+import 'package:flutter/services.dart';
+import 'package:gecko/models/walletOptions.dart';
+import 'package:gecko/screens/commonElements.dart';
+import 'package:flutter/material.dart';
+import 'package:gecko/screens/myWallets/walletOptions.dart';
+import 'package:pin_code_fields/pin_code_fields.dart';
+import 'package:provider/provider.dart';
+// import 'package:gecko/models/home.dart';
+// import 'package:provider/provider.dart';
+
+// ignore: must_be_immutable
+class UnlockingWallet extends StatelessWidget {
+  UnlockingWallet(
+      {Key keyUnlockWallet,
+      @required this.walletNbr,
+      @required this.walletName,
+      @required this.derivation})
+      : super(key: keyUnlockWallet);
+  int walletNbr;
+  String walletName;
+  int derivation;
+
+  // ignore: close_sinks
+  StreamController<ErrorAnimationType> errorController;
+  final formKey = GlobalKey<FormState>();
+  bool hasError = false;
+  var pinColor = Color(0xffF9F9F1);
+  var walletPin = '';
+
+  Future<NewWallet> get badWallet => null;
+
+  @override
+  Widget build(BuildContext context) {
+    SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
+    WalletOptionsProvider _walletOptions =
+        Provider.of<WalletOptionsProvider>(context);
+    final int _pinLenght = _walletOptions.getPinLenght(this.walletNbr);
+    errorController = StreamController<ErrorAnimationType>();
+
+    return Scaffold(
+        // backgroundColor: Colors.brown[600],
+        body: SafeArea(
+      child: Column(children: <Widget>[
+        SizedBox(height: 20),
+        Expanded(
+          child: Column(children: <Widget>[
+            SizedBox(height: 150),
+            Text(
+              'Veuillez tapper votre code secret pour dévérouiller votre portefeuille.',
+              textAlign: TextAlign.center,
+              style: TextStyle(
+                  fontSize: 15.0,
+                  color: Colors.black,
+                  fontWeight: FontWeight.w400),
+            ),
+            SizedBox(height: 50),
+            pinForm(context, _pinLenght, walletNbr, derivation),
+          ]),
+        ),
+        GestureDetector(
+            onTap: () {
+              Navigator.popUntil(
+                context,
+                ModalRoute.withName('/'),
+              );
+            },
+            child: Icon(Icons.home))
+      ]),
+    ));
+  }
+
+  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];
+                // await Future.delayed(Duration(milliseconds: 50));
+                Navigator.push(
+                    context,
+                    SmoothTransition(
+                        page: WalletOptions(
+                            walletNbr: walletNbr,
+                            walletName: walletName,
+                            derivation: derivation)));
+              }
+            },
+            onChanged: (value) {
+              if (pinColor != Color(0xFFA4B600)) {
+                pinColor = Color(0xFFA4B600);
+              }
+              print(value);
+            },
+          )),
+    );
+  }
+}