home.dart 23.4 KB
Newer Older
Ian Hickson's avatar
Ian Hickson committed
1
// Copyright 2014 The Flutter Authors. All rights reserved.
2 3 4 5 6 7 8 9 10 11 12 13 14 15
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

// Based on https://material.uplabs.com/posts/google-newsstand-navigation-pattern
// See also: https://material-motion.github.io/material-motion/documentation/

import 'dart:math' as math;

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

import 'sections.dart';
import 'widgets.dart';

16 17
const Color _kAppBackgroundColor = Color(0xFF353662);
const Duration _kScrollDuration = Duration(milliseconds: 400);
18
const Curve _kScrollCurve = Curves.fastOutSlowIn;
19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

// This app's contents start out at _kHeadingMaxHeight and they function like
// an appbar. Initially the appbar occupies most of the screen and its section
// headings are laid out in a column. By the time its height has been
// reduced to _kAppBarMidHeight, its layout is horizontal, only one section
// heading is visible, and the section's list of details is visible below the
// heading. The appbar's height can be reduced to no more than _kAppBarMinHeight.
const double _kAppBarMinHeight = 90.0;
const double _kAppBarMidHeight = 256.0;
// The AppBar's max height depends on the screen, see _AnimationDemoHomeState._buildBody()

// Initially occupies the same space as the status bar and gets smaller as
// the primary scrollable scrolls upwards.
// TODO(hansmuller): it would be worth adding something like this to the framework.
class _RenderStatusBarPaddingSliver extends RenderSliver {
  _RenderStatusBarPaddingSliver({
35 36 37 38
    required double maxHeight,
    required double scrollFactor,
  }) : assert(maxHeight >= 0.0),
       assert(scrollFactor >= 1.0),
39 40
       _maxHeight = maxHeight,
       _scrollFactor = scrollFactor;
41 42 43 44

  // The height of the status bar
  double get maxHeight => _maxHeight;
  double _maxHeight;
45
  set maxHeight(double value) {
46
    assert(maxHeight >= 0.0);
47 48 49 50 51 52 53 54 55 56
    if (_maxHeight == value)
      return;
    _maxHeight = value;
    markNeedsLayout();
  }

  // That rate at which this renderer's height shrinks when the scroll
  // offset changes.
  double get scrollFactor => _scrollFactor;
  double _scrollFactor;
57
  set scrollFactor(double value) {
58
    assert(scrollFactor >= 1.0);
59 60 61 62 63 64 65 66
    if (_scrollFactor == value)
      return;
    _scrollFactor = value;
    markNeedsLayout();
  }

  @override
  void performLayout() {
67
    final double height = (maxHeight - constraints.scrollOffset / scrollFactor).clamp(0.0, maxHeight);
68
    geometry = SliverGeometry(
69 70 71 72 73 74 75 76
      paintExtent: math.min(height, constraints.remainingPaintExtent),
      scrollExtent: maxHeight,
      maxPaintExtent: maxHeight,
    );
  }
}

class _StatusBarPaddingSliver extends SingleChildRenderObjectWidget {
77
  const _StatusBarPaddingSliver({
78 79
    Key? key,
    required this.maxHeight,
80
    this.scrollFactor = 5.0,
81 82
  }) : assert(maxHeight >= 0.0),
       assert(scrollFactor >= 1.0),
83
       super(key: key);
84 85 86 87 88 89

  final double maxHeight;
  final double scrollFactor;

  @override
  _RenderStatusBarPaddingSliver createRenderObject(BuildContext context) {
90
    return _RenderStatusBarPaddingSliver(
91 92 93 94 95 96 97 98 99 100 101 102 103
      maxHeight: maxHeight,
      scrollFactor: scrollFactor,
    );
  }

  @override
  void updateRenderObject(BuildContext context, _RenderStatusBarPaddingSliver renderObject) {
    renderObject
      ..maxHeight = maxHeight
      ..scrollFactor = scrollFactor;
  }

  @override
104
  void debugFillProperties(DiagnosticPropertiesBuilder description) {
105
    super.debugFillProperties(description);
106 107
    description.add(DoubleProperty('maxHeight', maxHeight));
    description.add(DoubleProperty('scrollFactor', scrollFactor));
108 109 110 111 112
  }
}

class _SliverAppBarDelegate extends SliverPersistentHeaderDelegate {
  _SliverAppBarDelegate({
113 114 115
    required this.minHeight,
    required this.maxHeight,
    required this.child,
116 117 118 119 120 121
  });

