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( child: Container(
decoration: BoxDecoration( decoration: BoxDecoration(
border: Border.all( border: Border.all(
color: Theme.of(context).extension<StackColors>()!.background, color: Theme.of(context)
width: 2, .extension<StackColors>()!
.backgroundAppBar,
width: 1,
), ),
borderRadius: BorderRadius.circular( borderRadius: BorderRadius.circular(
Constants.size.circularBorderRadius, Constants.size.circularBorderRadius,

View file

@ -63,24 +63,25 @@ class _MyWalletState extends State<MyWallet> {
), ),
), ),
), ),
child: IndexedStack( child: AnimatedCrossFade(
index: _selectedIndex, firstChild: Padding(
children: [ key: const Key("desktopSendViewPortKey"),
Padding( padding: const EdgeInsets.all(20),
key: const Key("desktopSendViewPortKey"), child: DesktopSend(
padding: const EdgeInsets.all(20), walletId: widget.walletId,
child: DesktopSend(
walletId: widget.walletId,
),
), ),
Padding( ),
key: const Key("desktopReceiveViewPortKey"), secondChild: Padding(
padding: const EdgeInsets.all(20), key: const Key("desktopReceiveViewPortKey"),
child: DesktopReceive( padding: const EdgeInsets.all(20),
walletId: widget.walletId, 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( const SizedBox(
height: 16, height: 16,
), ),
Text( AnimatedCrossFade(
"Send", firstChild: Text(
style: "Send",
STextStyles.desktopTextExtraSmall(context).copyWith( style:
color: _selectedIndex == 0 STextStyles.desktopTextExtraSmall(context).copyWith(
? Theme.of(context) color: Theme.of(context)
.extension<StackColors>()! .extension<StackColors>()!
.accentColorBlue .accentColorBlue,
: Theme.of(context) ),
.extension<StackColors>()!
.textSubtitle1,
), ),
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( const SizedBox(
height: 19, height: 19,
@ -69,13 +80,9 @@ class _SendReceiveTabMenuState extends State<SendReceiveTabMenu> {
Container( Container(
height: 2, height: 2,
decoration: BoxDecoration( decoration: BoxDecoration(
color: _selectedIndex == 0 color: Theme.of(context)
? Theme.of(context) .extension<StackColors>()!
.extension<StackColors>()! .backgroundAppBar,
.accentColorBlue
: Theme.of(context)
.extension<StackColors>()!
.background,
), ),
), ),
], ],
@ -96,33 +103,55 @@ class _SendReceiveTabMenuState extends State<SendReceiveTabMenu> {
const SizedBox( const SizedBox(
height: 16, height: 16,
), ),
Text( AnimatedCrossFade(
"Receive", firstChild: Text(
style: "Receive",
STextStyles.desktopTextExtraSmall(context).copyWith( style:
color: _selectedIndex == 1 STextStyles.desktopTextExtraSmall(context).copyWith(
? Theme.of(context) color: Theme.of(context)
.extension<StackColors>()! .extension<StackColors>()!
.accentColorBlue .accentColorBlue,
: Theme.of(context) ),
.extension<StackColors>()!
.textSubtitle1,
), ),
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( const SizedBox(
height: 19, height: 19,
), ),
Container( Stack(
height: 2, children: [
decoration: BoxDecoration( Container(
color: _selectedIndex == 1 height: 2,
? Theme.of(context) decoration: BoxDecoration(
color: Theme.of(context)
.extension<StackColors>()! .extension<StackColors>()!
.accentColorBlue .backgroundAppBar,
: Theme.of(context) ),
.extension<StackColors>()! ),
.background, 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),
),
),
],
), ),
], ],
), ),