Starter/samples
1
0
Fork 0
mirror of https://github.com/flutter/samples.git synced 2025-11-10 14:58:34 +00:00
Code Issues Releases Wiki Activity

[Gallery] Preserve demo state, simplify demo width calculations on desktop (#287)

Browse Source 
* Maintain state on mobile

* Refactor section width code

* Fix state resetting on desktop

* Remove unused import

* Remove unecessary GestureDetectorBehavior
This commit is contained in:
Pierre-Louis
2020-01-28 17:05:05 +01:00
committed by GitHub
parent 4e0b2e7b21
commit 5fe2c22309
1 changed files with 100 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
gallery/gallery/lib/pages/demo.dart
View File

@@ -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';
@@ -256,12 +255,14 @@ class _DemoPageState extends State<DemoPage> 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 +278,7 @@ class _DemoPageState extends State<DemoPage> with TickerProviderStateMixin {
case _DemoState.info:
section = _DemoSectionInfo(
maxHeight: maxSectionHeight,
maxWidth: maxSectionWidth,
title: _currentConfig.title,
description: _currentConfig.description,
);
@@ -314,44 +316,13 @@ class _DemoPageState extends State<DemoPage> 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(
final isFullScreen = _state == _DemoState.fullscreen;
final Widget sectionAndDemo = Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(child: section),
SizedBox(width: middleSpaceWidth),
Container(
width: demoContentWidth,
child: demoContent,
),
if (!isFullScreen) Expanded(child: section),
SizedBox(width: !isFullScreen ? 48.0 : 0),
Expanded(child: demoContent),
],
);
@@ -371,20 +342,22 @@ class _DemoPageState extends State<DemoPage> 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: () {
if (_state != _DemoState.normal) {
setStateAndUpdate(() {
_state = _DemoState.normal;
});
}
},
child: ExcludeSemantics(child: demoContent),
child: Semantics(
excludeSemantics: _state != _DemoState.normal,
child: demoContent,
),
),
);
}
body = SafeArea(
bottom: false,
@@ -491,12 +464,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<GalleryDemoConfiguration> configurations;
final int configIndex;
final ValueChanged<int> onConfigChanged;
@@ -506,8 +481,10 @@ class _DemoSectionOptions extends StatelessWidget {
final textTheme = Theme.of(context).textTheme;
final colorScheme = Theme.of(context).colorScheme;
return Container(
constraints: BoxConstraints(maxHeight: maxHeight),
return Align(
alignment: AlignmentDirectional.topStart,
child: Container(
constraints: BoxConstraints(maxHeight: maxHeight, maxWidth: maxWidth),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
@@ -550,6 +527,7 @@ class _DemoSectionOptions extends StatelessWidget {
SizedBox(height: 12),
],
),
),
);
}
}
@@ -594,11 +572,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;
@@ -607,14 +587,16 @@ class _DemoSectionInfo extends StatelessWidget {
final textTheme = Theme.of(context).textTheme;
final colorScheme = Theme.of(context).colorScheme;
return Container(
return Align(
alignment: AlignmentDirectional.topStart,
child: Container(
padding: const EdgeInsetsDirectional.only(
start: 24,
top: 12,
end: 24,
bottom: 32,
),
constraints: BoxConstraints(maxHeight: maxHeight),
constraints: BoxConstraints(maxHeight: maxHeight, maxWidth: maxWidth),
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
@@ -636,6 +618,7 @@ class _DemoSectionInfo extends StatelessWidget {
],
),
),
),
);
}
}