create single coin card widget

This commit is contained in:
julian 2023-06-08 10:59:44 -06:00
parent 1c88ca5f8d
commit d69b21b4a8
4 changed files with 146 additions and 175 deletions

View file

@ -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,
),
),
),
],
), ),
), ),
); );

View file

@ -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

View file

@ -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
View 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,
),
],
),
],
);
}
}