From 6e150f22edcdbc5d61c289ecf25c0871c07a15d7 Mon Sep 17 00:00:00 2001 From: Pierre-Louis Guidez Date: Thu, 2 Jun 2022 12:31:08 +0200 Subject: [PATCH] improve homescreen max width --- lib/layout/adaptive.dart | 4 +- lib/pages/home.dart | 274 ++++++++++++++++++++------------------- 2 files changed, 143 insertions(+), 135 deletions(-) diff --git a/lib/layout/adaptive.dart b/lib/layout/adaptive.dart index 59fd9de762..b81c13b64b 100644 --- a/lib/layout/adaptive.dart +++ b/lib/layout/adaptive.dart @@ -6,8 +6,8 @@ import 'package:adaptive_breakpoints/adaptive_breakpoints.dart'; import 'package:dual_screen/dual_screen.dart'; import 'package:flutter/material.dart'; -/// The maximum width taken up by the home screen contents. -const maxHomeWidth = 1400.0; +/// The maximum width taken up by each item on the home screen. +const maxHomeItemWidth = 1400.0; /// Returns a boolean value whether the window is considered medium or large size. /// diff --git a/lib/pages/home.dart b/lib/pages/home.dart index 6a8777b05a..c02f9a690f 100644 --- a/lib/pages/home.dart +++ b/lib/pages/home.dart @@ -165,94 +165,71 @@ class HomePage extends StatelessWidget { ]; return Scaffold( - body: Center( - child: Container( - constraints: const BoxConstraints(maxWidth: maxHomeWidth), - child: ListView( - // Makes integration tests possible. - key: const ValueKey('HomeListView'), - padding: EdgeInsetsDirectional.only( - top: isDesktop ? firstHeaderDesktopTopPadding : 21, - ), - children: [ - Padding( - padding: const EdgeInsets.symmetric( - horizontal: _horizontalDesktopPadding, - ), - child: _GalleryHeader(), - ), - SizedBox( - height: carouselHeight, - child: _DesktopCarousel(children: carouselCards), - ), - Padding( - padding: const EdgeInsets.symmetric( - horizontal: _horizontalDesktopPadding, - ), - child: _CategoriesHeader(), - ), - Container( - height: 585, - padding: const EdgeInsets.symmetric( - horizontal: _horizontalDesktopPadding, - ), - child: Row( - mainAxisSize: MainAxisSize.max, - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: spaceBetween(28, desktopCategoryItems), - ), + body: ListView( + // Makes integration tests possible. + key: const ValueKey('HomeListView'), + padding: const EdgeInsetsDirectional.only( + top: firstHeaderDesktopTopPadding, + ), + children: [ + _DesktopHomeItem(child: _GalleryHeader()), + _DesktopCarousel(height: carouselHeight, children: carouselCards), + _DesktopHomeItem(child: _CategoriesHeader()), + SizedBox( + height: 585, + child: _DesktopHomeItem( + child: Row( + mainAxisSize: MainAxisSize.max, + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: spaceBetween(28, desktopCategoryItems), ), - Padding( - padding: const EdgeInsetsDirectional.only( - start: _horizontalDesktopPadding, - bottom: 81, - end: _horizontalDesktopPadding, - top: 109, - ), - child: Row( - children: [ - MouseRegion( - cursor: SystemMouseCursors.click, - child: GestureDetector( - onTap: () async { - final url = Uri.parse('https://flutter.dev'); - if (await canLaunchUrl(url)) { - await launchUrl(url); - } - }, - child: FadeInImagePlaceholder( - image: Theme.of(context).colorScheme.brightness == - Brightness.dark - ? const AssetImage( - 'assets/logo/flutter_logo.png', - package: 'flutter_gallery_assets', - ) - : const AssetImage( - 'assets/logo/flutter_logo_color.png', - package: 'flutter_gallery_assets', - ), - placeholder: const SizedBox.shrink(), - excludeFromSemantics: true, - ), - ), - ), - Expanded( - child: Wrap( - crossAxisAlignment: WrapCrossAlignment.center, - alignment: WrapAlignment.end, - children: const [ - SettingsAbout(), - SettingsFeedback(), - SettingsAttribution(), - ], - ), + ), + ), + const SizedBox(height: 81), + _DesktopHomeItem( + child: Row( + children: [ + MouseRegion( + cursor: SystemMouseCursors.click, + child: GestureDetector( + onTap: () async { + final url = Uri.parse('https://flutter.dev'); + if (await canLaunchUrl(url)) { + await launchUrl(url); + } + }, + child: FadeInImagePlaceholder( + image: Theme.of(context).colorScheme.brightness == + Brightness.dark + ? const AssetImage( + 'assets/logo/flutter_logo.png', + package: 'flutter_gallery_assets', + ) + : const AssetImage( + 'assets/logo/flutter_logo_color.png', + package: 'flutter_gallery_assets', + ), + placeholder: const SizedBox.shrink(), + excludeFromSemantics: true, ), - ], + ), ), - ), - ], + Expanded( + child: Wrap( + crossAxisAlignment: WrapCrossAlignment.center, + alignment: WrapAlignment.end, + children: const [ + SettingsAbout(), + SettingsFeedback(), + SettingsAttribution(), + ], + ), + ), + ], + ), ), - ), + const SizedBox(height: 109), + ], ), ); } else { @@ -307,18 +284,21 @@ class Header extends StatelessWidget { @override Widget build(BuildContext context) { - return Padding( - padding: EdgeInsets.only( - top: isDisplayDesktop(context) ? 63 : 15, - bottom: isDisplayDesktop(context) ? 21 : 11, - ), - child: SelectableText( - text, - style: Theme.of(context).textTheme.headline4!.apply( - color: color, - fontSizeDelta: - isDisplayDesktop(context) ? desktopDisplay1FontDelta : 0, - ), + return Align( + alignment: AlignmentDirectional.centerStart, + child: Padding( + padding: EdgeInsets.only( + top: isDisplayDesktop(context) ? 63 : 15, + bottom: isDisplayDesktop(context) ? 21 : 11, + ), + child: SelectableText( + text, + style: Theme.of(context).textTheme.headline4!.apply( + color: color, + fontSizeDelta: + isDisplayDesktop(context) ? desktopDisplay1FontDelta : 0, + ), + ), ), ); } @@ -495,6 +475,26 @@ class _AnimatedHomePageState extends State<_AnimatedHomePage> } } +class _DesktopHomeItem extends StatelessWidget { + const _DesktopHomeItem({required this.child}); + + final Widget child; + + @override + Widget build(BuildContext context) { + return Align( + alignment: Alignment.center, + child: Container( + constraints: const BoxConstraints(maxWidth: maxHomeItemWidth), + padding: const EdgeInsets.symmetric( + horizontal: _horizontalDesktopPadding, + ), + child: child, + ), + ); + } +} + class _DesktopCategoryItem extends StatelessWidget { const _DesktopCategoryItem({ required this.category, @@ -842,8 +842,9 @@ class _CarouselState extends State<_Carousel> /// snapping behavior. A [PageView] was considered but does not allow for /// multiple pages visible without centering the first page. class _DesktopCarousel extends StatefulWidget { - const _DesktopCarousel({required this.children}); + const _DesktopCarousel({required this.height, required this.children}); + final double height; final List children; @override @@ -893,43 +894,50 @@ class _DesktopCarouselState extends State<_DesktopCarousel> { (_horizontalDesktopPadding - cardPadding) * 2; final itemWidth = totalWidth / _desktopCardsPerPage; - return Stack( - children: [ - Padding( - padding: const EdgeInsets.symmetric( - horizontal: _horizontalDesktopPadding - cardPadding, - ), - child: ListView.builder( - scrollDirection: Axis.horizontal, - physics: const _SnappingScrollPhysics(), - controller: _controller, - itemExtent: itemWidth, - itemCount: widget.children.length, - itemBuilder: (context, index) => _builder(index), - ), + return Align( + alignment: Alignment.center, + child: Container( + height: widget.height, + constraints: const BoxConstraints(maxWidth: maxHomeItemWidth), + child: Stack( + children: [ + Padding( + padding: const EdgeInsets.symmetric( + horizontal: _horizontalDesktopPadding - cardPadding, + ), + child: ListView.builder( + scrollDirection: Axis.horizontal, + physics: const _SnappingScrollPhysics(), + controller: _controller, + itemExtent: itemWidth, + itemCount: widget.children.length, + itemBuilder: (context, index) => _builder(index), + ), + ), + if (showPreviousButton) + _DesktopPageButton( + onTap: () { + _controller.animateTo( + _controller.offset - itemWidth, + duration: const Duration(milliseconds: 200), + curve: Curves.easeInOut, + ); + }, + ), + if (showNextButton) + _DesktopPageButton( + isEnd: true, + onTap: () { + _controller.animateTo( + _controller.offset + itemWidth, + duration: const Duration(milliseconds: 200), + curve: Curves.easeInOut, + ); + }, + ), + ], ), - if (showPreviousButton) - _DesktopPageButton( - onTap: () { - _controller.animateTo( - _controller.offset - itemWidth, - duration: const Duration(milliseconds: 200), - curve: Curves.easeInOut, - ); - }, - ), - if (showNextButton) - _DesktopPageButton( - isEnd: true, - onTap: () { - _controller.animateTo( - _controller.offset + itemWidth, - duration: const Duration(milliseconds: 200), - curve: Curves.easeInOut, - ); - }, - ), - ], + ), ); } }