Ecosystem/cake_wallet
1
0
Fork 0
mirror of https://github.com/cake-tech/cake_wallet.git synced 2024-12-22 19:49:22 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

CWA-201 | moved WalletTile class to wallet_tile.dart; changed design for PrimaryImageButton; changed background color for wallet_list_page; added short address to current wallet in the wallet_tile

Browse source
This commit is contained in:
Oleksandr Sobol 2020-04-24 15:01:19 +03:00
parent 28d8cd43dc
commit 6a799df7da
13 changed files with 216 additions and 194 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
assets/images/2.0x/eye_action.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 831 B

BIN
assets/images/2.0x/new_wallet.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 270 B

BIN
assets/images/2.0x/restore_wallet.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 451 B

BIN
assets/images/3.0x/eye_action.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
assets/images/3.0x/new_wallet.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 474 B

BIN
assets/images/3.0x/restore_wallet.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 586 B

BIN
assets/images/eye_action.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 481 B

BIN
assets/images/new_wallet.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 182 B

BIN
assets/images/restore_wallet.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 271 B

240
lib/src/screens/wallet_list/wallet_list_page.dart
View file

@ -9,7 +9,9 @@ import 'package:cake_wallet/src/widgets/primary_button.dart';
import 'package:cake_wallet/src/screens/base_page.dart';
import 'package:cake_wallet/src/widgets/scollable_with_bottom_section.dart';
import 'package:cake_wallet/src/stores/wallet_list/wallet_list_store.dart';
import 'package:cake_wallet/src/stores/wallet/wallet_store.dart';
import 'package:cake_wallet/src/screens/wallet_list/wallet_menu.dart';
import 'package:cake_wallet/src/screens/wallet_list/widgets/wallet_tile.dart';
class WalletListPage extends BasePage {
@ -27,17 +29,20 @@ class WalletListBody extends StatefulWidget {
class WalletListBodyState extends State<WalletListBody> {
final moneroIcon = Image.asset('assets/images/monero.png', height: 24, width: 24);
final newWalletImage = Image.asset('assets/images/new_wallet.png', height: 12, width: 12, color: PaletteDark.historyPanel);
final restoreWalletImage = Image.asset('assets/images/restore_wallet.png', height: 12, width: 12, color: Colors.white,);
WalletListStore _walletListStore;
ScrollController scrollController = ScrollController();
@override
Widget build(BuildContext context) {
final walletStore = Provider.of<WalletStore>(context);
_walletListStore = Provider.of<WalletListStore>(context);
return SafeArea(
child: Container(
padding: EdgeInsets.only(top: 32),
color: PaletteDark.menuHeader,
color: PaletteDark.historyPanel,
child: ScrollableWithBottomSection(
contentPadding: EdgeInsets.only(bottom: 20),
content: Container(
@ -46,7 +51,7 @@ class WalletListBodyState extends State<WalletListBody> {
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
separatorBuilder: (_, index) => Divider(
color: PaletteDark.menuHeader, height: 16),
color: PaletteDark.historyPanel, height: 16),
itemCount: _walletListStore.wallets.length,
itemBuilder: (__, index) {
final wallet = _walletListStore.wallets[index];
@ -55,6 +60,13 @@ class WalletListBodyState extends State<WalletListBody> {
final isCurrentWallet =
_walletListStore.isCurrentWallet(wallet);
String shortAddress = '';
if (isCurrentWallet) {
shortAddress = walletStore.subaddress.address;
shortAddress = shortAddress.replaceRange(4, shortAddress.length - 4, '...');
}
final walletMenu = WalletMenu(context);
final items = walletMenu.generateItemsForWalletMenu(isCurrentWallet);
final colors = walletMenu.generateColorsForWalletMenu(isCurrentWallet);
@ -75,7 +87,7 @@ class WalletListBodyState extends State<WalletListBody> {
max: screenWidth,
image: moneroIcon,
walletName: wallet.name,
walletAddress: '',
walletAddress: shortAddress,
isCurrent: isCurrentWallet
),
),
@ -87,49 +99,7 @@ class WalletListBodyState extends State<WalletListBody> {
final color = colors[index];
final image = images[index];
final content = Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
image,
SizedBox(height: 5),
Text(
item,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 12,
color: Colors.white
),
)
],
),
);
if (index == 0) {
return GestureDetector(
onTap: () {
scrollController.animateTo(0.0, duration: Duration(milliseconds: 500), curve: Curves.fastOutSlowIn);
walletMenu.action(
walletMenu.listItems.indexOf(item), wallet, isCurrentWallet);
},
child: Container(
height: 108,
width: 108,
color: PaletteDark.menuHeader,
child: Container(
padding: EdgeInsets.only(left: 5, right: 5),
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(12),
bottomLeft: Radius.circular(12)
),
color: color
),
child: content,
),
),
);
}
final radius = index == 0 ? 12.0 : 0.0;
return GestureDetector(
onTap: () {
@ -140,9 +110,34 @@ class WalletListBodyState extends State<WalletListBody> {
child: Container(
height: 108,
width: 108,
padding: EdgeInsets.only(left: 5, right: 5),
color: color,
child: content,
color: PaletteDark.historyPanel,
child: Container(
padding: EdgeInsets.only(left: 5, right: 5),
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(radius),
bottomLeft: Radius.circular(radius)
),
color: color
),
child: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
image,
SizedBox(height: 5),
Text(
item,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 12,
color: Colors.white
),
)
],
),
),
),
),
);
},
@ -156,143 +151,22 @@ class WalletListBodyState extends State<WalletListBody> {
),
),
bottomSection: Column(children: <Widget>[
PrimaryIconButton(
onPressed: () => Navigator.of(context).pushNamed(Routes.newWallet),
iconData: Icons.add,
color: Theme.of(context).primaryTextTheme.button.backgroundColor,
borderColor:
Theme.of(context).primaryTextTheme.button.decorationColor,
iconColor: Palette.violet,
iconBackgroundColor: Theme.of(context).primaryIconTheme.color,
text: S.of(context).wallet_list_create_new_wallet),
PrimaryImageButton(
onPressed: () => Navigator.of(context).pushNamed(Routes.newWallet),
image: newWalletImage,
text: S.of(context).wallet_list_create_new_wallet,
color: Colors.white,
textColor: PaletteDark.historyPanel),
SizedBox(height: 10.0),
PrimaryIconButton(
onPressed: () =>
Navigator.of(context).pushNamed(Routes.restoreWalletOptions),
iconData: Icons.refresh,
text: S.of(context).wallet_list_restore_wallet,
color: Theme.of(context).accentTextTheme.button.backgroundColor,
borderColor:
Theme.of(context).accentTextTheme.button.decorationColor,
iconColor: Theme.of(context).primaryTextTheme.caption.color,
iconBackgroundColor: Theme.of(context).accentIconTheme.color)
PrimaryImageButton(
onPressed: () =>
Navigator.of(context).pushNamed(Routes.restoreWalletOptions),
image: restoreWalletImage,
text: S.of(context).wallet_list_restore_wallet,
color: PaletteDark.historyPanelButton,
textColor: Colors.white)
])),
)
);
}
}
class WalletTile extends SliverPersistentHeaderDelegate {
WalletTile({
@required this.min,
@required this.max,
@required this.image,
@required this.walletName,
@required this.walletAddress,
@required this.isCurrent
});
final double min;
final double max;
final Image image;
final String walletName;
final String walletAddress;
final bool isCurrent;
@override
Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
double opacity = 1 - shrinkOffset / (max - min);
opacity = opacity >= 0 ? opacity : 0;
double panelWidth = 12 * opacity;
panelWidth = panelWidth < 12 ? 0 : 12;
final currentColor = isCurrent
? Colors.white
: PaletteDark.menuHeader;
return Stack(
fit: StackFit.expand,
overflow: Overflow.visible,
children: <Widget>[
Positioned(
top: 0,
right: max - 4,
child: Container(
height: 108,
width: 4,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(topRight: Radius.circular(4), bottomRight: Radius.circular(4)),
color: currentColor
),
),
),
Positioned(
top: 0,
right: 12,
child: Container(
height: 108,
width: max - 16,
padding: EdgeInsets.only(left: 20, right: 20),
color: PaletteDark.menuHeader,
child: Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
image,
SizedBox(width: 10),
Text(
walletName,
style: TextStyle(
fontSize: 22,
fontWeight: FontWeight.bold,
color: Colors.white
),
)
],
)
],
),
),
),
Positioned(
top: 0,
right: 0,
child: Opacity(
opacity: opacity,
child: Container(
height: 108,
width: panelWidth,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(topLeft: Radius.circular(12), bottomLeft: Radius.circular(12)),
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
PaletteDark.walletCardTopEndSync,
PaletteDark.walletCardBottomEndSync
]
)
),
),
)
),
],
);
}
@override
double get maxExtent => max;
@override
double get minExtent => min;
@override
bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) => true;
}

