mirror of
https://github.com/cake-tech/cake_wallet.git
synced 2024-12-22 19:49:22 +00:00
CWA-198 | created wallet card
This commit is contained in:
parent
2673ecd45e
commit
93b8bd8a35
6 changed files with 236 additions and 6 deletions
BIN
assets/images/2.0x/triangle.png
Normal file
BIN
assets/images/2.0x/triangle.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 202 B |
BIN
assets/images/3.0x/triangle.png
Normal file
BIN
assets/images/3.0x/triangle.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 242 B |
BIN
assets/images/triangle.png
Normal file
BIN
assets/images/triangle.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 193 B |
|
@ -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);
|
||||
}
|
|
@ -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
198
lib/src/screens/dashboard/widgets/wallet_card.dart
Normal 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(),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
Loading…
Reference in a new issue