Skip to content

Commit

Permalink
fix(app): add scrollbar to overflowing onboarding
Browse files Browse the repository at this point in the history
  • Loading branch information
@tamslo
tamslo committed Sep 2, 2024
1 parent c0401fa commit e84d893
Show file tree
Hide file tree
Showing 2 changed files with 115 additions and 58 deletions.
6 changes: 4 additions & 2 deletions app/lib/common/widgets/direction_button.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,15 @@ class DirectionButton extends StatelessWidget {
required this.direction,
required this.text,
required this.onPressed,
this.iconSize = 32,
this.emphasize = false,
this.onDarkBackground = false,
});

final ButtonDirection direction;
final String text;
final FutureOr<void> Function() onPressed;
final double iconSize;
final bool emphasize;
final bool onDarkBackground;

Expand All @@ -32,14 +34,14 @@ class DirectionButton extends StatelessWidget {
final textColor = emphasize == onDarkBackground
? PharMeTheme.onSurfaceText
: Colors.white;
final separator = SizedBox(width: 8);
final separator = SizedBox(width: iconSize / 4);
final iconData = direction == ButtonDirection.forward
? Icons.arrow_forward_rounded
: Icons.arrow_back_rounded;
final icon = Icon(
iconData,
color: textColor,
size: 32,
size: iconSize,
);
final buttonText = Flexible(
child: Text(
Expand Down
167 changes: 111 additions & 56 deletions app/lib/onboarding/pages/onboarding.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,25 @@ class OnboardingPage extends HookWidget {
OnboardingPage({ this.isRevisiting = false });

final bool isRevisiting;

final iconSize = 32.0;
final sidePadding = PharMeTheme.mediumSpace;
final bottomPadding = PharMeTheme.smallSpace;
final indicatorSize = PharMeTheme.smallSpace;

double getCloseIconPadding(BuildContext context) {
return MediaQuery.of(context).padding.top + sidePadding;
}

double getTopPadding(BuildContext context) {
return isRevisiting
? getCloseIconPadding(context)
: MediaQuery.of(context).padding.top;
}

double getBottomSpace() {
return iconSize + 2 * bottomPadding + 4 * indicatorSize;
}

final _pages = [
OnboardingSubPage(
Expand Down Expand Up @@ -86,42 +105,51 @@ class OnboardingPage extends HookWidget {
child: Stack(
alignment: Alignment.topCenter,
children: [
Positioned.fill(
bottom: 96,
child: PageView(
controller: pageController,
onPageChanged: (newPage) => currentPage.value = newPage,
children: _pages,
),
),
if (isRevisiting) Positioned(
top: MediaQuery.of(context).padding.top +
PharMeTheme.mediumToLargeSpace,
right: PharMeTheme.mediumToLargeSpace,
top: getCloseIconPadding(context),
right: sidePadding,
child: IconButton(
icon: Icon(Icons.close, size: 32, color: Colors.white,),
icon: Icon(
Icons.close,
size: iconSize,
color: Colors.white,
),
onPressed: () => context.router.back(),
)
),
Positioned.fill(
top: isRevisiting
? getTopPadding(context) + iconSize
: getTopPadding(context),
bottom: getBottomSpace(),
child: Padding(
padding: EdgeInsets.symmetric(horizontal: sidePadding),
child: PageView(
controller: pageController,
onPageChanged: (newPage) => currentPage.value = newPage,
children: _pages,
),
),
),
Positioned(
bottom: 96,
bottom: getBottomSpace() - 2 * indicatorSize,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: _buildPageIndicator(context, currentPage.value),
),
),
Positioned(
bottom: PharMeTheme.mediumToLargeSpace,
right: PharMeTheme.mediumToLargeSpace,
bottom: bottomPadding,
right: sidePadding,
child: _buildNextButton(
context,
pageController,
currentPage.value == _pages.length - 1,
),
),
Positioned(
bottom: PharMeTheme.mediumToLargeSpace,
left: PharMeTheme.mediumToLargeSpace,
bottom: bottomPadding,
left: sidePadding,
child: _buildPrevButton(
context,
pageController,
Expand All @@ -145,9 +173,11 @@ class OnboardingPage extends HookWidget {
Widget _indicator(BuildContext context, bool isActive) {
return AnimatedContainer(
duration: Duration(milliseconds: 150),
margin: EdgeInsets.symmetric(horizontal: 8),
height: 8,
width: isActive ? 24 : 16,
margin: EdgeInsets.symmetric(horizontal: indicatorSize),
height: indicatorSize,
width: isActive
? PharMeTheme.mediumToLargeSpace
: PharMeTheme.mediumSpace,
decoration: BoxDecoration(
color: isActive ? Colors.white : PharMeTheme.onSurfaceColor,
borderRadius: BorderRadius.all(Radius.circular(12)),
Expand Down Expand Up @@ -187,6 +217,7 @@ class OnboardingPage extends HookWidget {
);
}
},
iconSize: iconSize,
onDarkBackground: true,
emphasize: isLastPage,
);
Expand All @@ -208,6 +239,7 @@ class OnboardingPage extends HookWidget {
);
},
text: context.l10n.onboarding_prev,
iconSize: iconSize,
onDarkBackground: true,
);
} else {
Expand Down Expand Up @@ -235,44 +267,67 @@ class OnboardingSubPage extends StatelessWidget {

@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.fromLTRB(32, 16, 32, 0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [
SizedBox(height: PharMeTheme.mediumSpace),
Center(
child: FractionallySizedBox(
alignment: Alignment.topCenter,
widthFactor: 0.75,
child: Image.asset(
illustrationPath,
height: 200,
),
),
const scrollbarThickness = 3.0;
const iconButtonPadding = 16.0; // to align the scrollbar

final scrollController = ScrollController();
return RawScrollbar(
controller: scrollController, // needed to always show scrollbar
thumbVisibility: true,
shape: StadiumBorder(),
padding: EdgeInsets.only(
top: PharMeTheme.mediumToLargeSpace,
right: iconButtonPadding,
),
thumbColor: Colors.white54,
thickness: scrollbarThickness,
child: SingleChildScrollView(
controller: scrollController,
child: Padding(
padding: EdgeInsets.symmetric(
horizontal: iconButtonPadding + 3 * scrollbarThickness,
),
SizedBox(height: PharMeTheme.mediumSpace),
Column(children: [
AutoSizeText(
getHeader(context),
style: PharMeTheme.textTheme.headlineLarge!.copyWith(
color: Colors.white,
),
maxLines: 2,
),
SizedBox(height: PharMeTheme.mediumSpace),
Text(
getText(context),
style: PharMeTheme.textTheme.bodyLarge!.copyWith(
color: Colors.white,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [
SizedBox(height: PharMeTheme.mediumSpace),
Center(
child: FractionallySizedBox(
alignment: Alignment.topCenter,
widthFactor: 0.75,
child: Image.asset(
illustrationPath,
height: 175,
),
),
),
),
if (child != null) ...[SizedBox(height: PharMeTheme.mediumSpace), child!],
]),
// Empty widget for spaceBetween in this column to work properly
Container(),
],
SizedBox(height: PharMeTheme.mediumSpace),
Column(children: [
AutoSizeText(
getHeader(context),
style: PharMeTheme.textTheme.headlineLarge!.copyWith(
color: Colors.white,
),
maxLines: 2,
),
SizedBox(height: PharMeTheme.mediumSpace),
Text(
getText(context),
style: PharMeTheme.textTheme.bodyLarge!.copyWith(
color: Colors.white,
),
),
if (child != null) ...[
SizedBox(height: PharMeTheme.mediumSpace),
child!,
],
]),
// Empty widget for spaceBetween in this column to work properly
Container(),
],
),
),
),
);
}
Expand Down

0 comments on commit e84d893

Please sign in to comment.