desktop home view wallets table view

This commit is contained in:
julian 2022-09-19 11:37:51 -06:00
parent 79327a145c
commit f25fc0696a
4 changed files with 196 additions and 157 deletions

View file

@ -0,0 +1,40 @@
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:stackwallet/utilities/cfcolors.dart';
import 'package:stackwallet/utilities/constants.dart';
import 'package:stackwallet/widgets/wallet_info_row/wallet_info_row.dart';
class CoinWalletsTable extends ConsumerWidget {
const CoinWalletsTable({
Key? key,
required this.walletIds,
}) : super(key: key);
final List<String> walletIds;
@override
Widget build(BuildContext context, WidgetRef ref) {
return Container(
decoration: BoxDecoration(
color: CFColors.background,
borderRadius: BorderRadius.circular(
Constants.size.circularBorderRadius,
),
),
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 20,
vertical: 16,
),
child: Column(
children: [
for (int i = 0; i < walletIds.length; i++)
WalletInfoRow(
walletId: walletIds[i],
),
],
),
),
);
}
}

View file

@ -1,5 +1,5 @@
import 'package:flutter/material.dart';
import 'package:stackwallet/pages_desktop_specific/home/my_stack_view/wallet_table.dart';
import 'package:stackwallet/pages_desktop_specific/home/my_stack_view/wallet_summary_table.dart';
import 'package:stackwallet/utilities/cfcolors.dart';
import 'package:stackwallet/utilities/text_styles.dart';
import 'package:stackwallet/widgets/custom_buttons/blue_text_button.dart';
@ -61,7 +61,7 @@ class _MyWalletsState extends State<MyWallets> {
const SizedBox(
height: 20,
),
const WalletTable(),
const WalletSummaryTable(),
],
),
),

View file

@ -0,0 +1,154 @@
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:stackwallet/pages_desktop_specific/home/my_stack_view/coin_wallets_table.dart';
import 'package:stackwallet/providers/providers.dart';
import 'package:stackwallet/utilities/cfcolors.dart';
import 'package:stackwallet/utilities/constants.dart';
import 'package:stackwallet/utilities/enums/coin_enum.dart';
import 'package:stackwallet/utilities/format.dart';
import 'package:stackwallet/utilities/text_styles.dart';
import 'package:stackwallet/widgets/table_view/table_view.dart';
import 'package:stackwallet/widgets/table_view/table_view_cell.dart';
import 'package:stackwallet/widgets/table_view/table_view_row.dart';
class WalletSummaryTable extends ConsumerStatefulWidget {
const WalletSummaryTable({Key? key}) : super(key: key);
@override
ConsumerState<WalletSummaryTable> createState() => _WalletTableState();
}
class _WalletTableState extends ConsumerState<WalletSummaryTable> {
@override
Widget build(BuildContext context) {
final providersByCoin = ref
.watch(
walletsChangeNotifierProvider.select(
(value) => value.getManagerProvidersByCoin(),
),
)
.entries
.toList(growable: false);
return TableView(
rows: [
for (int i = 0; i < providersByCoin.length; i++)
TableViewRow(
padding: const EdgeInsets.symmetric(
horizontal: 20,
vertical: 16,
),
decoration: BoxDecoration(
color: CFColors.background,
borderRadius: BorderRadius.circular(
Constants.size.circularBorderRadius,
),
),
cells: [
TableViewCell(
flex: 4,
child: Row(
children: [
// logo/icon
const SizedBox(
width: 10,
),
Text(
providersByCoin[i].key.prettyName,
style: STextStyles.desktopTextExtraSmall.copyWith(
color: CFColors.textDark,
),
)
],
),
),
TableViewCell(
flex: 4,
child: Text(
providersByCoin[i].value.length == 1
? "${providersByCoin[i].value.length} wallet"
: "${providersByCoin[i].value.length} wallets",
style: STextStyles.desktopTextExtraSmall.copyWith(
color: CFColors.textSubtitle1,
),
),
),
TableViewCell(
flex: 6,
child: TablePriceInfo(
coin: providersByCoin[i].key,
),
),
],
expandingChild: CoinWalletsTable(
walletIds: ref.watch(
walletsChangeNotifierProvider.select(
(value) => value.getWalletIdsFor(
coin: providersByCoin[i].key,
),
),
),
),
)
],
);
}
}
class TablePriceInfo extends ConsumerWidget {
const TablePriceInfo({Key? key, required this.coin}) : super(key: key);
final Coin coin;
@override
Widget build(BuildContext context, WidgetRef ref) {
final tuple = ref.watch(
priceAnd24hChangeNotifierProvider.select(
(value) => value.getPrice(coin),
),
);
final currency = ref.watch(
prefsChangeNotifierProvider.select(
(value) => value.currency,
),
);
final priceString = Format.localizedStringAsFixed(
value: tuple.item1,
locale: ref
.watch(
localeServiceChangeNotifierProvider.notifier,
)
.locale,
decimalPlaces: 2,
);
final double percentChange = tuple.item2;
var percentChangedColor = CFColors.stackAccent;
if (percentChange > 0) {
percentChangedColor = CFColors.stackGreen;
} else if (percentChange < 0) {
percentChangedColor = CFColors.stackRed;
}
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"$priceString $currency/${coin.ticker}",
style: STextStyles.desktopTextExtraSmall.copyWith(
color: CFColors.textSubtitle1,
),
),
Text(
"${percentChange.toStringAsFixed(2)}%",
style: STextStyles.desktopTextExtraSmall.copyWith(
color: percentChangedColor,
),
),
],
);
}
}

