Ecosystem/stack_wallet
1
0
Fork 0
mirror of https://github.com/cypherstack/stack_wallet.git synced 2024-11-17 17:57:40 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

desktop wallets table hover effects

Browse source
This commit is contained in:
julian 2022-11-28 15:21:18 -06:00
parent 3fef1ee674
commit d7cd5cb8a9
3 changed files with 209 additions and 79 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

87
lib/pages_desktop_specific/home/my_stack_view/coin_wallets_table.dart
View file

@ -3,6 +3,7 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:stackwallet/pages_desktop_specific/home/my_stack_view/wallet_view/desktop_wallet_view.dart';
import 'package:stackwallet/utilities/constants.dart';
import 'package:stackwallet/utilities/theme/stack_colors.dart';
import 'package:stackwallet/widgets/rounded_container.dart';
import 'package:stackwallet/widgets/wallet_info_row/wallet_info_row.dart';
class CoinWalletsTable extends ConsumerWidget {
@ -24,8 +25,10 @@ class CoinWalletsTable extends ConsumerWidget {
),
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 20,
vertical: 16,
// horizontal: 20,
// vertical: 16,
horizontal: 6,
vertical: 6,
),
child: Column(
children: [
@ -36,14 +39,26 @@ class CoinWalletsTable extends ConsumerWidget {
const SizedBox(
height: 32,
),
WalletInfoRow(
walletId: walletIds[i],
onPressed: () async {
await Navigator.of(context).pushNamed(
DesktopWalletView.routeName,
arguments: walletIds[i],
);
},
Stack(
children: [
WalletInfoRow(
padding: const EdgeInsets.symmetric(
horizontal: 14,
vertical: 10,
),
walletId: walletIds[i],
),
Positioned.fill(
child: WalletRowHoverOverlay(
onPressed: () async {
await Navigator.of(context).pushNamed(
DesktopWalletView.routeName,
arguments: walletIds[i],
);
},
),
),
],
),
],
),
@ -53,3 +68,55 @@ class CoinWalletsTable extends ConsumerWidget {
);
}
}
class WalletRowHoverOverlay extends StatefulWidget {
const WalletRowHoverOverlay({
Key? key,
required this.onPressed,
}) : super(key: key);
final VoidCallback onPressed;
@override
State<WalletRowHoverOverlay> createState() => _WalletRowHoverOverlayState();
}
class _WalletRowHoverOverlayState extends State<WalletRowHoverOverlay> {
late final VoidCallback onPressed;
bool _hovering = false;
@override
void initState() {
onPressed = widget.onPressed;
super.initState();
}
@override
Widget build(BuildContext context) {
return MouseRegion(
cursor: SystemMouseCursors.click,
onEnter: (_) {
setState(() {
_hovering = true;
});
},
onExit: (_) {
setState(() {
_hovering = false;
});
},
child: GestureDetector(
onTap: onPressed,
child: AnimatedOpacity(
duration: const Duration(milliseconds: 100),
opacity: _hovering ? 0.1 : 0,
child: RoundedContainer(
color:
Theme.of(context).extension<StackColors>()!.buttonBackSecondary,
),
),
),
);
}
}

106
lib/widgets/table_view/table_view_row.dart
View file