  final double minHeight;
  final double maxHeight;
  final Widget child;

122 123 124 125
  @override
  double get minExtent => minHeight;
  @override
  double get maxExtent => math.max(maxHeight, minHeight);
126 127 128

  @override
  Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
129
    return SizedBox.expand(child: child);
130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165
  }

  @override
  bool shouldRebuild(_SliverAppBarDelegate oldDelegate) {
    return maxHeight != oldDelegate.maxHeight
        || minHeight != oldDelegate.minHeight
        || child != oldDelegate.child;
  }

  @override
  String toString() => '_SliverAppBarDelegate';
}

// Arrange the section titles, indicators, and cards. The cards are only included when
// the layout is transitioning between vertical and horizontal. Once the layout is
// horizontal the cards are laid out by a PageView.
//
// The layout of the section cards, titles, and indicators is defined by the
// two 0.0-1.0 "t" parameters, both of which are based on the layout's height:
// - tColumnToRow
//   0.0 when height is maxHeight and the layout is a column
//   1.0 when the height is midHeight and the layout is a row
// - tCollapsed
//   0.0 when height is midHeight and the layout is a row
//   1.0 when height is minHeight and the layout is a (still) row
//
// minHeight < midHeight < maxHeight
//
// The general approach here is to compute the column layout and row size
// and position of each element and then interpolate between them using
// tColumnToRow. Once tColumnToRow reaches 1.0, the layout changes are
// defined by tCollapsed. As tCollapsed increases the titles spread out
// until only one title is visible and the indicators cluster together
// until they're all visible.
class _AllSectionsLayout extends MultiChildLayoutDelegate {
  _AllSectionsLayout({
166
    this.translation,
167 168 169 170 171 172
    this.tColumnToRow,
    this.tCollapsed,
    this.cardCount,
    this.selectedIndex,
  });

173 174 175 176 177
  final Alignment? translation;
  final double? tColumnToRow;
  final double? tCollapsed;
  final int? cardCount;
  final double? selectedIndex;
178

179 180
  Rect? _interpolateRect(Rect begin, Rect end) {
    return Rect.lerp(begin, end, tColumnToRow!);
181 182
  }

183 184
  Offset? _interpolatePoint(Offset begin, Offset end) {
    return Offset.lerp(begin, end, tColumnToRow!);
185 186 187 188 189 190
  }