View file

@ -1,155 +0,0 @@
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:stackwallet/providers/providers.dart';
import 'package:stackwallet/services/coins/manager.dart';
import 'package:stackwallet/utilities/cfcolors.dart';
import 'package:stackwallet/utilities/enums/coin_enum.dart';
import 'package:stackwallet/utilities/format.dart';
import 'package:stackwallet/utilities/text_styles.dart';
class WalletTable extends ConsumerStatefulWidget {
const WalletTable({Key? key}) : super(key: key);
@override
ConsumerState<WalletTable> createState() => _WalletTableState();
}
class _WalletTableState extends ConsumerState<WalletTable> {
void tapRow(int index) {
print("row $index clicked");
}
TableRow getRowForCoin(
int index,
Map<Coin, List<ChangeNotifierProvider<Manager>>> providersByCoin,
) {
final coin = providersByCoin.keys.toList(growable: false)[index];
final walletCount = providersByCoin[coin]!.length;
final walletCountString =
walletCount == 1 ? "$walletCount wallet" : "$walletCount wallets";
return TableRow(
children: [
GestureDetector(
onTap: () {
tapRow(index);
},
child: Container(
decoration: BoxDecoration(
color: CFColors.background,
),
child: Row(
children: [
// logo/icon
const SizedBox(
width: 10,
),
Text(
coin.prettyName,
style: STextStyles.desktopTextExtraSmall.copyWith(
color: CFColors.textDark,
),
)
],
),
),
),
GestureDetector(
onTap: () {
tapRow(index);
},
child: Container(
decoration: BoxDecoration(
color: CFColors.background,
),
child: Text(
walletCountString,
style: STextStyles.desktopTextExtraSmall.copyWith(
color: CFColors.textSubtitle1,
),
),
),
),
GestureDetector(
onTap: () {
tapRow(index);
},
child: Container(
decoration: BoxDecoration(
color: CFColors.background,
),
child: PriceInfoRow(coin: coin),
),
),
],
);
}
@override
Widget build(BuildContext context) {
final providersByCoin = ref.watch(walletsChangeNotifierProvider
.select((value) => value.getManagerProvidersByCoin()));
return Table(
border: TableBorder.all(),
columnWidths: const <int, TableColumnWidth>{
0: FlexColumnWidth(1),
1: FlexColumnWidth(1.25),
2: FlexColumnWidth(1.75),
},
defaultVerticalAlignment: TableCellVerticalAlignment.middle,
children: [
for (int i = 0; i < providersByCoin.length; i++)
getRowForCoin(i, providersByCoin)
]);
}
}
class PriceInfoRow extends ConsumerWidget {
const PriceInfoRow({Key? key, required this.coin}) : super(key: key);
final Coin coin;
@override
Widget build(BuildContext context, WidgetRef ref) {
final tuple = ref.watch(priceAnd24hChangeNotifierProvider
.select((value) => value.getPrice(coin)));
final currency = ref
.watch(prefsChangeNotifierProvider.select((value) => value.currency));
final priceString = Format.localizedStringAsFixed(
value: tuple.item1,
locale: ref.watch(localeServiceChangeNotifierProvider.notifier).locale,
decimalPlaces: 2,
);
final double percentChange = tuple.item2;
var percentChangedColor = CFColors.stackAccent;
if (percentChange > 0) {
percentChangedColor = CFColors.stackGreen;
} else if (percentChange < 0) {
percentChangedColor = CFColors.stackRed;
}
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"$priceString $currency/${coin.ticker}",
style: STextStyles.desktopTextExtraSmall.copyWith(
color: CFColors.textSubtitle1,
),
),
Text(
"${percentChange.toStringAsFixed(2)}%",
style: STextStyles.desktopTextExtraSmall.copyWith(
color: percentChangedColor,
),
),
],
);
}
}