Ecosystem/stack_wallet
1
0
Fork 0
mirror of https://github.com/cypherstack/stack_wallet.git synced 2025-03-21 22:58:49 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

desktop trade steps indicator transitions

Browse source
This commit is contained in:
julian 2022-12-01 08:27:05 -06:00
parent 779bf20cc4
commit 788ae6fac1
1 changed files with 156 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

184
lib/pages_desktop_specific/desktop_exchange/subwidgets/desktop_exchange_steps_indicator.dart
View file

@ -10,34 +10,58 @@ class DesktopExchangeStepsIndicator extends StatelessWidget {
final int currentStep; final int currentStep;
Color getColor(BuildContext context, int step) { Color getColor(BuildContext context, int step) {
if (currentStep > step) { if (currentStep >= step) {
return Theme.of(context) return Theme.of(context)
.extension<StackColors>()! .extension<StackColors>()!
.accentColorBlue .accentColorBlue
.withOpacity(0.5); .withOpacity(0.5);
} else if (currentStep < step) {
return Theme.of(context).extension<StackColors>()!.textSubtitle3;
} else { } else {
return Theme.of(context).extension<StackColors>()!.accentColorBlue; return Theme.of(context).extension<StackColors>()!.textSubtitle3;
} }
} }
static const double verticalSpacing = 6; static const double verticalSpacing = 6;
static const double horizontalSpacing = 16; static const double horizontalSpacing = 16;
static const double barHeight = 4; static const double barHeight = 4;
static const double width = 152;
static const double barWidth = 146;
static const Duration duration = Duration(milliseconds: 250);
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final double step = double.parse(currentStep.toString());
final double dy = (step - 4) - (-(step - 4) * (horizontalSpacing / width));
return Row( return Row(
children: [ children: [
Expanded( SizedBox(
width: width,
child: Column( child: Column(
children: [ children: [
Text( AnimatedCrossFade(
"Confirm amount", firstChild: Text(
style: STextStyles.desktopTextExtraExtraSmall(context).copyWith( "Confirm amount",
color: getColor(context, 1), style:
STextStyles.desktopTextExtraExtraSmall(context).copyWith(
color: Theme.of(context)
.extension<StackColors>()!
.accentColorBlue,
),
), ),
secondChild: Text(
"Confirm amount",
style:
STextStyles.desktopTextExtraExtraSmall(context).copyWith(
color: Theme.of(context)
.extension<StackColors>()!
.accentColorBlue
.withOpacity(0.5),
),
),
crossFadeState: currentStep == 1
? CrossFadeState.showFirst
: CrossFadeState.showSecond,
duration: duration,
), ),
const SizedBox( const SizedBox(
height: verticalSpacing, height: verticalSpacing,
@ -53,14 +77,49 @@ class DesktopExchangeStepsIndicator extends StatelessWidget {
const SizedBox( const SizedBox(
width: horizontalSpacing, width: horizontalSpacing,
), ),
Expanded( SizedBox(
width: width,
child: Column( child: Column(
children: [ children: [
Text( AnimatedCrossFade(
"Enter details", firstChild: Text(
style: STextStyles.desktopTextExtraExtraSmall(context).copyWith( "Enter details",
color: getColor(context, 2), style:
STextStyles.desktopTextExtraExtraSmall(context).copyWith(
color: Theme.of(context)
.extension<StackColors>()!
.textSubtitle3,
),
), ),
secondChild: AnimatedCrossFade(
firstChild: Text(
"Enter details",
style: STextStyles.desktopTextExtraExtraSmall(context)
.copyWith(
color: Theme.of(context)
.extension<StackColors>()!
.accentColorBlue,
),
),
secondChild: Text(
"Enter details",
style: STextStyles.desktopTextExtraExtraSmall(context)
.copyWith(
color: Theme.of(context)
.extension<StackColors>()!
.accentColorBlue
.withOpacity(0.5),
),
),
crossFadeState: currentStep == 2 && currentStep > 1
? CrossFadeState.showFirst
: CrossFadeState.showSecond,
duration: duration,
),
crossFadeState: currentStep < 2
? CrossFadeState.showFirst
: CrossFadeState.showSecond,
duration: duration,
), ),
const SizedBox( const SizedBox(
height: verticalSpacing, height: verticalSpacing,
@ -76,14 +135,49 @@ class DesktopExchangeStepsIndicator extends StatelessWidget {
const SizedBox( const SizedBox(
width: horizontalSpacing, width: horizontalSpacing,
), ),
Expanded( SizedBox(
width: width,
child: Column( child: Column(
children: [ children: [
Text( AnimatedCrossFade(
"Confirm details", firstChild: Text(
style: STextStyles.desktopTextExtraExtraSmall(context).copyWith( "Confirm details",
color: getColor(context, 3), style:
STextStyles.desktopTextExtraExtraSmall(context).copyWith(
color: Theme.of(context)
.extension<StackColors>()!
.textSubtitle3,
),
), ),
secondChild: AnimatedCrossFade(
firstChild: Text(
"Confirm details",
style: STextStyles.desktopTextExtraExtraSmall(context)
.copyWith(
color: Theme.of(context)
.extension<StackColors>()!
.accentColorBlue,
),
),
secondChild: Text(
"Confirm details",
style: STextStyles.desktopTextExtraExtraSmall(context)
.copyWith(
color: Theme.of(context)
.extension<StackColors>()!
.accentColorBlue
.withOpacity(0.5),
),
),
crossFadeState: currentStep == 3 && currentStep > 2
? CrossFadeState.showFirst
: CrossFadeState.showSecond,
duration: duration,
),
crossFadeState: currentStep < 3
? CrossFadeState.showFirst
: CrossFadeState.showSecond,
duration: duration,
), ),
const SizedBox( const SizedBox(
height: verticalSpacing, height: verticalSpacing,
@ -99,22 +193,56 @@ class DesktopExchangeStepsIndicator extends StatelessWidget {
const SizedBox( const SizedBox(
width: horizontalSpacing, width: horizontalSpacing,
), ),
Expanded( SizedBox(
width: width,
child: Column( child: Column(
children: [ children: [
Text( AnimatedCrossFade(
"Complete exchange", firstChild: Text(
style: STextStyles.desktopTextExtraExtraSmall(context).copyWith( "Complete exchange",
color: getColor(context, 4), style:
STextStyles.desktopTextExtraExtraSmall(context).copyWith(
color: Theme.of(context)
.extension<StackColors>()!
.textSubtitle3,
),
), ),
secondChild: Text(
"Complete exchange",
style:
STextStyles.desktopTextExtraExtraSmall(context).copyWith(
color: Theme.of(context)
.extension<StackColors>()!
.accentColorBlue,
),
),
crossFadeState: currentStep < 4
? CrossFadeState.showFirst
: CrossFadeState.showSecond,
duration: duration,
), ),
const SizedBox( const SizedBox(
height: verticalSpacing, height: verticalSpacing,
), ),
RoundedContainer( Stack(
color: getColor(context, 4), children: [
height: barHeight, RoundedContainer(
width: double.infinity, color: getColor(context, 4),
height: barHeight,
width: double.infinity,
),
AnimatedSlide(
offset: Offset(dy, 0),
duration: duration,
child: RoundedContainer(
color: Theme.of(context)
.extension<StackColors>()!
.accentColorBlue,
height: barHeight,
width: double.infinity,
),
),
],
), ),
], ],
), ),