2
lib/src/screens/wallet_list/wallet_menu.dart
View file

@ -27,7 +27,7 @@ class WalletMenu {
final List<Image> listImages = [
Image.asset('assets/images/load.png', height: 32, width: 32, color: Colors.white),
Image.asset('assets/images/eye.png', height: 32, width: 32, color: Colors.white),
Image.asset('assets/images/eye_action.png', height: 32, width: 32, color: Colors.white),
Image.asset('assets/images/trash.png', height: 32, width: 32, color: Colors.white),
Image.asset('assets/images/scanner.png', height: 32, width: 32, color: Colors.white)
];

135
lib/src/screens/wallet_list/widgets/wallet_tile.dart Normal file
View file

@ -0,0 +1,135 @@
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:cake_wallet/palette.dart';
class WalletTile extends SliverPersistentHeaderDelegate {
WalletTile({
@required this.min,
@required this.max,
@required this.image,
@required this.walletName,
@required this.walletAddress,
@required this.isCurrent
});
final double min;
final double max;
final Image image;
final String walletName;
final String walletAddress;
final bool isCurrent;
@override
Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
double opacity = 1 - shrinkOffset / (max - min);
opacity = opacity >= 0 ? opacity : 0;
double panelWidth = 12 * opacity;
panelWidth = panelWidth < 12 ? 0 : 12;
final currentColor = isCurrent
? Colors.white
: PaletteDark.historyPanel;
return Stack(
fit: StackFit.expand,
overflow: Overflow.visible,
children: <Widget>[
Positioned(
top: 0,
right: max - 4,
child: Container(
height: 108,
width: 4,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(topRight: Radius.circular(4), bottomRight: Radius.circular(4)),
color: currentColor
),
),
),
Positioned(
top: 0,
right: 12,
child: Container(
height: 108,
width: max - 16,
padding: EdgeInsets.only(left: 20, right: 20),
color: PaletteDark.historyPanel,
child: Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
image,
SizedBox(width: 10),
Text(
walletName,
style: TextStyle(
fontSize: 22,
fontWeight: FontWeight.bold,
color: Colors.white
),
)
],
),
isCurrent ? SizedBox(height: 5) : Offstage(),
isCurrent
? Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
SizedBox(width: 34),
Text(
walletAddress,
style: TextStyle(
fontSize: 12,
color: PaletteDark.walletCardText
),
)
],
)
: Offstage()
],
),
),
),
Positioned(
top: 0,
right: 0,
child: Opacity(
opacity: opacity,
child: Container(
height: 108,
width: panelWidth,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(topLeft: Radius.circular(12), bottomLeft: Radius.circular(12)),
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
PaletteDark.walletCardTopEndSync,
PaletteDark.walletCardBottomEndSync
]
)
),
),
)
),
],
);
}
@override
double get maxExtent => max;
@override
double get minExtent => min;
@override
bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) => true;
}

33
lib/src/widgets/primary_button.dart
View file

@ -143,29 +143,42 @@ class PrimaryImageButton extends StatelessWidget {
{@required this.onPressed,
@required this.image,
@required this.text,
this.color = Palette.purple,
this.borderColor = Palette.deepPink,
this.iconColor = Colors.black});
@required this.color,
@required this.textColor});
final VoidCallback onPressed;
final Image image;
final Color color;
final Color borderColor;
final Color iconColor;
final Color textColor;
final String text;
@override
Widget build(BuildContext context) {
return ButtonTheme(
minWidth: double.infinity,
height: 58.0,
height: 52.0,
child: FlatButton(
onPressed: onPressed,
color: color,
shape: RoundedRectangleBorder(
side: BorderSide(color: borderColor),
borderRadius: BorderRadius.circular(12.0)),
child: Row(
borderRadius: BorderRadius.circular(26.0)),
child:Center(
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
image,
SizedBox(width: 15),
Text(
text,
style: TextStyle(
fontSize: 15,
color: textColor
),
)
],
),
)
/*Row(
children: <Widget>[
Container(
width: 28.0,
@ -192,7 +205,7 @@ class PrimaryImageButton extends StatelessWidget {
)
]))
],
),
),*/
));
}
}