  @override
  void performLayout(Size size) {
    final double columnCardX = size.width / 5.0;
    final double columnCardWidth = size.width - columnCardX;
191
    final double columnCardHeight = size.height / cardCount!;
192
    final double rowCardWidth = size.width;
193
    final Offset offset = translation!.alongSize(size);
194
    double columnCardY = 0.0;
195
    double rowCardX = -(selectedIndex! * rowCardWidth);
196 197 198

    // When tCollapsed > 0 the titles spread apart
    final double columnTitleX = size.width / 10.0;
199 200
    final double rowTitleWidth = size.width * ((1 + tCollapsed!) / 2.25);
    double rowTitleX = (size.width - rowTitleWidth) / 2.0 - selectedIndex! * rowTitleWidth;
201 202 203

    // When tCollapsed > 0, the indicators move closer together
    //final double rowIndicatorWidth = 48.0 + (1.0 - tCollapsed) * (rowTitleWidth - 48.0);
204
    const double paddedSectionIndicatorWidth = kSectionIndicatorWidth + 8.0;
205
    final double rowIndicatorWidth = paddedSectionIndicatorWidth +
206 207
      (1.0 - tCollapsed!) * (rowTitleWidth - paddedSectionIndicatorWidth);
    double rowIndicatorX = (size.width - rowIndicatorWidth) / 2.0 - selectedIndex! * rowIndicatorWidth;
208 209 210 211

    // Compute the size and origin of each card, title, and indicator for the maxHeight
    // "column" layout, and the midHeight "row" layout. The actual layout is just the
    // interpolated value between the column and row layouts for t.
212
    for (int index = 0; index < cardCount!; index++) {
213 214

      // Layout the card for index.
215 216
      final Rect columnCardRect = Rect.fromLTWH(columnCardX, columnCardY, columnCardWidth, columnCardHeight);
      final Rect rowCardRect = Rect.fromLTWH(rowCardX, 0.0, rowCardWidth, size.height);
217
      final Rect cardRect = _interpolateRect(columnCardRect, rowCardRect)!.shift(offset);
218 219
      final String cardId = 'card$index';
      if (hasChild(cardId)) {
220
        layoutChild(cardId, BoxConstraints.tight(cardRect.size));
221
        positionChild(cardId, cardRect.topLeft);
222 223 224
      }

      // Layout the title for index.
225
      final Size titleSize = layoutChild('title$index', BoxConstraints.loose(cardRect.size));
226 227
      final double columnTitleY = columnCardRect.centerLeft.dy - titleSize.height / 2.0;
      final double rowTitleY = rowCardRect.centerLeft.dy - titleSize.height / 2.0;
228
      final double centeredRowTitleX = rowTitleX + (rowTitleWidth - titleSize.width) / 2.0;
229 230
      final Offset columnTitleOrigin = Offset(columnTitleX, columnTitleY);
      final Offset rowTitleOrigin = Offset(centeredRowTitleX, rowTitleY);
231
      final Offset titleOrigin = _interpolatePoint(columnTitleOrigin, rowTitleOrigin)!;
232
      positionChild('title$index', titleOrigin + offset);
233 234

      // Layout the selection indicator for index.
235
      final Size indicatorSize = layoutChild('indicator$index', BoxConstraints.loose(cardRect.size));
236 237
      final double columnIndicatorX = cardRect.centerRight.dx - indicatorSize.width - 16.0;
      final double columnIndicatorY = cardRect.bottomRight.dy - indicatorSize.height - 16.0;
238 239
      final Offset columnIndicatorOrigin = Offset(columnIndicatorX, columnIndicatorY);
      final Rect titleRect = Rect.fromPoints(titleOrigin, titleSize.bottomRight(titleOrigin));
240
      final double centeredRowIndicatorX = rowIndicatorX + (rowIndicatorWidth - indicatorSize.width) / 2.0;
241
      final double rowIndicatorY = titleRect.bottomCenter.dy + 16.0;
242
      final Offset rowIndicatorOrigin = Offset(centeredRowIndicatorX, rowIndicatorY);
243
      final Offset indicatorOrigin = _interpolatePoint(columnIndicatorOrigin, rowIndicatorOrigin)!;
244
      positionChild('indicator$index', indicatorOrigin + offset);
245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260

      columnCardY += columnCardHeight;
      rowCardX += rowCardWidth;
      rowTitleX += rowTitleWidth;
      rowIndicatorX += rowIndicatorWidth;
    }
  }

  @override
  bool shouldRelayout(_AllSectionsLayout oldDelegate) {
    return tColumnToRow != oldDelegate.tColumnToRow
      || cardCount != oldDelegate.cardCount
      || selectedIndex != oldDelegate.selectedIndex;
  }
}

261
class _AllSectionsView extends AnimatedWidget {
262
  _AllSectionsView({
263 264 265 266
    Key? key,
    required this.sectionIndex,
    required this.sections,
    required this.selectedIndex,
267 268 269
    this.minHeight,
    this.midHeight,
    this.maxHeight,
270
    this.sectionCards = const <Widget>[],
271
  }) : assert(sectionCards.length == sections.length),
272
       assert(sectionIndex >= 0 && sectionIndex < sections.length),
273
       assert(selectedIndex.value! >= 0.0 && selectedIndex.value! < sections.length.toDouble()),
274
       super(key: key, listenable: selectedIndex);
275

276
  final int sectionIndex;
277
  final List<Section> sections;
278 279 280 281
  final ValueNotifier<double?> selectedIndex;
  final double? minHeight;
  final double? midHeight;
  final double? maxHeight;
282 283 284
  final List<Widget> sectionCards;

  double _selectedIndexDelta(int index) {
285
    return (index.toDouble() - selectedIndex.value!).abs().clamp(0.0, 1.0);
286 287 288 289 290 291 292 293 294
  }

