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

CWA-198 | created wallet card

Browse source
This commit is contained in:
Oleksandr Sobol 2020-04-14 21:15:47 +03:00
parent 2673ecd45e
commit 93b8bd8a35
6 changed files with 236 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 202 B

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 242 B

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 193 B

9
lib/palette.dart
View file

@ -69,4 +69,13 @@ class PaletteDark {
static const Color switchBackground = Color.fromRGBO(100, 115, 137, 0.4);
static const Color wildDarkBlueWithOpacity = Color.fromRGBO(155, 172, 197, 0.4);
static const Color wildDarkBlue = Color.fromRGBO(155, 172, 197, 0.8);
// NEW
static const Color backgroundStart = Color.fromRGBO(231, 240, 253, 1.0);
static const Color backgroundEnd = Color.fromRGBO(172, 203, 238, 1.0);
static const Color walletCardTopStartSync = Color.fromRGBO(89, 104, 152, 1.0);
static const Color walletCardBottomStartSync = Color.fromRGBO(70, 85, 133, 1.0);
static const Color walletCardTopEndSync = Color.fromRGBO(70, 85, 133, 1.0);
static const Color walletCardBottomEndSync = Color.fromRGBO(45, 56, 95, 1.0);
}

35
lib/src/screens/dashboard/dashboard_page.dart
View file

@ -24,11 +24,12 @@ import 'package:cake_wallet/src/screens/dashboard/transaction_raw.dart';
import 'package:cake_wallet/src/widgets/primary_button.dart';
import 'package:cake_wallet/src/screens/dashboard/wallet_menu.dart';
import 'package:cake_wallet/src/widgets/picker.dart';
import 'package:cake_wallet/src/screens/dashboard/widgets/wallet_card.dart';
class DashboardPage extends BasePage {
final _bodyKey = GlobalKey();
@override
/*@override
Widget leading(BuildContext context) {
return SizedBox(
width: 30,
@ -75,12 +76,14 @@ class DashboardPage extends BasePage {
child: Image.asset('assets/images/settings_icon.png',
color: Colors.grey, height: 20)),
);
}
}*/
@override
ObstructingPreferredSizeWidget appBar(BuildContext context) => null;
@override
Widget body(BuildContext context) => DashboardPageBody(key: _bodyKey);
@override
/*@override
Widget floatingActionButton(BuildContext context) => FloatingActionButton(
child: Image.asset('assets/images/exchange_icon.png',
color: Colors.white, height: 26, width: 22),
@ -100,7 +103,7 @@ class DashboardPage extends BasePage {
onItemSelected: (String item) =>
walletMenu.action(walletMenu.items.indexOf(item))),
context: bodyContext);
}
}*/
}
class DashboardPageBody extends StatefulWidget {
@ -120,7 +123,27 @@ class DashboardPageBodyState extends State<DashboardPageBody> {
@override
Widget build(BuildContext context) {
final balanceStore = Provider.of<BalanceStore>(context);
final List<Color> colors = [PaletteDark.backgroundStart, PaletteDark.backgroundEnd];
return SafeArea(
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: colors
)
),
child: Column(
children: <Widget>[
Padding(
padding: EdgeInsets.only(left: 20, top: 78),
child: WalletCard(),
)
],
),
),
);
/*final balanceStore = Provider.of<BalanceStore>(context);
final actionListStore = Provider.of<ActionListStore>(context);
final syncStore = Provider.of<SyncStore>(context);
final settingsStore = Provider.of<SettingsStore>(context);
@ -593,6 +616,6 @@ class DashboardPageBodyState extends State<DashboardPageBody> {
return Container();
});
});
});*/
}
}

198
lib/src/screens/dashboard/widgets/wallet_card.dart Normal file
View file

@ -0,0 +1,198 @@
import 'package:cake_wallet/src/stores/sync/sync_store.dart';
import 'package:cake_wallet/src/stores/wallet/wallet_store.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_mobx/flutter_mobx.dart';
import 'package:cake_wallet/palette.dart';
import 'package:provider/provider.dart';
import 'package:cake_wallet/generated/i18n.dart';
import 'package:cake_wallet/src/domain/common/sync_status.dart';
class WalletCard extends StatefulWidget {
@override
WalletCardState createState() => WalletCardState();
}
class WalletCardState extends State<WalletCard> {
final _syncingObserverKey = GlobalKey();
final triangleButton = Image.asset('assets/images/triangle.png');
final List<Color> colorsSync = [PaletteDark.walletCardTopEndSync, PaletteDark.walletCardBottomEndSync];
double cardWidth;
double screenWidth;
double opacity;
@override
void initState() {
cardWidth = 0;
screenWidth = 0;
opacity = 0;
super.initState();
WidgetsBinding.instance.addPostFrameCallback(afterLayout);
}
void afterLayout(dynamic _) {
screenWidth = MediaQuery.of(context).size.width;
setState(() {
cardWidth = screenWidth;
opacity = 1;
});
}
@override
Widget build(BuildContext context) {
final syncStore = Provider.of<SyncStore>(context);
final walletStore = Provider.of<WalletStore>(context);
return Container(
width: double.infinity,
height: 220,
alignment: Alignment.centerRight,
child: AnimatedContainer(
alignment: Alignment.centerLeft,
width: cardWidth,
height: 220,
duration: Duration(milliseconds: 500),
curve: Curves.fastOutSlowIn,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(topLeft: Radius.circular(10), bottomLeft: Radius.circular(10)),
gradient: LinearGradient(
colors: [PaletteDark.walletCardTopStartSync.withOpacity(opacity),
PaletteDark.walletCardBottomStartSync.withOpacity(opacity)],
begin: Alignment.topCenter,
end: Alignment.bottomCenter
)
),
child: screenWidth > 0 && cardWidth == screenWidth
? InkWell(
onTap: (){print('TAP');},
child: Observer(
key: _syncingObserverKey,
builder: (_) {
final status = syncStore.status;
final statusText = status.title();
final progress = syncStore.status.progress();
//final isFialure = status is FailedSyncStatus;
var descriptionText = '';
if (status is SyncingSyncStatus) {
descriptionText = S
.of(context)
.Blocks_remaining(
syncStore.status.toString());
}
if (status is FailedSyncStatus) {
descriptionText = S
.of(context)
.please_try_to_connect_to_another_node;
}
return Container(
width: cardWidth,
height: 220,
child: Stack(
children: <Widget>[
Container(
height: 220,
width: progress * cardWidth,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(topLeft: Radius.circular(10), bottomLeft: Radius.circular(10)),
gradient: LinearGradient(
colors: colorsSync,
begin: Alignment.topCenter,
end: Alignment.bottomCenter
)
),
),
Positioned(
left: 20,
right: 20,
top: 30,
bottom: 30,
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
InkWell(
onTap: (){print('TAP 2');},
child: Row(
children: <Widget>[
Text(
walletStore.name,
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold
),
),
SizedBox(width: 10),
triangleButton
],
),
),
SizedBox(
height: 5,
),
Text(
walletStore.account.label,
style: TextStyle(
fontSize: 12
),
)
],
),
Text(
walletStore.account.label
)
],
),
Row(
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
statusText,
style: TextStyle(
fontSize: 12
),
),
SizedBox(height: 5),
Text(
descriptionText,
style: TextStyle(
fontSize: 14
),
)
],
),
Text(
walletStore.account.label
)
],
)
],
),
)
)
],
),
);
},
)
)
: Offstage(),
),
);
}
}