From 549fe30227a886f9db88c1196d37e1ca75a12bf2 Mon Sep 17 00:00:00 2001 From: Jordan Miller Date: Thu, 6 Jan 2022 13:58:47 -0700 Subject: [PATCH] solved for #113 --- raven_front/lib/backdrop/src/scaffold.dart | 14 ++++- raven_front/lib/main.dart | 5 +- raven_front/lib/pages/transaction/send.dart | 44 +++++++-------- raven_front/lib/theme/extensions.dart | 39 ++++++++++++++ raven_front/lib/widgets/back_layer.dart | 49 +++++++++++++++++ raven_front/lib/widgets/balance_header.dart | 60 +++++++++++++++++++++ raven_front/lib/widgets/nav_drawer.dart | 13 +++-- raven_front/lib/widgets/widgets.dart | 6 ++- 8 files changed, 199 insertions(+), 31 deletions(-) create mode 100644 raven_front/lib/widgets/back_layer.dart create mode 100644 raven_front/lib/widgets/balance_header.dart diff --git a/raven_front/lib/backdrop/src/scaffold.dart b/raven_front/lib/backdrop/src/scaffold.dart index 8ee4dd5ae..54fafcfc4 100644 --- a/raven_front/lib/backdrop/src/scaffold.dart +++ b/raven_front/lib/backdrop/src/scaffold.dart @@ -3,6 +3,8 @@ import 'package:flutter/gestures.dart'; import 'package:flutter/material.dart'; import 'package:flutter/scheduler.dart'; +import 'package:raven_back/streams/streams.dart'; + /// [InheritedWidget] that exposes state of [BackdropScaffold]. /// /// [Backdrop.of] can be used to access [BackdropScaffoldState] from anywhere @@ -573,7 +575,7 @@ class BackdropScaffoldState extends State Flexible(child: widget.frontLayer), ], ), - _buildInactiveLayer(context), + if (_hasFrontLayerScrim) _buildInactiveLayer(context), ], ), ), @@ -657,6 +659,16 @@ class BackdropScaffoldState extends State bool get _hasBackLayerScrim => isBackLayerConcealed && widget.frontLayerActiveFactor < 1; + /// this is not an ideal solution to + /// https://github.com/fluttercommunity/backdrop/issues/117 + /// because I don't want the backdrop layer to have access to the streams + /// I'd rather the widget inform the backdrop layer how to behave + /// However, I tried making the `Offstage` in `_buildInactiveLayer` work + /// according to a widget variable which was modified in realtime by + /// `.revealBackLayer(activeFront: true);` but that failed to work, so + /// though this is not the pure top-down solution I was hoping for, it works: + bool get _hasFrontLayerScrim => streams.app.page.value == 'Wallet'; + @override Widget build(BuildContext context) { return Backdrop( diff --git a/raven_front/lib/main.dart b/raven_front/lib/main.dart index 030086ab0..911e7a904 100644 --- a/raven_front/lib/main.dart +++ b/raven_front/lib/main.dart @@ -90,7 +90,8 @@ class RavenMobileApp extends StatelessWidget { }, builder: (context, child) { return BackdropScaffold( - headerHeight: 430, + //headerHeight: components.size.height, // use stickyFrontLayer instead + stickyFrontLayer: true, resizeToAvoidBottomInset: false, backgroundColor: Colors.white, backLayerBackgroundColor: Theme.of(context).backgroundColor, @@ -128,7 +129,7 @@ class RavenMobileApp extends StatelessWidget { SizedBox(width: 16), ], ), - backLayer: NavDrawer(), + backLayer: BackLayer(), frontLayer: Container(color: Colors.white, child: child!), floatingActionButton: NavBar(), floatingActionButtonLocation: diff --git a/raven_front/lib/pages/transaction/send.dart b/raven_front/lib/pages/transaction/send.dart index 06b58a26c..79fa69429 100644 --- a/raven_front/lib/pages/transaction/send.dart +++ b/raven_front/lib/pages/transaction/send.dart @@ -659,30 +659,26 @@ class _SendState extends State { onPressed: () async => await startSend(), style: components.buttonStyles.curvedSides); - Widget sendTransactionButton() => Expanded( - child: Container( - width: MediaQuery.of(context).size.width, - height: 40, - child: OutlinedButton.icon( - onPressed: () async => await startSend(), - icon: Image( - image: AssetImage('assets/icons/send/send_black.png'), - height: 24, - width: 24), - label: Text('SEND'.toUpperCase()), - style: ButtonStyle( - //fixedSize: MaterialStateProperty.all(Size(156, 40)), - textStyle: - MaterialStateProperty.all(Theme.of(context).navBarButton), - foregroundColor: MaterialStateProperty.all(Color(0xDE000000)), - side: MaterialStateProperty.all(BorderSide( - color: Color(0xFF5C6BC0), - width: 2, - style: BorderStyle.solid)), - shape: MaterialStateProperty.all(RoundedRectangleBorder( - borderRadius: BorderRadius.circular(20.0))), - ), - ))); + Widget sendTransactionButton() => Container( + width: MediaQuery.of(context).size.width, + height: 40, + child: OutlinedButton.icon( + onPressed: () async => await startSend(), + icon: Image( + image: AssetImage('assets/icons/send/send_black.png'), + height: 24, + width: 24), + label: Text('SEND'.toUpperCase()), + style: ButtonStyle( + //fixedSize: MaterialStateProperty.all(Size(156, 40)), + textStyle: MaterialStateProperty.all(Theme.of(context).navBarButton), + foregroundColor: MaterialStateProperty.all(Color(0xDE000000)), + side: MaterialStateProperty.all(BorderSide( + color: Color(0xFF5C6BC0), width: 2, style: BorderStyle.solid)), + shape: MaterialStateProperty.all(RoundedRectangleBorder( + borderRadius: BorderRadius.circular(20.0))), + ), + )); Future confirmMessage({ required ravencoin.Transaction tx, diff --git a/raven_front/lib/theme/extensions.dart b/raven_front/lib/theme/extensions.dart index d2065b9cf..06fc9fa7b 100644 --- a/raven_front/lib/theme/extensions.dart +++ b/raven_front/lib/theme/extensions.dart @@ -201,4 +201,43 @@ extension TextStyleExtension on ThemeData { fontWeight: FontWeightNames.semiBold, letterSpacing: 0.15, color: Color(0x99000000)); + TextStyle? get balanceAmount => this.brightness == Brightness.light + ? TextStyle( + fontSize: 24.0, + fontFamily: 'Nunito', + fontWeight: FontWeightNames.regular, + letterSpacing: 0.18, + color: Colors.white) + : TextStyle( + fontSize: 24.0, + fontFamily: 'Nunito', + fontWeight: FontWeightNames.regular, + letterSpacing: 0.18, + color: Colors.white); + TextStyle? get balanceDollar => this.brightness == Brightness.light + ? TextStyle( + fontSize: 16.0, + fontFamily: 'Nunito', + fontWeight: FontWeightNames.regular, + letterSpacing: 0.5, + color: Colors.white) + : TextStyle( + fontSize: 16.0, + fontFamily: 'Nunito', + fontWeight: FontWeightNames.regular, + letterSpacing: 0.5, + color: Colors.white); + TextStyle? get remaining => this.brightness == Brightness.light + ? TextStyle( + fontSize: 14.0, + fontFamily: 'Nunito', + fontWeight: FontWeightNames.regular, + letterSpacing: 0.25, + color: Color(0xDEFFFFFF)) + : TextStyle( + fontSize: 14.0, + fontFamily: 'Nunito', + fontWeight: FontWeightNames.regular, + letterSpacing: 0.25, + color: Color(0xDEFFFFFF)); } diff --git a/raven_front/lib/widgets/back_layer.dart b/raven_front/lib/widgets/back_layer.dart new file mode 100644 index 000000000..d31d12531 --- /dev/null +++ b/raven_front/lib/widgets/back_layer.dart @@ -0,0 +1,49 @@ +import 'package:flutter/material.dart'; +import 'package:raven_back/raven_back.dart'; +import 'package:raven_back/streams/streams.dart'; +import 'package:raven_front/widgets/widgets.dart'; + +class BackLayer extends StatefulWidget { + BackLayer({Key? key}) : super(key: key); + + @override + _BackLayerState createState() => _BackLayerState(); +} + +class _BackLayerState extends State { + late String pageTitle = 'Wallet'; + late List listeners = []; + + @override + void initState() { + super.initState(); + listeners.add(streams.app.page.stream.listen((value) { + if (value != pageTitle) { + setState(() { + pageTitle = value; + }); + } + })); + } + + @override + void dispose() { + for (var listener in listeners) { + listener.cancel(); + } + super.dispose(); + } + + @override + Widget build(BuildContext context) { + if (pageTitle.startsWith('Wallet')) { + return NavDrawer(); + } else if (pageTitle == 'Send') { + return BalanceHeader(); + } + return Container( + height: 0, + width: 0, + ); + } +} diff --git a/raven_front/lib/widgets/balance_header.dart b/raven_front/lib/widgets/balance_header.dart new file mode 100644 index 000000000..445f29688 --- /dev/null +++ b/raven_front/lib/widgets/balance_header.dart @@ -0,0 +1,60 @@ +import 'package:flutter/material.dart'; +import 'package:raven_front/backdrop/backdrop.dart'; +import 'package:raven_front/components/components.dart'; +import 'package:raven_front/theme/extensions.dart'; + +class BalanceHeader extends StatefulWidget { + BalanceHeader({Key? key}) : super(key: key); + + @override + _BalanceHeaderState createState() => _BalanceHeaderState(); +} + +class _BalanceHeaderState extends State { + List listeners = []; + + @override + void initState() { + super.initState(); + Backdrop.of(components.navigator.routeContext!).revealBackLayer(); + } + + @override + void dispose() { + for (var listener in listeners) { + listener.cancel(); + } + super.dispose(); + } + + @override + Widget build(BuildContext context) { + return Container( + padding: EdgeInsets.all(16), + child: ListView( + shrinkWrap: true, + children: [ + Column( + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + Image.asset( + 'assets/rvnonly.png', + height: 56, + width: 56, + ), + SizedBox(height: 8), + Text('amount', style: Theme.of(context).balanceAmount), + SizedBox(height: 1), + Text('dollars', style: Theme.of(context).balanceDollar), + SizedBox(height: 30), + Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ + Text('Remaining:', style: Theme.of(context).remaining), + Text('amount', style: Theme.of(context).remaining) + ]), + ], + ) + ], + ), + ); + } +} diff --git a/raven_front/lib/widgets/nav_drawer.dart b/raven_front/lib/widgets/nav_drawer.dart index 0862e9ed9..1ed3fafa9 100644 --- a/raven_front/lib/widgets/nav_drawer.dart +++ b/raven_front/lib/widgets/nav_drawer.dart @@ -62,10 +62,17 @@ class _NavDrawerState extends State { @override Widget build(BuildContext context) { - return Padding( + return Container( padding: EdgeInsets.only(left: 8), - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, + + /// using a listview makes it variable so you don't have to define height + //height: 300, + //child: Column( + // crossAxisAlignment: CrossAxisAlignment.start, + /// + + child: ListView( + shrinkWrap: true, children: [ destination( image: Image( diff --git a/raven_front/lib/widgets/widgets.dart b/raven_front/lib/widgets/widgets.dart index 13facc64d..dc586ad1b 100644 --- a/raven_front/lib/widgets/widgets.dart +++ b/raven_front/lib/widgets/widgets.dart @@ -3,8 +3,12 @@ export 'connection.dart'; export 'lead.dart'; export 'title.dart'; -// body +// back layer +export 'back_layer.dart'; export 'nav_drawer.dart'; +export 'balance_header.dart'; + +// floating action button export 'nav_bar.dart'; // lists