  Widget _build(BuildContext context, BoxConstraints constraints) {
    final Size size = constraints.biggest;

    // The layout's progress from from a column to a row. Its value is
    // 0.0 when size.height equals the maxHeight, 1.0 when the size.height
    // equals the midHeight.
    final double tColumnToRow =
295 296
      1.0 - ((size.height - midHeight!) /
             (maxHeight! - midHeight!)).clamp(0.0, 1.0);
297 298 299 300 301 302


    // The layout's progress from from the midHeight row layout to
    // a minHeight row layout. Its value is 0.0 when size.height equals
    // midHeight and 1.0 when size.height equals minHeight.
    final double tCollapsed =
303 304
      1.0 - ((size.height - minHeight!) /
             (midHeight! - minHeight!)).clamp(0.0, 1.0);
305 306

    double _indicatorOpacity(int index) {
307
      return 1.0 - _selectedIndexDelta(index) * 0.5;
308 309 310 311 312 313 314 315 316 317
    }

    double _titleOpacity(int index) {
      return 1.0 - _selectedIndexDelta(index) * tColumnToRow * 0.5;
    }

    double _titleScale(int index) {
      return 1.0 - _selectedIndexDelta(index) * tColumnToRow * 0.15;
    }

318
    final List<Widget> children = List<Widget>.from(sectionCards);
319 320 321

    for (int index = 0; index < sections.length; index++) {
      final Section section = sections[index];
322
      children.add(LayoutId(
323
        id: 'title$index',
324
        child: SectionTitle(
325 326 327 328 329 330 331 332
          section: section,
          scale: _titleScale(index),
          opacity: _titleOpacity(index),
        ),
      ));
    }

    for (int index = 0; index < sections.length; index++) {
333
      children.add(LayoutId(
334
        id: 'indicator$index',
335
        child: SectionIndicator(
336 337 338 339 340
          opacity: _indicatorOpacity(index),
        ),
      ));
    }

341 342
    return CustomMultiChildLayout(
      delegate: _AllSectionsLayout(
343
        translation: Alignment((selectedIndex.value! - sectionIndex) * 2.0 - 1.0, -1.0),
344 345 346
        tColumnToRow: tColumnToRow,
        tCollapsed: tCollapsed,
        cardCount: sections.length,
347
        selectedIndex: selectedIndex.value,
348 349 350 351 352 353 354
      ),
      children: children,
    );
  }

  @override
  Widget build(BuildContext context) {
355
    return LayoutBuilder(builder: _build);
356 357 358
  }
}

359 360 361 362
// Support snapping scrolls to the midScrollOffset: the point at which the
// app bar's height is _kAppBarMidHeight and only one section heading is
// visible.
class _SnappingScrollPhysics extends ClampingScrollPhysics {
363
  const _SnappingScrollPhysics({
364 365 366
    ScrollPhysics? parent,
    required this.midScrollOffset,
  }) : super(parent: parent);
367 368 369 370

  final double midScrollOffset;

  @override
371
  _SnappingScrollPhysics applyTo(ScrollPhysics? ancestor) {
372
    return _SnappingScrollPhysics(parent: buildParent(ancestor), midScrollOffset: midScrollOffset);
373 374 375 376
  }

  Simulation _toMidScrollOffsetSimulation(double offset, double dragVelocity) {
    final double velocity = math.max(dragVelocity, minFlingVelocity);
377
    return ScrollSpringSimulation(spring, offset, midScrollOffset, velocity, tolerance: tolerance);
378 379 380 381
  }

  Simulation _toZeroScrollOffsetSimulation(double offset, double dragVelocity) {
    final double velocity = math.max(dragVelocity, minFlingVelocity);
382
    return ScrollSpringSimulation(spring, offset, 0.0, velocity, tolerance: tolerance);
383 384 385
  }

  @override
386 387
  Simulation? createBallisticSimulation(ScrollMetrics position, double dragVelocity) {
    final Simulation? simulation = super.createBallisticSimulation(position, dragVelocity);
388 389 390 391 392 393 394
    final double offset = position.pixels;

    if (simulation != null) {
      // The drag ended with sufficient velocity to trigger creating a simulation.
      // If the simulation is headed up towards midScrollOffset but will not reach it,
      // then snap it there. Similarly if the simulation is headed down past
      // midScrollOffset but will not reach zero, then snap it to zero.
395
      final double simulationEnd = simulation.x(double.infinity);
396 397 398 399 400 401 402 403
      if (simulationEnd >= midScrollOffset)
        return simulation;
      if (dragVelocity > 0.0)
        return _toMidScrollOffsetSimulation(offset, dragVelocity);
      if (dragVelocity < 0.0)
        return _toZeroScrollOffsetSimulation(offset, dragVelocity);
    } else {
      // The user ended the drag with little or no velocity. If they
404
      // didn't leave the offset above midScrollOffset, then
405 406 407
      // snap to midScrollOffset if they're more than halfway there,
      // otherwise snap to zero.
      final double snapThreshold = midScrollOffset / 2.0;
408
      if (offset >= snapThreshold && offset < midScrollOffset)
409 410 411 412 413 414 415 416
        return _toMidScrollOffsetSimulation(offset, dragVelocity);
      if (offset > 0.0 && offset < snapThreshold)
        return _toZeroScrollOffsetSimulation(offset, dragVelocity);
    }
    return simulation;
  }
}

