Skip to content
This repository has been archived by the owner on Jun 13, 2024. It is now read-only.

Improve homescreen max width behavior #709

Merged
merged 1 commit into from
Jun 2, 2022
Merged

Improve homescreen max width behavior #709

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions lib/layout/adaptive.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
///
Expand Down
274 changes: 141 additions & 133 deletions lib/pages/home.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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,
),
),
),
);
}
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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<Widget> children;

@override
Expand Down Expand Up @@ -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,
);
},
),
],
),
);
}
}
Expand Down