mirror of
https://github.com/cypherstack/stack_wallet.git
synced 2024-11-17 17:57:40 +00:00
create single coin card widget
This commit is contained in:
parent
1c88ca5f8d
commit
d69b21b4a8
4 changed files with 146 additions and 175 deletions
|
@ -8,27 +8,15 @@
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
|
|
||||||
// import 'dart:html';
|
|
||||||
import 'dart:io';
|
|
||||||
|
|
||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
|
||||||
import 'package:flutter_svg/flutter_svg.dart';
|
|
||||||
import 'package:stackwallet/pages/wallet_view/sub_widgets/wallet_summary_info.dart';
|
import 'package:stackwallet/pages/wallet_view/sub_widgets/wallet_summary_info.dart';
|
||||||
import 'package:stackwallet/services/coins/manager.dart';
|
|
||||||
import 'package:stackwallet/services/event_bus/events/global/wallet_sync_status_changed_event.dart';
|
import 'package:stackwallet/services/event_bus/events/global/wallet_sync_status_changed_event.dart';
|
||||||
import 'package:stackwallet/themes/stack_colors.dart';
|
import 'package:stackwallet/widgets/coin_card.dart';
|
||||||
import 'package:stackwallet/utilities/assets.dart';
|
|
||||||
import 'package:stackwallet/utilities/constants.dart';
|
|
||||||
|
|
||||||
import '../../../themes/coin_card_provider.dart';
|
class WalletSummary extends StatelessWidget {
|
||||||
import '../../../utilities/enums/coin_enum.dart';
|
|
||||||
|
|
||||||
class WalletSummary extends ConsumerWidget {
|
|
||||||
const WalletSummary({
|
const WalletSummary({
|
||||||
Key? key,
|
Key? key,
|
||||||
required this.walletId,
|
required this.walletId,
|
||||||
required this.managerProvider,
|
|
||||||
required this.initialSyncStatus,
|
required this.initialSyncStatus,
|
||||||
this.aspectRatio = 2.0,
|
this.aspectRatio = 2.0,
|
||||||
this.minHeight = 100.0,
|
this.minHeight = 100.0,
|
||||||
|
@ -38,7 +26,6 @@ class WalletSummary extends ConsumerWidget {
|
||||||
}) : super(key: key);
|
}) : super(key: key);
|
||||||
|
|
||||||
final String walletId;
|
final String walletId;
|
||||||
final ChangeNotifierProvider<Manager> managerProvider;
|
|
||||||
final WalletSyncStatus initialSyncStatus;
|
final WalletSyncStatus initialSyncStatus;
|
||||||
|
|
||||||
final double aspectRatio;
|
final double aspectRatio;
|
||||||
|
@ -48,10 +35,7 @@ class WalletSummary extends ConsumerWidget {
|
||||||
final double maxWidth;
|
final double maxWidth;
|
||||||
|
|
||||||
@override
|
@override
|
||||||
Widget build(BuildContext context, WidgetRef ref) {
|
Widget build(BuildContext context) {
|
||||||
final Coin coin = ref.watch(managerProvider.select((value) => value.coin));
|
|
||||||
final bool hasCardImageBg = ref.watch(coinCardProvider(coin)) != null;
|
|
||||||
|
|
||||||
return AspectRatio(
|
return AspectRatio(
|
||||||
aspectRatio: aspectRatio,
|
aspectRatio: aspectRatio,
|
||||||
child: ConstrainedBox(
|
child: ConstrainedBox(
|
||||||
|
@ -61,92 +45,25 @@ class WalletSummary extends ConsumerWidget {
|
||||||
maxHeight: maxHeight,
|
maxHeight: maxHeight,
|
||||||
maxWidth: minWidth,
|
maxWidth: minWidth,
|
||||||
),
|
),
|
||||||
child: Stack(
|
child: LayoutBuilder(
|
||||||
children: [
|
builder: (_, constraints) => Stack(
|
||||||
if (hasCardImageBg)
|
children: [
|
||||||
Image.file(
|
CoinCard(
|
||||||
File(
|
walletId: walletId,
|
||||||
ref.watch(coinCardProvider(coin))!,
|
width: constraints.maxWidth,
|
||||||
),
|
height: constraints.maxHeight,
|
||||||
),
|
),
|
||||||
if (!hasCardImageBg)
|
|
||||||
Consumer(
|
|
||||||
builder: (_, ref, __) {
|
|
||||||
return Container(
|
|
||||||
decoration: BoxDecoration(
|
|
||||||
color: Theme.of(context)
|
|
||||||
.extension<StackColors>()!
|
|
||||||
.colorForCoin(ref.watch(
|
|
||||||
managerProvider.select((value) => value.coin))),
|
|
||||||
borderRadius: BorderRadius.circular(
|
|
||||||
Constants.size.circularBorderRadius,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
);
|
|
||||||
},
|
|
||||||
),
|
|
||||||
if (!hasCardImageBg)
|
|
||||||
Positioned.fill(
|
Positioned.fill(
|
||||||
child: Row(
|
child: Padding(
|
||||||
crossAxisAlignment: CrossAxisAlignment.start,
|
padding: const EdgeInsets.all(16.0),
|
||||||
children: [
|
child: WalletSummaryInfo(
|
||||||
const Spacer(
|
walletId: walletId,
|
||||||
flex: 5,
|
initialSyncStatus: initialSyncStatus,
|
||||||
),
|
),
|
||||||
Expanded(
|
|
||||||
flex: 6,
|
|
||||||
child: SvgPicture.asset(
|
|
||||||
Assets.svg.ellipse1,
|
|
||||||
// fit: BoxFit.fitWidth,
|
|
||||||
// clipBehavior: Clip.none,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
const SizedBox(
|
|
||||||
width: 25,
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
// Positioned.fill(
|
],
|
||||||
// child:
|
),
|
||||||
// Column(
|
|
||||||
// mainAxisAlignment: MainAxisAlignment.end,
|
|
||||||
// children: [
|
|
||||||
if (!hasCardImageBg)
|
|
||||||
Align(
|
|
||||||
alignment: Alignment.bottomCenter,
|
|
||||||
child: Row(
|
|
||||||
children: [
|
|
||||||
const Spacer(
|
|
||||||
flex: 1,
|
|
||||||
),
|
|
||||||
Expanded(
|
|
||||||
flex: 3,
|
|
||||||
child: SvgPicture.asset(
|
|
||||||
Assets.svg.ellipse2,
|
|
||||||
// fit: BoxFit.f,
|
|
||||||
// clipBehavior: Clip.none,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
const SizedBox(
|
|
||||||
width: 13,
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
),
|
|
||||||
// ],
|
|
||||||
// ),
|
|
||||||
// ),
|
|
||||||
Positioned.fill(
|
|
||||||
child: Padding(
|
|
||||||
padding: const EdgeInsets.all(16.0),
|
|
||||||
child: WalletSummaryInfo(
|
|
||||||
walletId: walletId,
|
|
||||||
initialSyncStatus: initialSyncStatus,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
|
|
|
@ -680,7 +680,6 @@ class _WalletViewState extends ConsumerState<WalletView> {
|
||||||
padding: const EdgeInsets.symmetric(horizontal: 16),
|
padding: const EdgeInsets.symmetric(horizontal: 16),
|
||||||
child: WalletSummary(
|
child: WalletSummary(
|
||||||
walletId: walletId,
|
walletId: walletId,
|
||||||
managerProvider: managerProvider,
|
|
||||||
initialSyncStatus: ref.watch(managerProvider
|
initialSyncStatus: ref.watch(managerProvider
|
||||||
.select((value) => value.isRefreshing))
|
.select((value) => value.isRefreshing))
|
||||||
? WalletSyncStatus.syncing
|
? WalletSyncStatus.syncing
|
||||||
|
|
|
@ -17,16 +17,15 @@ import 'package:stackwallet/pages/wallet_view/wallet_view.dart';
|
||||||
import 'package:stackwallet/pages_desktop_specific/my_stack_view/wallet_view/desktop_wallet_view.dart';
|
import 'package:stackwallet/pages_desktop_specific/my_stack_view/wallet_view/desktop_wallet_view.dart';
|
||||||
import 'package:stackwallet/providers/providers.dart';
|
import 'package:stackwallet/providers/providers.dart';
|
||||||
import 'package:stackwallet/services/coins/firo/firo_wallet.dart';
|
import 'package:stackwallet/services/coins/firo/firo_wallet.dart';
|
||||||
import 'package:stackwallet/themes/coin_card_provider.dart';
|
|
||||||
import 'package:stackwallet/themes/coin_icon_provider.dart';
|
import 'package:stackwallet/themes/coin_icon_provider.dart';
|
||||||
import 'package:stackwallet/themes/stack_colors.dart';
|
import 'package:stackwallet/themes/stack_colors.dart';
|
||||||
import 'package:stackwallet/utilities/amount/amount.dart';
|
import 'package:stackwallet/utilities/amount/amount.dart';
|
||||||
import 'package:stackwallet/utilities/amount/amount_formatter.dart';
|
import 'package:stackwallet/utilities/amount/amount_formatter.dart';
|
||||||
import 'package:stackwallet/utilities/assets.dart';
|
|
||||||
import 'package:stackwallet/utilities/constants.dart';
|
import 'package:stackwallet/utilities/constants.dart';
|
||||||
import 'package:stackwallet/utilities/enums/coin_enum.dart';
|
import 'package:stackwallet/utilities/enums/coin_enum.dart';
|
||||||
import 'package:stackwallet/utilities/text_styles.dart';
|
import 'package:stackwallet/utilities/text_styles.dart';
|
||||||
import 'package:stackwallet/utilities/util.dart';
|
import 'package:stackwallet/utilities/util.dart';
|
||||||
|
import 'package:stackwallet/widgets/coin_card.dart';
|
||||||
import 'package:stackwallet/widgets/conditional_parent.dart';
|
import 'package:stackwallet/widgets/conditional_parent.dart';
|
||||||
import 'package:tuple/tuple.dart';
|
import 'package:tuple/tuple.dart';
|
||||||
|
|
||||||
|
@ -68,8 +67,6 @@ class _FavoriteCardState extends ConsumerState<FavoriteCard> {
|
||||||
prefsChangeNotifierProvider.select((value) => value.externalCalls),
|
prefsChangeNotifierProvider.select((value) => value.externalCalls),
|
||||||
);
|
);
|
||||||
|
|
||||||
final bool hasCardImageBg = ref.watch(coinCardProvider(coin)) != null;
|
|
||||||
|
|
||||||
return ConditionalParent(
|
return ConditionalParent(
|
||||||
condition: Util.isDesktop,
|
condition: Util.isDesktop,
|
||||||
builder: (child) => MouseRegion(
|
builder: (child) => MouseRegion(
|
||||||
|
@ -148,75 +145,10 @@ class _FavoriteCardState extends ConsumerState<FavoriteCard> {
|
||||||
width: widget.width,
|
width: widget.width,
|
||||||
height: widget.height,
|
height: widget.height,
|
||||||
child: CardOverlayStack(
|
child: CardOverlayStack(
|
||||||
background: Stack(
|
background: CoinCard(
|
||||||
children: [
|
walletId: widget.walletId,
|
||||||
if (hasCardImageBg)
|
width: widget.width,
|
||||||
Image.file(
|
height: widget.height,
|
||||||
File(
|
|
||||||
ref.watch(coinCardProvider(coin))!,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
if (!hasCardImageBg)
|
|
||||||
Container(
|
|
||||||
width: widget.width,
|
|
||||||
height: widget.height,
|
|
||||||
decoration: BoxDecoration(
|
|
||||||
color: Theme.of(context)
|
|
||||||
.extension<StackColors>()!
|
|
||||||
.colorForCoin(coin),
|
|
||||||
borderRadius: BorderRadius.circular(
|
|
||||||
Constants.size.circularBorderRadius,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
if (!hasCardImageBg)
|
|
||||||
Column(
|
|
||||||
children: [
|
|
||||||
const Spacer(),
|
|
||||||
SizedBox(
|
|
||||||
height: widget.width * 0.3,
|
|
||||||
child: Row(
|
|
||||||
children: [
|
|
||||||
const Spacer(
|
|
||||||
flex: 9,
|
|
||||||
),
|
|
||||||
SvgPicture.asset(
|
|
||||||
Assets.svg.ellipse2,
|
|
||||||
height: widget.width * 0.3,
|
|
||||||
),
|
|
||||||
// ),
|
|
||||||
const Spacer(
|
|
||||||
flex: 2,
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
if (!hasCardImageBg)
|
|
||||||
Row(
|
|
||||||
children: [
|
|
||||||
const Spacer(
|
|
||||||
flex: 5,
|
|
||||||
),
|
|
||||||
SizedBox(
|
|
||||||
width: widget.width * 0.45,
|
|
||||||
child: Column(
|
|
||||||
children: [
|
|
||||||
SvgPicture.asset(
|
|
||||||
Assets.svg.ellipse1,
|
|
||||||
width: widget.width * 0.45,
|
|
||||||
),
|
|
||||||
const Spacer(),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
),
|
|
||||||
const Spacer(
|
|
||||||
flex: 1,
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
),
|
||||||
child: Padding(
|
child: Padding(
|
||||||
padding: const EdgeInsets.all(12.0),
|
padding: const EdgeInsets.all(12.0),
|
||||||
|
|
123
lib/widgets/coin_card.dart
Normal file
123
lib/widgets/coin_card.dart
Normal file
|
@ -0,0 +1,123 @@
|
||||||
|
/*
|
||||||
|
* This file is part of Stack Wallet.
|
||||||
|
*
|
||||||
|
* Copyright (c) 2023 Cypher Stack
|
||||||
|
* All Rights Reserved.
|
||||||
|
* The code is distributed under GPLv3 license, see LICENSE file for details.
|
||||||
|
* Generated by Cypher Stack on 2023-05-26
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
import 'dart:io';
|
||||||
|
|
||||||
|
import 'package:flutter/material.dart';
|
||||||
|
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||||
|
import 'package:flutter_svg/flutter_svg.dart';
|
||||||
|
import 'package:stackwallet/providers/providers.dart';
|
||||||
|
import 'package:stackwallet/themes/coin_card_provider.dart';
|
||||||
|
import 'package:stackwallet/themes/stack_colors.dart';
|
||||||
|
import 'package:stackwallet/utilities/assets.dart';
|
||||||
|
import 'package:stackwallet/utilities/constants.dart';
|
||||||
|
|
||||||
|
class CoinCard extends ConsumerWidget {
|
||||||
|
const CoinCard({
|
||||||
|
super.key,
|
||||||
|
required this.walletId,
|
||||||
|
required this.width,
|
||||||
|
required this.height,
|
||||||
|
});
|
||||||
|
|
||||||
|
final String walletId;
|
||||||
|
final double width;
|
||||||
|
final double height;
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context, WidgetRef ref) {
|
||||||
|
final coin = ref.watch(
|
||||||
|
walletsChangeNotifierProvider
|
||||||
|
.select((value) => value.getManager(walletId).coin),
|
||||||
|
);
|
||||||
|
|
||||||
|
final bool hasCardImageBg = ref.watch(coinCardProvider(coin)) != null;
|
||||||
|
|
||||||
|
return Stack(
|
||||||
|
children: [
|
||||||
|
if (hasCardImageBg)
|
||||||
|
Container(
|
||||||
|
width: width,
|
||||||
|
height: height,
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
image: DecorationImage(
|
||||||
|
fit: BoxFit.fill,
|
||||||
|
image: FileImage(
|
||||||
|
File(
|
||||||
|
ref.watch(coinCardProvider(coin))!,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
if (!hasCardImageBg)
|
||||||
|
Container(
|
||||||
|
width: width,
|
||||||
|
height: height,
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
color: Theme.of(context)
|
||||||
|
.extension<StackColors>()!
|
||||||
|
.colorForCoin(coin),
|
||||||
|
borderRadius: BorderRadius.circular(
|
||||||
|
Constants.size.circularBorderRadius,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
if (!hasCardImageBg)
|
||||||
|
Column(
|
||||||
|
children: [
|
||||||
|
const Spacer(),
|
||||||
|
SizedBox(
|
||||||
|
height: width * 0.3,
|
||||||
|
child: Row(
|
||||||
|
children: [
|
||||||
|
const Spacer(
|
||||||
|
flex: 9,
|
||||||
|
),
|
||||||
|
SvgPicture.asset(
|
||||||
|
Assets.svg.ellipse2,
|
||||||
|
height: width * 0.3,
|
||||||
|
),
|
||||||
|
// ),
|
||||||
|
const Spacer(
|
||||||
|
flex: 2,
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
if (!hasCardImageBg)
|
||||||
|
Row(
|
||||||
|
children: [
|
||||||
|
const Spacer(
|
||||||
|
flex: 5,
|
||||||
|
),
|
||||||
|
SizedBox(
|
||||||
|
width: width * 0.45,
|
||||||
|
child: Column(
|
||||||
|
children: [
|
||||||
|
SvgPicture.asset(
|
||||||
|
Assets.svg.ellipse1,
|
||||||
|
width: width * 0.45,
|
||||||
|
),
|
||||||
|
const Spacer(),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
const Spacer(
|
||||||
|
flex: 1,
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
],
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in a new issue