417
class AnimationDemoHome extends StatefulWidget {
418
  const AnimationDemoHome({ Key? key }) : super(key: key);
419 420 421 422

  static const String routeName = '/animation';

  @override
423
  _AnimationDemoHomeState createState() => _AnimationDemoHomeState();
424 425 426
}

class _AnimationDemoHomeState extends State<AnimationDemoHome> {
427 428 429
  final ScrollController _scrollController = ScrollController();
  final PageController _headingPageController = PageController();
  final PageController _detailsPageController = PageController();
430
  ScrollPhysics _headingScrollPhysics = const NeverScrollableScrollPhysics();
431
  ValueNotifier<double?> selectedIndex = ValueNotifier<double?>(0.0);
432 433 434

  @override
  Widget build(BuildContext context) {
435
    return Scaffold(
436
      backgroundColor: _kAppBackgroundColor,
437
      body: Builder(
438
        // Insert an element so that _buildBody can find the PrimaryScrollController.
439
        builder: _buildBody,
440 441 442 443
      ),
    );
  }

444 445 446 447
  void _handleBackButton(double midScrollOffset) {
    if (_scrollController.offset >= midScrollOffset)
      _scrollController.animateTo(0.0, curve: _kScrollCurve, duration: _kScrollDuration);
    else
448
      Navigator.maybePop(context);
449 450
  }

451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466
  // Only enable paging for the heading when the user has scrolled to midScrollOffset.
  // Paging is enabled/disabled by setting the heading's PageView scroll physics.
  bool _handleScrollNotification(ScrollNotification notification, double midScrollOffset) {
    if (notification.depth == 0 && notification is ScrollUpdateNotification) {
      final ScrollPhysics physics = _scrollController.position.pixels >= midScrollOffset
       ? const PageScrollPhysics()
       : const NeverScrollableScrollPhysics();
      if (physics != _headingScrollPhysics) {
        setState(() {
          _headingScrollPhysics = physics;
        });
      }
    }
    return false;
  }

467 468 469 470
  void _maybeScroll(double midScrollOffset, int pageIndex, double xOffset) {
    if (_scrollController.offset < midScrollOffset) {
      // Scroll the overall list to the point where only one section card shows.
      // At the same time scroll the PageViews to the page at pageIndex.
471 472
      _headingPageController.animateToPage(pageIndex, curve: _kScrollCurve, duration: _kScrollDuration);
      _scrollController.animateTo(midScrollOffset, curve: _kScrollCurve, duration: _kScrollDuration);
473 474 475 476
    } else {
      // One one section card is showing: scroll one page forward or back.
      final double centerX = _headingPageController.position.viewportDimension / 2.0;
      final int newPageIndex = xOffset > centerX ? pageIndex + 1 : pageIndex - 1;
477
      _headingPageController.animateToPage(newPageIndex, curve: _kScrollCurve, duration: _kScrollDuration);
478 479 480 481 482
    }
  }

  bool _handlePageNotification(ScrollNotification notification, PageController leader, PageController follower) {
    if (notification.depth == 0 && notification is ScrollUpdateNotification) {
483
      selectedIndex.value = leader.page;
484
      if (follower.page != leader.page)
485
        follower.position.jumpToWithoutSettling(leader.position.pixels); // ignore: deprecated_member_use
486 487 488 489 490
    }
    return false;
  }

