From 1493cf006158b5724307a6c228ff4fbc8cba7ada Mon Sep 17 00:00:00 2001 From: guidezpl Date: Tue, 28 Jan 2020 11:09:56 +0100 Subject: [PATCH 1/5] Maintain state on mobile --- gallery/gallery/lib/pages/demo.dart | 23 +++++++++++++---------- 1 file changed, 13 insertions(+), 10 deletions(-) diff --git a/gallery/gallery/lib/pages/demo.dart b/gallery/gallery/lib/pages/demo.dart index fbc1c9fe325..91f561fae70 100644 --- a/gallery/gallery/lib/pages/demo.dart +++ b/gallery/gallery/lib/pages/demo.dart @@ -371,20 +371,23 @@ class _DemoPageState extends State with TickerProviderStateMixin { ); // Add a tap gesture to collapse the currently opened section. - if (_state != _DemoState.normal) { - demoContent = Semantics( - label: MaterialLocalizations.of(context).modalBarrierDismissLabel, - child: GestureDetector( - behavior: HitTestBehavior.opaque, - onTap: () { + demoContent = Semantics( + label: MaterialLocalizations.of(context).modalBarrierDismissLabel, + child: GestureDetector( + behavior: HitTestBehavior.opaque, + onTap: () { + if (_state != _DemoState.normal) { setStateAndUpdate(() { _state = _DemoState.normal; }); - }, - child: ExcludeSemantics(child: demoContent), + } + }, + child: Semantics( + excludeSemantics: _state != _DemoState.normal, + child: demoContent, ), - ); - } + ), + ); body = SafeArea( bottom: false, From f0278d8281aa4bc3d92c8996edfdf46c821f6f9f Mon Sep 17 00:00:00 2001 From: guidezpl Date: Tue, 28 Jan 2020 11:58:48 +0100 Subject: [PATCH 2/5] Refactor section width code --- gallery/gallery/lib/pages/demo.dart | 185 ++++++++++++---------------- 1 file changed, 79 insertions(+), 106 deletions(-) diff --git a/gallery/gallery/lib/pages/demo.dart b/gallery/gallery/lib/pages/demo.dart index 91f561fae70..cc973b5744e 100644 --- a/gallery/gallery/lib/pages/demo.dart +++ b/gallery/gallery/lib/pages/demo.dart @@ -256,12 +256,14 @@ class _DemoPageState extends State with TickerProviderStateMixin { appBar.preferredSize.height; final maxSectionHeight = isDesktop ? contentHeight : contentHeight - 64; final horizontalPadding = isDesktop ? mediaQuery.size.width * 0.12 : 0.0; + final maxSectionWidth = 420.0; Widget section; switch (_state) { case _DemoState.options: section = _DemoSectionOptions( maxHeight: maxSectionHeight, + maxWidth: maxSectionWidth, configurations: widget.demo.configurations, configIndex: _configIndex, onConfigChanged: (index) { @@ -277,6 +279,7 @@ class _DemoPageState extends State with TickerProviderStateMixin { case _DemoState.info: section = _DemoSectionInfo( maxHeight: maxSectionHeight, + maxWidth: maxSectionWidth, title: _currentConfig.title, description: _currentConfig.description, ); @@ -314,46 +317,6 @@ class _DemoPageState extends State with TickerProviderStateMixin { buildRoute: _currentConfig.buildRoute, ); if (isDesktop) { - // If the available width is not very wide, reduce the amount of space - // between the demo content and the selected section. - const reducedMiddleSpaceWidth = 48.0; - - // Width of the space between the section and the demo content - // when the code is NOT displayed. - final nonCodePageMiddleSpaceWidth = mediaQuery.size.width > 900 - ? horizontalPadding - : reducedMiddleSpaceWidth; - - // Width of the space between the section and the demo content - // when the code is displayed. - final codePageMiddleSpaceWidth = - min(reducedMiddleSpaceWidth, nonCodePageMiddleSpaceWidth); - - // Width of the space between the section and the demo content - final middleSpaceWidth = _state == _DemoState.code - ? codePageMiddleSpaceWidth - : nonCodePageMiddleSpaceWidth; - - // Width for demo content. - // It is calculated in this way because the code demands more space. - final demoContentWidth = (mediaQuery.size.width - - horizontalPadding * 2 - - nonCodePageMiddleSpaceWidth) / - 2; - - final Widget sectionAndDemo = (_state == _DemoState.fullscreen) - ? demoContent - : Row( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Expanded(child: section), - SizedBox(width: middleSpaceWidth), - Container( - width: demoContentWidth, - child: demoContent, - ), - ], - ); body = SafeArea( child: Padding( @@ -494,12 +457,14 @@ class _DemoSectionOptions extends StatelessWidget { const _DemoSectionOptions({ Key key, this.maxHeight, + this.maxWidth, this.configurations, this.configIndex, this.onConfigChanged, }) : super(key: key); final double maxHeight; + final double maxWidth; final List configurations; final int configIndex; final ValueChanged onConfigChanged; @@ -509,49 +474,52 @@ class _DemoSectionOptions extends StatelessWidget { final textTheme = Theme.of(context).textTheme; final colorScheme = Theme.of(context).colorScheme; - return Container( - constraints: BoxConstraints(maxHeight: maxHeight), - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - mainAxisSize: MainAxisSize.min, - children: [ - Padding( - padding: const EdgeInsetsDirectional.only( - start: 24, - top: 12, - end: 24, - ), - child: Text( - GalleryLocalizations.of(context).demoOptionsTooltip, - style: textTheme.display1.apply( - color: colorScheme.onSurface, - fontSizeDelta: - isDisplayDesktop(context) ? desktopDisplay1FontDelta : 0, + return Align( + alignment: AlignmentDirectional.topStart, + child: Container( + constraints: BoxConstraints(maxHeight: maxHeight, maxWidth: maxWidth), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + mainAxisSize: MainAxisSize.min, + children: [ + Padding( + padding: const EdgeInsetsDirectional.only( + start: 24, + top: 12, + end: 24, + ), + child: Text( + GalleryLocalizations.of(context).demoOptionsTooltip, + style: textTheme.display1.apply( + color: colorScheme.onSurface, + fontSizeDelta: + isDisplayDesktop(context) ? desktopDisplay1FontDelta : 0, + ), ), ), - ), - Divider( - thickness: 1, - height: 16, - color: colorScheme.onSurface, - ), - Flexible( - child: ListView( - shrinkWrap: true, - children: [ - for (final configuration in configurations) - _DemoSectionOptionsItem( - title: configuration.title, - isSelected: configuration == configurations[configIndex], - onTap: () { - onConfigChanged(configurations.indexOf(configuration)); - }, - ), - ], + Divider( + thickness: 1, + height: 16, + color: colorScheme.onSurface, ), - ), - SizedBox(height: 12), - ], + Flexible( + child: ListView( + shrinkWrap: true, + children: [ + for (final configuration in configurations) + _DemoSectionOptionsItem( + title: configuration.title, + isSelected: configuration == configurations[configIndex], + onTap: () { + onConfigChanged(configurations.indexOf(configuration)); + }, + ), + ], + ), + ), + SizedBox(height: 12), + ], + ), ), ); } @@ -597,11 +565,13 @@ class _DemoSectionInfo extends StatelessWidget { const _DemoSectionInfo({ Key key, this.maxHeight, + this.maxWidth, this.title, this.description, }) : super(key: key); final double maxHeight; + final double maxWidth; final String title; final String description; @@ -610,33 +580,36 @@ class _DemoSectionInfo extends StatelessWidget { final textTheme = Theme.of(context).textTheme; final colorScheme = Theme.of(context).colorScheme; - return Container( - padding: const EdgeInsetsDirectional.only( - start: 24, - top: 12, - end: 24, - bottom: 32, - ), - constraints: BoxConstraints(maxHeight: maxHeight), - child: SingleChildScrollView( - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - mainAxisSize: MainAxisSize.min, - children: [ - Text( - title, - style: textTheme.display1.apply( - color: colorScheme.onSurface, - fontSizeDelta: - isDisplayDesktop(context) ? desktopDisplay1FontDelta : 0, + return Align( + alignment: AlignmentDirectional.topStart, + child: Container( + padding: const EdgeInsetsDirectional.only( + start: 24, + top: 12, + end: 24, + bottom: 32, + ), + constraints: BoxConstraints(maxHeight: maxHeight, maxWidth: maxWidth), + child: SingleChildScrollView( + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + mainAxisSize: MainAxisSize.min, + children: [ + Text( + title, + style: textTheme.display1.apply( + color: colorScheme.onSurface, + fontSizeDelta: + isDisplayDesktop(context) ? desktopDisplay1FontDelta : 0, + ), ), - ), - SizedBox(height: 12), - Text( - description, - style: textTheme.body1.apply(color: colorScheme.onSurface), - ), - ], + SizedBox(height: 12), + Text( + description, + style: textTheme.body1.apply(color: colorScheme.onSurface), + ), + ], + ), ), ), ); From 1478f3682bf9ecc7666e41d1fa3cc5517255f619 Mon Sep 17 00:00:00 2001 From: guidezpl Date: Tue, 28 Jan 2020 11:59:13 +0100 Subject: [PATCH 3/5] Fix state resetting on desktop --- gallery/gallery/lib/pages/demo.dart | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/gallery/gallery/lib/pages/demo.dart b/gallery/gallery/lib/pages/demo.dart index cc973b5744e..79a628a37ef 100644 --- a/gallery/gallery/lib/pages/demo.dart +++ b/gallery/gallery/lib/pages/demo.dart @@ -317,6 +317,15 @@ class _DemoPageState extends State with TickerProviderStateMixin { buildRoute: _currentConfig.buildRoute, ); if (isDesktop) { + final isFullScreen = _state == _DemoState.fullscreen; + final Widget sectionAndDemo = Row( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + if (!isFullScreen) Expanded(child: section), + SizedBox(width: !isFullScreen ? 48.0 : 0), + Expanded(child: demoContent), + ], + ); body = SafeArea( child: Padding( From e055a9a254fe1641ef8a25e2cff9198dbb749a63 Mon Sep 17 00:00:00 2001 From: guidezpl Date: Tue, 28 Jan 2020 12:37:17 +0100 Subject: [PATCH 4/5] Remove unused import --- gallery/gallery/lib/pages/demo.dart | 1 - 1 file changed, 1 deletion(-) diff --git a/gallery/gallery/lib/pages/demo.dart b/gallery/gallery/lib/pages/demo.dart index 79a628a37ef..89739020cf5 100644 --- a/gallery/gallery/lib/pages/demo.dart +++ b/gallery/gallery/lib/pages/demo.dart @@ -3,7 +3,6 @@ // found in the LICENSE file. import 'dart:io' show Platform; -import 'dart:math'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; From 51829548d8ad2b619d9f6e5f39c6dc7f0fe13699 Mon Sep 17 00:00:00 2001 From: guidezpl Date: Tue, 28 Jan 2020 16:35:01 +0100 Subject: [PATCH 5/5] Remove unecessary GestureDetectorBehavior --- gallery/gallery/lib/pages/demo.dart | 1 - 1 file changed, 1 deletion(-) diff --git a/gallery/gallery/lib/pages/demo.dart b/gallery/gallery/lib/pages/demo.dart index 89739020cf5..b829af6691e 100644 --- a/gallery/gallery/lib/pages/demo.dart +++ b/gallery/gallery/lib/pages/demo.dart @@ -345,7 +345,6 @@ class _DemoPageState extends State with TickerProviderStateMixin { demoContent = Semantics( label: MaterialLocalizations.of(context).modalBarrierDismissLabel, child: GestureDetector( - behavior: HitTestBehavior.opaque, onTap: () { if (_state != _DemoState.normal) { setStateAndUpdate(() {