@ -3,7 +3,7 @@ import 'package:stackwallet/utilities/theme/stack_colors.dart';
import 'package:stackwallet/widgets/expandable.dart';
import 'package:stackwallet/widgets/table_view/table_view_cell.dart';
class TableViewRow extends StatelessWidget {
class TableViewRow extends StatefulWidget {
const TableViewRow({
Key? key,
required this.cells,
@ -17,40 +17,66 @@ class TableViewRow extends StatelessWidget {
final List<TableViewCell> cells;
final Widget? expandingChild;
final Decoration? decoration;
final BoxDecoration? decoration;
final void Function(ExpandableState)? onExpandChanged;
final EdgeInsetsGeometry padding;
final double spacing;
final CrossAxisAlignment crossAxisAlignment;
@override
State<TableViewRow> createState() => _TableViewRowState();
}
class _TableViewRowState extends State<TableViewRow> {
late final List<TableViewCell> cells;
late final Widget? expandingChild;
late final BoxDecoration? decoration;
late final void Function(ExpandableState)? onExpandChanged;
late final EdgeInsetsGeometry padding;
late final double spacing;
late final CrossAxisAlignment crossAxisAlignment;
bool _hovering = false;
@override
void initState() {
cells = widget.cells;
expandingChild = widget.expandingChild;
decoration = widget.decoration;
onExpandChanged = widget.onExpandChanged;
padding = widget.padding;
spacing = widget.spacing;
crossAxisAlignment = widget.crossAxisAlignment;
super.initState();
}
@override
Widget build(BuildContext context) {
return Container(
decoration: decoration,
decoration: !_hovering
? decoration
: decoration?.copyWith(
boxShadow: [
Theme.of(context).extension<StackColors>()!.standardBoxShadow,
Theme.of(context).extension<StackColors>()!.standardBoxShadow,
],
),
child: expandingChild == null
? Padding(
padding: padding,
child: Row(
crossAxisAlignment: crossAxisAlignment,
children: [
for (int i = 0; i < cells.length; i++) ...[
if (i != 0 && i != cells.length)
SizedBox(
width: spacing,
),
Expanded(
flex: cells[i].flex,
child: cells[i],
),
],
],
),
)
: Expandable(
onExpandChanged: onExpandChanged,
header: Padding(
? MouseRegion(
onEnter: (_) {
setState(() {
_hovering = true;
});
},
onExit: (_) {
setState(() {
_hovering = false;
});
},
child: Padding(
padding: padding,
child: Row(
crossAxisAlignment: crossAxisAlignment,
children: [
for (int i = 0; i < cells.length; i++) ...[
if (i != 0 && i != cells.length)
@ -65,6 +91,38 @@ class TableViewRow extends StatelessWidget {
],
),
),
)
: Expandable(
onExpandChanged: onExpandChanged,
header: MouseRegion(
onEnter: (_) {
setState(() {
_hovering = true;
});
},
onExit: (_) {
setState(() {
_hovering = false;
});
},
child: Padding(
padding: padding,
child: Row(
children: [
for (int i = 0; i < cells.length; i++) ...[
if (i != 0 && i != cells.length)
SizedBox(
width: spacing,
),
Expanded(
flex: cells[i].flex,
child: cells[i],
),
],
],
),
),
),
body: Column(
children: [
Container(

95
lib/widgets/wallet_info_row/wallet_info_row.dart
View file

@ -14,10 +14,12 @@ class WalletInfoRow extends ConsumerWidget {
Key? key,
required this.walletId,
this.onPressed,
this.padding = const EdgeInsets.all(0),
}) : super(key: key);
final String walletId;
final VoidCallback? onPressed;
final EdgeInsets padding;
@override
Widget build(BuildContext context, WidgetRef ref) {
@ -30,53 +32,56 @@ class WalletInfoRow extends ConsumerWidget {
cursor: SystemMouseCursors.click,
child: GestureDetector(
onTap: onPressed,
child: Container(
color: Colors.transparent,
child: Row(
children: [
Expanded(
flex: 4,
child: Row(
children: [
WalletInfoCoinIcon(coin: manager.coin),
const SizedBox(
width: 12,
),
Text(
manager.walletName,
style:
STextStyles.desktopTextExtraSmall(context).copyWith(
child: Padding(
padding: padding,
child: Container(
color: Colors.transparent,
child: Row(
children: [
Expanded(
flex: 4,
child: Row(
children: [
WalletInfoCoinIcon(coin: manager.coin),
const SizedBox(
width: 12,
),
Text(
manager.walletName,
style: STextStyles.desktopTextExtraSmall(context)
.copyWith(
color: Theme.of(context)
.extension<StackColors>()!
.textDark,
),
),
],
),
),
Expanded(
flex: 4,
child: WalletInfoRowBalanceFuture(
walletId: walletId,
),
),
Expanded(
flex: 6,
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
SvgPicture.asset(
Assets.svg.chevronRight,
width: 20,
height: 20,
color: Theme.of(context)
.extension<StackColors>()!
.textDark,
),
),
],
),
),
Expanded(
flex: 4,
child: WalletInfoRowBalanceFuture(
walletId: walletId,
),
),
Expanded(
flex: 6,
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
SvgPicture.asset(
Assets.svg.chevronRight,
width: 20,
height: 20,
color: Theme.of(context)
.extension<StackColors>()!
.textSubtitle1,
)
],
),
)
],
.textSubtitle1,
)
],
),
)
],
),
),
),
),