  Iterable<Widget> _detailItemsFor(Section section) {
491
    final Iterable<Widget> detailItems = section.details!.map<Widget>((SectionDetail detail) {
492
      return SectionDetailView(detail: detail);
493
    });
494
    return ListTile.divideTiles(context: context, tiles: detailItems);
495 496
  }

497
  List<Widget> _allHeadingItems(double maxHeight, double midScrollOffset) {
498 499
    final List<Widget> sectionCards = <Widget>[];
    for (int index = 0; index < allSections.length; index++) {
500
      sectionCards.add(LayoutId(
501
        id: 'card$index',
502
        child: GestureDetector(
503
          behavior: HitTestBehavior.opaque,
504
          child: SectionCard(section: allSections[index]),
505
          onTapUp: (TapUpDetails details) {
506
            final double xOffset = details.globalPosition.dx;
507 508 509
            setState(() {
              _maybeScroll(midScrollOffset, index, xOffset);
            });
510
          },
511 512 513 514 515 516
        ),
      ));
    }

    final List<Widget> headings = <Widget>[];
    for (int index = 0; index < allSections.length; index++) {
517
      headings.add(Container(
518
          color: _kAppBackgroundColor,
519 520
          child: ClipRect(
            child: _AllSectionsView(
521 522 523 524 525 526 527
              sectionIndex: index,
              sections: allSections,
              selectedIndex: selectedIndex,
              minHeight: _kAppBarMinHeight,
              midHeight: _kAppBarMidHeight,
              maxHeight: maxHeight,
              sectionCards: sectionCards,
528 529 530 531 532 533 534 535 536 537 538 539 540 541
            ),
          ),
        )
      );
    }
    return headings;
  }

  Widget _buildBody(BuildContext context) {
    final MediaQueryData mediaQueryData = MediaQuery.of(context);
    final double statusBarHeight = mediaQueryData.padding.top;
    final double screenHeight = mediaQueryData.size.height;
    final double appBarMaxHeight = screenHeight - statusBarHeight;

542
    // The scroll offset that reveals the appBarMidHeight appbar.
543 544
    final double appBarMidScrollOffset = statusBarHeight + appBarMaxHeight - _kAppBarMidHeight;

545 546
    return SizedBox.expand(
      child: Stack(
547
        children: <Widget>[
548
          NotificationListener<ScrollNotification>(
549 550 551
            onNotification: (ScrollNotification notification) {
              return _handleScrollNotification(notification, appBarMidScrollOffset);
            },
552
            child: CustomScrollView(
553
              controller: _scrollController,
554
              physics: _SnappingScrollPhysics(midScrollOffset: appBarMidScrollOffset),
555 556
              slivers: <Widget>[
                // Start out below the status bar, gradually move to the top of the screen.
557
                _StatusBarPaddingSliver(
558 559 560 561
                  maxHeight: statusBarHeight,
                  scrollFactor: 7.0,
                ),
                // Section Headings
562
                SliverPersistentHeader(
563
                  pinned: true,
564
                  delegate: _SliverAppBarDelegate(
565 566
                    minHeight: _kAppBarMinHeight,
                    maxHeight: appBarMaxHeight,
567
                    child: NotificationListener<ScrollNotification>(
568 569 570
                      onNotification: (ScrollNotification notification) {
                        return _handlePageNotification(notification, _headingPageController, _detailsPageController);
                      },
571
                      child: PageView(
572 573 574 575
                        physics: _headingScrollPhysics,
                        controller: _headingPageController,
                        children: _allHeadingItems(appBarMaxHeight, appBarMidScrollOffset),
                      ),
576 577 578
                    ),
                  ),
                ),
579
                // Details
580 581
                SliverToBoxAdapter(
                  child: SizedBox(
582
                    height: 610.0,
583
                    child: NotificationListener<ScrollNotification>(
584 585 586
                      onNotification: (ScrollNotification notification) {
                        return _handlePageNotification(notification, _detailsPageController, _headingPageController);
                      },
587
                      child: PageView(
588
                        controller: _detailsPageController,
589
                        children: allSections.map<Widget>((Section section) {
590
                          return Column(
591 592 593 594 595
                            crossAxisAlignment: CrossAxisAlignment.stretch,
                            children: _detailItemsFor(section).toList(),
                          );
                        }).toList(),
                      ),
596 597 598
                    ),
                  ),
                ),
599 600
              ],
            ),
601
          ),
602
          Positioned(
603 604
            top: statusBarHeight,
            left: 0.0,
605
            child: IconTheme(
606
              data: const IconThemeData(color: Colors.white),
607
              child: SafeArea(
608 609
                top: false,
                bottom: false,
610
                child: IconButton(
611 612 613 614
                  icon: const BackButtonIcon(),
                  tooltip: 'Back',
                  onPressed: () {
                    _handleBackButton(appBarMidScrollOffset);
615
                  },
616
                ),
617
              ),
618 619 620 621 622 623 624
            ),
          ),
        ],
      ),
    );
  }
}