- Listen to keyboard events in PIN screen

- Fix PIN buttons style
This commit is contained in:
OmarHatem 2023-02-09 22:53:02 +02:00
parent a116241185
commit 677305f625

View file

@ -2,6 +2,7 @@ import 'package:cake_wallet/utils/show_bar.dart';
import 'package:another_flushbar/flushbar.dart'; import 'package:another_flushbar/flushbar.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:cake_wallet/generated/i18n.dart'; import 'package:cake_wallet/generated/i18n.dart';
import 'package:flutter/services.dart';
class PinCodeWidget extends StatefulWidget { class PinCodeWidget extends StatefulWidget {
PinCodeWidget( PinCodeWidget(
@ -117,87 +118,102 @@ class PinCodeState<T extends PinCodeWidget> extends State<T> {
color: Theme.of(context).primaryTextTheme!.headline6!.color!, color: Theme.of(context).primaryTextTheme!.headline6!.color!,
); );
return Container( return RawKeyboardListener(
color: Theme.of(context).backgroundColor, focusNode: FocusNode(),
padding: EdgeInsets.only(left: 40.0, right: 40.0, bottom: 40.0), autofocus: true,
child: Column(children: <Widget>[ onKey: (keyEvent) {
Spacer(flex: 2), if (keyEvent is RawKeyDownEvent) {
Text(title, if (keyEvent.logicalKey.keyLabel == "Backspace") {
style: TextStyle( _pop();
fontSize: 20, return;
fontWeight: FontWeight.w500, }
color: Theme.of(context).primaryTextTheme!.headline6!.color!)), int? number = int.tryParse(keyEvent.character ?? '');
Spacer(flex: 3), if (number != null) {
Container( _push(number);
width: 180, }
child: Row( }
mainAxisAlignment: MainAxisAlignment.spaceBetween, },
children: List.generate(pinLength, (index) { child: Container(
const size = 10.0; color: Theme.of(context).backgroundColor,
final isFilled = pin.length > index ? pin[index] != null : false; padding: EdgeInsets.only(left: 40.0, right: 40.0, bottom: 40.0),
child: Column(children: <Widget>[
Spacer(flex: 2),
Text(title,
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.w500,
color: Theme.of(context).primaryTextTheme!.headline6!.color!)),
Spacer(flex: 3),
Container(
width: 180,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: List.generate(pinLength, (index) {
const size = 10.0;
final isFilled = pin.length > index ? pin[index] != null : false;
return Container( return Container(
width: size, width: size,
height: size, height: size,
decoration: BoxDecoration( decoration: BoxDecoration(
shape: BoxShape.circle, shape: BoxShape.circle,
color: isFilled color: isFilled
? Theme.of(context).primaryTextTheme!.headline6!.color! ? Theme.of(context).primaryTextTheme!.headline6!.color!
: Theme.of(context) : Theme.of(context)
.accentTextTheme! .accentTextTheme!
.bodyText2! .bodyText2!
.color! .color!
.withOpacity(0.25), .withOpacity(0.25),
)); ));
}), }),
),
), ),
), Spacer(flex: 2),
Spacer(flex: 2), if (widget.hasLengthSwitcher) ...[
if (widget.hasLengthSwitcher) ...[ TextButton(
TextButton( onPressed: () {
onPressed: () { changePinLength(pinLength == PinCodeState.fourPinLength
changePinLength(pinLength == PinCodeState.fourPinLength ? PinCodeState.sixPinLength
? PinCodeState.sixPinLength : PinCodeState.fourPinLength);
: PinCodeState.fourPinLength); },
}, child: Text(
child: Text( _changePinLengthText(),
_changePinLengthText(), style: TextStyle(
style: TextStyle( fontSize: 14.0,
fontSize: 14.0, fontWeight: FontWeight.normal,
fontWeight: FontWeight.normal, color: Theme.of(context)
color: Theme.of(context) .accentTextTheme!
.accentTextTheme! .bodyText2!
.bodyText2! .decorationColor!),
.decorationColor!), ))
)) ],
], Spacer(flex: 1),
Spacer(flex: 1), Flexible(
Flexible( flex: 24,
flex: 24, child: Container(
child: Container( key: _gridViewKey,
key: _gridViewKey, child: _aspectRatio > 0
child: _aspectRatio > 0 ? GridView.count(
? GridView.count( shrinkWrap: true,
shrinkWrap: true, crossAxisCount: 3,
crossAxisCount: 3, childAspectRatio: _aspectRatio,
childAspectRatio: _aspectRatio, physics: const NeverScrollableScrollPhysics(),
physics: const NeverScrollableScrollPhysics(), children: List.generate(12, (index) {
children: List.generate(12, (index) { const double marginRight = 15;
const double marginRight = 15; const double marginLeft = 15;
const double marginLeft = 15;
if (index == 9) { if (index == 9) {
return Container( return Container(
margin: EdgeInsets.only( margin: EdgeInsets.only(
left: marginLeft, right: marginRight), left: marginLeft, right: marginRight),
child: TextButton( child: TextButton(
onPressed: () => null, onPressed: () => null,
// (widget.hasLengthSwitcher || // (widget.hasLengthSwitcher ||
// !settingsStore // !settingsStore
// .allowBiometricalAuthentication) // .allowBiometricalAuthentication)
// ? null // ? null
// : () { // : () {
// FIXME // FIXME
// if (authStore != null) { // if (authStore != null) {
// WidgetsBinding.instance.addPostFrameCallback((_) { // WidgetsBinding.instance.addPostFrameCallback((_) {
// final biometricAuth = BiometricAuth(); // final biometricAuth = BiometricAuth();
@ -217,57 +233,60 @@ class PinCodeState<T extends PinCodeWidget> extends State<T> {
// }); // });
// } // }
// }, // },
// FIX-ME: Style // FIX-ME: Style
//color: Theme.of(context).backgroundColor, //color: Theme.of(context).backgroundColor,
//shape: CircleBorder(), //shape: CircleBorder(),
child: Container() child: Container()
// (widget.hasLengthSwitcher || // (widget.hasLengthSwitcher ||
// !settingsStore // !settingsStore
// .allowBiometricalAuthentication) // .allowBiometricalAuthentication)
// ? Offstage() // ? Offstage()
// : faceImage, // : faceImage,
),
);
} else if (index == 10) {
index = 0;
} else if (index == 11) {
return Container(
margin: EdgeInsets.only(
left: marginLeft, right: marginRight),
child: TextButton(
onPressed: () => _pop(),
style: TextButton.styleFrom(
backgroundColor: Theme.of(context).backgroundColor,
shape: CircleBorder(),
), ),
); child: deleteIconImage,
} else if (index == 10) { ),
index = 0; );
} else if (index == 11) { } else {
index++;
}
return Container( return Container(
margin: EdgeInsets.only( margin: EdgeInsets.only(
left: marginLeft, right: marginRight), left: marginLeft, right: marginRight),
child: TextButton( child: TextButton(
onPressed: () => _pop(), onPressed: () => _push(index),
// FIX-ME: Style style: TextButton.styleFrom(
//color: Theme.of(context).backgroundColor, backgroundColor: Theme.of(context).backgroundColor,
//shape: CircleBorder(), shape: CircleBorder(),
child: deleteIconImage, ),
child: Text('$index',
style: TextStyle(
fontSize: 30.0,
fontWeight: FontWeight.w600,
color: Theme.of(context)
.primaryTextTheme!
.headline6!
.color!)),
), ),
); );
} else { }),
index++; )
} : null))
]),
return Container( ),
margin: EdgeInsets.only(
left: marginLeft, right: marginRight),
child: TextButton(
onPressed: () => _push(index),
// FIX-ME: Style
//color: Theme.of(context).backgroundColor,
//shape: CircleBorder(),
child: Text('$index',
style: TextStyle(
fontSize: 30.0,
fontWeight: FontWeight.w600,
color: Theme.of(context)
.primaryTextTheme!
.headline6!
.color!)),
),
);
}),
)
: null))
]),
); );
} }