desktop send receive animation effects

This commit is contained in:
julian 2022-11-30 08:23:56 -06:00
parent 2476aa4d1f
commit 4eca159a19
3 changed files with 89 additions and 57 deletions

View file

@ -134,8 +134,10 @@ class _DesktopReceiveState extends ConsumerState<DesktopReceive> {
child: Container(
decoration: BoxDecoration(
border: Border.all(
color: Theme.of(context).extension<StackColors>()!.background,
width: 2,
color: Theme.of(context)
.extension<StackColors>()!
.backgroundAppBar,
width: 1,
),
borderRadius: BorderRadius.circular(
Constants.size.circularBorderRadius,

View file

@ -63,24 +63,25 @@ class _MyWalletState extends State<MyWallet> {
),
),
),
child: IndexedStack(
index: _selectedIndex,
children: [
Padding(
key: const Key("desktopSendViewPortKey"),
padding: const EdgeInsets.all(20),
child: DesktopSend(
walletId: widget.walletId,
),
child: AnimatedCrossFade(
firstChild: Padding(
key: const Key("desktopSendViewPortKey"),
padding: const EdgeInsets.all(20),
child: DesktopSend(
walletId: widget.walletId,
),
Padding(
key: const Key("desktopReceiveViewPortKey"),
padding: const EdgeInsets.all(20),
child: DesktopReceive(
walletId: widget.walletId,
),
),
secondChild: Padding(
key: const Key("desktopReceiveViewPortKey"),
padding: const EdgeInsets.all(20),
child: DesktopReceive(
walletId: widget.walletId,
),
],
),
crossFadeState: _selectedIndex == 0
? CrossFadeState.showFirst
: CrossFadeState.showSecond,
duration: const Duration(milliseconds: 250),
),
),
],

View file

@ -50,18 +50,29 @@ class _SendReceiveTabMenuState extends State<SendReceiveTabMenu> {
const SizedBox(
height: 16,
),
Text(
"Send",
style:
STextStyles.desktopTextExtraSmall(context).copyWith(
color: _selectedIndex == 0
? Theme.of(context)
.extension<StackColors>()!
.accentColorBlue
: Theme.of(context)
.extension<StackColors>()!
.textSubtitle1,
AnimatedCrossFade(
firstChild: Text(
"Send",
style:
STextStyles.desktopTextExtraSmall(context).copyWith(
color: Theme.of(context)
.extension<StackColors>()!
.accentColorBlue,
),
),
secondChild: Text(
"Send",
style:
STextStyles.desktopTextExtraSmall(context).copyWith(
color: Theme.of(context)
.extension<StackColors>()!
.textSubtitle1,
),
),
crossFadeState: _selectedIndex == 0
? CrossFadeState.showFirst
: CrossFadeState.showSecond,
duration: const Duration(milliseconds: 250),
),
const SizedBox(
height: 19,
@ -69,13 +80,9 @@ class _SendReceiveTabMenuState extends State<SendReceiveTabMenu> {
Container(
height: 2,
decoration: BoxDecoration(
color: _selectedIndex == 0
? Theme.of(context)
.extension<StackColors>()!
.accentColorBlue
: Theme.of(context)
.extension<StackColors>()!
.background,
color: Theme.of(context)
.extension<StackColors>()!
.backgroundAppBar,
),
),
],
@ -96,33 +103,55 @@ class _SendReceiveTabMenuState extends State<SendReceiveTabMenu> {
const SizedBox(
height: 16,
),
Text(
"Receive",
style:
STextStyles.desktopTextExtraSmall(context).copyWith(
color: _selectedIndex == 1
? Theme.of(context)
.extension<StackColors>()!
.accentColorBlue
: Theme.of(context)
.extension<StackColors>()!
.textSubtitle1,
AnimatedCrossFade(
firstChild: Text(
"Receive",
style:
STextStyles.desktopTextExtraSmall(context).copyWith(
color: Theme.of(context)
.extension<StackColors>()!
.accentColorBlue,
),
),
secondChild: Text(
"Receive",
style:
STextStyles.desktopTextExtraSmall(context).copyWith(
color: Theme.of(context)
.extension<StackColors>()!
.textSubtitle1,
),
),
crossFadeState: _selectedIndex == 1
? CrossFadeState.showFirst
: CrossFadeState.showSecond,
duration: const Duration(milliseconds: 250),
),
const SizedBox(
height: 19,
),
Container(
height: 2,
decoration: BoxDecoration(
color: _selectedIndex == 1
? Theme.of(context)
Stack(
children: [
Container(
height: 2,
decoration: BoxDecoration(
color: Theme.of(context)
.extension<StackColors>()!
.accentColorBlue
: Theme.of(context)
.extension<StackColors>()!
.background,
),
.backgroundAppBar,
),
),
AnimatedSlide(
offset: Offset(_selectedIndex == 0 ? -1 : 0, 0),
duration: const Duration(milliseconds: 250),
child: Container(
height: 2,
decoration: BoxDecoration(
color: Theme.of(context)
.extension<StackColors>()!
.accentColorBlue),
),
),
],
),
],
),