bachelor/wonders
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Home menu now scrolls when it runs out of min-height

Browse Source
This commit is contained in:
Shawn 2023-04-11 14:44:29 -06:00
parent 3e6df3e8b0
commit 96734a070f
1 changed files with 72 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

141
lib/ui/screens/home_menu/home_menu.dart
View File

@ -18,6 +18,8 @@ class HomeMenu extends StatefulWidget {
} }
class _HomeMenuState extends State<HomeMenu> { class _HomeMenuState extends State<HomeMenu> {
double _btnSize(BuildContext context) => (context.sizePx.shortestSide / 5).clamp(60, 100);
void _handleAboutPressed(BuildContext context) async { void _handleAboutPressed(BuildContext context) async {
PackageInfo packageInfo = await PackageInfo.fromPlatform(); PackageInfo packageInfo = await PackageInfo.fromPlatform();
if (!mounted) return; if (!mounted) return;
@ -48,7 +50,7 @@ class _HomeMenuState extends State<HomeMenu> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final double gridWidth = (context.heightPx / 2).clamp(200, 350); final double gridWidth = _btnSize(context) * 3 * 1.2;
return Stack( return Stack(
children: [ children: [
/// Backdrop / Underlay /// Backdrop / Underlay
@ -66,29 +68,24 @@ class _HomeMenuState extends State<HomeMenu> {
), ),
/// Content /// Content
Positioned.fill( SafeArea(
child: SafeArea( child: Center(
child: Padding( child: SizedBox(
padding: EdgeInsets.symmetric(horizontal: $styles.insets.lg).copyWith(top: $styles.insets.lg), width: gridWidth,
child: Center( child: ExpandedScrollingColumn(
child: SizedBox( mainAxisAlignment: MainAxisAlignment.center,
width: gridWidth, children: [
child: Column( Gap(50),
mainAxisAlignment: MainAxisAlignment.end, Gap($styles.insets.md),
children: [ _buildIconGrid(context)
Gap($styles.insets.md), .animate()
Spacer(), .fade(duration: $styles.times.fast)
_buildIconGrid(context) .scale(begin: .8, curve: Curves.easeOut),
.animate() Gap($styles.insets.lg),
.fade(duration: $styles.times.fast) _buildBottomBtns(context),
.scale(begin: .8, curve: Curves.easeOut), //Spacer(),
Gap($styles.insets.lg), Gap($styles.insets.md),
_buildBottomBtns(context), ],
Spacer(),
Gap($styles.insets.md),
],
),
),
), ),
), ),
), ),
@ -98,26 +95,33 @@ class _HomeMenuState extends State<HomeMenu> {
} }
Widget _buildIconGrid(BuildContext context) { Widget _buildIconGrid(BuildContext context) {
return GridView.count( Widget buildRow(List<Widget> children) => SeparatedRow(
physics: NeverScrollableScrollPhysics(), mainAxisAlignment: MainAxisAlignment.center,
crossAxisCount: 3, separatorBuilder: () => Gap($styles.insets.sm),
clipBehavior: Clip.none, children: children,
shrinkWrap: true, );
crossAxisSpacing: $styles.insets.sm, return SeparatedColumn(
mainAxisSpacing: $styles.insets.sm, separatorBuilder: () => Gap($styles.insets.sm),
mainAxisSize: MainAxisSize.min,
children: [ children: [
_buildGridBtn(context, wondersLogic.all[0]), buildRow([
_buildGridBtn(context, wondersLogic.all[1]), _buildGridBtn(context, wondersLogic.all[0]),
_buildGridBtn(context, wondersLogic.all[2]), _buildGridBtn(context, wondersLogic.all[1]),
_buildGridBtn(context, wondersLogic.all[3]), _buildGridBtn(context, wondersLogic.all[2]),
Padding( ]),
padding: EdgeInsets.all($styles.insets.sm), buildRow([
child: SvgPicture.asset(SvgPaths.compassFull, color: $styles.colors.offWhite), _buildGridBtn(context, wondersLogic.all[3]),
), SizedBox(
_buildGridBtn(context, wondersLogic.all[4]), width: _btnSize(context),
_buildGridBtn(context, wondersLogic.all[5]), child: SvgPicture.asset(SvgPaths.compassFull, color: $styles.colors.offWhite),
_buildGridBtn(context, wondersLogic.all[6]), ),
_buildGridBtn(context, wondersLogic.all[7]), _buildGridBtn(context, wondersLogic.all[4]),
]),
buildRow([
_buildGridBtn(context, wondersLogic.all[5]),
_buildGridBtn(context, wondersLogic.all[6]),
_buildGridBtn(context, wondersLogic.all[7]),
]),
], ],
); );
} }
@ -156,32 +160,31 @@ class _HomeMenuState extends State<HomeMenu> {
Widget _buildGridBtn(BuildContext context, WonderData btnData) { Widget _buildGridBtn(BuildContext context, WonderData btnData) {
bool isSelected = btnData == widget.data; bool isSelected = btnData == widget.data;
return AspectRatio( return Container(
aspectRatio: 1, width: _btnSize(context),
child: Container( height: _btnSize(context),
decoration: BoxDecoration( decoration: BoxDecoration(
borderRadius: BorderRadius.circular($styles.corners.md), borderRadius: BorderRadius.circular($styles.corners.md),
boxShadow: !isSelected boxShadow: !isSelected
? null ? null
: [ : [
BoxShadow( BoxShadow(
color: Colors.black.withOpacity(.3), color: Colors.black.withOpacity(.3),
blurRadius: 3, blurRadius: 3,
spreadRadius: 3, spreadRadius: 3,
offset: Offset(0, 2), offset: Offset(0, 2),
), ),
], ],
), ),
child: ClipRRect( child: ClipRRect(
borderRadius: BorderRadius.circular($styles.corners.md), borderRadius: BorderRadius.circular($styles.corners.md),
child: AppBtn( child: AppBtn(
border: !isSelected ? null : BorderSide(color: $styles.colors.offWhite, width: 5), border: !isSelected ? null : BorderSide(color: $styles.colors.offWhite, width: 5),
bgColor: btnData.type.fgColor, bgColor: btnData.type.fgColor,
onPressed: () => _handleWonderPressed(context, btnData), onPressed: () => _handleWonderPressed(context, btnData),
padding: EdgeInsets.zero, padding: EdgeInsets.zero,
semanticLabel: btnData.title, semanticLabel: btnData.title,
child: SizedBox.expand(child: Image.asset(btnData.type.homeBtn, fit: BoxFit.cover)), child: Image.asset(btnData.type.homeBtn, fit: BoxFit.cover),
),
), ),
), ),
); );