improve homescreen max width (#709)
diff --git a/lib/layout/adaptive.dart b/lib/layout/adaptive.dart
index 59fd9de..b81c13b 100644
--- a/lib/layout/adaptive.dart
+++ b/lib/layout/adaptive.dart
@@ -6,8 +6,8 @@
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 6a8777b..c02f9a6 100644
--- a/lib/pages/home.dart
+++ b/lib/pages/home.dart
@@ -165,94 +165,71 @@
];
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),
- ),
- ),
- 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(),
- ],
- ),
- ),
- ],
- ),
- ),
- ],
- ),
+ 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),
+ ),
+ ),
+ ),
+ 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 @@
@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 _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 @@
/// 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<Widget> children;
@override
@@ -893,43 +894,50 @@
(_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,
- );
- },
- ),
- ],
+ ),
);
}
}
