home.dart 23.7 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
// Copyright 2017 The Chromium Authors. All rights reserved.
// 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
    @required double maxHeight,
    @required double scrollFactor,
37 38 39 40
  }) : assert(maxHeight != null && maxHeight >= 0.0),
       assert(scrollFactor != null && scrollFactor >= 1.0),
       _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 47 48 49 50 51 52 53 54 55 56
    assert(maxHeight != null && maxHeight >= 0.0);
    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 59 60 61 62 63 64 65 66 67
    assert(scrollFactor != null && scrollFactor >= 1.0);
    if (_scrollFactor == value)
      return;
    _scrollFactor = value;
    markNeedsLayout();
  }

  @override
  void performLayout() {
    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 83
  }) : assert(maxHeight != null && maxHeight >= 0.0),
       assert(scrollFactor != null && scrollFactor >= 1.0),
       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 113 114 115 116 117 118 119 120 121
  }
}

class _SliverAppBarDelegate extends SliverPersistentHeaderDelegate {
  _SliverAppBarDelegate({
    @required this.minHeight,
    @required this.maxHeight,
    @required this.child,
  });

  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
  final Alignment translation;
174 175 176 177 178 179 180 181 182
  final double tColumnToRow;
  final double tCollapsed;
  final int cardCount;
  final double selectedIndex;

  Rect _interpolateRect(Rect begin, Rect end) {
    return Rect.lerp(begin, end, tColumnToRow);
  }

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

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

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

    // 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 206 207 208 209 210 211 212 213 214
    final double rowIndicatorWidth = paddedSectionIndicatorWidth +
      (1.0 - tCollapsed) * (rowTitleWidth - paddedSectionIndicatorWidth);
    double rowIndicatorX = (size.width - rowIndicatorWidth) / 2.0 - selectedIndex * rowIndicatorWidth;

    // 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.
    for (int index = 0; index < cardCount; index++) {

      // 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 232
      final Offset titleOrigin = _interpolatePoint(columnTitleOrigin, rowTitleOrigin);
      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 244
      final Offset indicatorOrigin = _interpolatePoint(columnIndicatorOrigin, rowIndicatorOrigin);
      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 263
  _AllSectionsView({
    Key key,
264
    this.sectionIndex,
265 266
    @required this.sections,
    @required this.selectedIndex,
267 268 269
    this.minHeight,
    this.midHeight,
    this.maxHeight,
270
    this.sectionCards = const <Widget>[],
271 272 273 274 275 276 277
  }) : assert(sections != null),
       assert(sectionCards != null),
       assert(sectionCards.length == sections.length),
       assert(sectionIndex >= 0 && sectionIndex < sections.length),
       assert(selectedIndex != null),
       assert(selectedIndex.value >= 0.0 && selectedIndex.value < sections.length.toDouble()),
       super(key: key, listenable: selectedIndex);
278

279
  final int sectionIndex;
280
  final List<Section> sections;
281
  final ValueNotifier<double> selectedIndex;
282 283 284 285 286 287
  final double minHeight;
  final double midHeight;
  final double maxHeight;
  final List<Widget> sectionCards;

  double _selectedIndexDelta(int index) {
288
    return (index.toDouble() - selectedIndex.value).abs().clamp(0.0, 1.0);
289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309
  }

  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 =
      1.0 - ((size.height - midHeight) /
             (maxHeight - midHeight)).clamp(0.0, 1.0);


    // 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 =
      1.0 - ((size.height - minHeight) /
             (midHeight - minHeight)).clamp(0.0, 1.0);

    double _indicatorOpacity(int index) {
310
      return 1.0 - _selectedIndexDelta(index) * 0.5;
311 312 313 314 315 316 317 318 319 320
    }

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

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

321
    final List<Widget> children = List<Widget>.from(sectionCards);
322 323 324

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

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

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

  @override
  Widget build(BuildContext context) {
358
    return LayoutBuilder(builder: _build);
359 360 361
  }
}

362 363 364 365
// 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 {
366
  const _SnappingScrollPhysics({
367 368 369 370
    ScrollPhysics parent,
    @required this.midScrollOffset,
  }) : assert(midScrollOffset != null),
       super(parent: parent);
371 372 373 374

  final double midScrollOffset;

  @override
375
  _SnappingScrollPhysics applyTo(ScrollPhysics ancestor) {
376
    return _SnappingScrollPhysics(parent: buildParent(ancestor), midScrollOffset: midScrollOffset);
377 378 379 380
  }

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

  Simulation _toZeroScrollOffsetSimulation(double offset, double dragVelocity) {
    final double velocity = math.max(dragVelocity, minFlingVelocity);
386
    return ScrollSpringSimulation(spring, offset, 0.0, velocity, tolerance: tolerance);
387 388 389 390 391 392 393 394 395 396 397 398
  }

  @override
  Simulation createBallisticSimulation(ScrollMetrics position, double dragVelocity) {
    final Simulation simulation = super.createBallisticSimulation(position, dragVelocity);
    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.
399
      final double simulationEnd = simulation.x(double.infinity);
400 401 402 403 404 405 406 407
      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
408
      // didn't leave the offset above midScrollOffset, then
409 410 411
      // snap to midScrollOffset if they're more than halfway there,
      // otherwise snap to zero.
      final double snapThreshold = midScrollOffset / 2.0;
412
      if (offset >= snapThreshold && offset < midScrollOffset)
413 414 415 416 417 418 419 420
        return _toMidScrollOffsetSimulation(offset, dragVelocity);
      if (offset > 0.0 && offset < snapThreshold)
        return _toZeroScrollOffsetSimulation(offset, dragVelocity);
    }
    return simulation;
  }
}

421
class AnimationDemoHome extends StatefulWidget {
422
  const AnimationDemoHome({ Key key }) : super(key: key);
423 424 425 426

  static const String routeName = '/animation';

  @override
427
  _AnimationDemoHomeState createState() => _AnimationDemoHomeState();
428 429 430
}

class _AnimationDemoHomeState extends State<AnimationDemoHome> {
431 432 433
  final ScrollController _scrollController = ScrollController();
  final PageController _headingPageController = PageController();
  final PageController _detailsPageController = PageController();
434
  ScrollPhysics _headingScrollPhysics = const NeverScrollableScrollPhysics();
435
  ValueNotifier<double> selectedIndex = ValueNotifier<double>(0.0);
436 437 438

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

448 449 450 451
  void _handleBackButton(double midScrollOffset) {
    if (_scrollController.offset >= midScrollOffset)
      _scrollController.animateTo(0.0, curve: _kScrollCurve, duration: _kScrollDuration);
    else
452
      Navigator.maybePop(context);
453 454
  }

455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470
  // 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;
  }

471 472 473 474
  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.
475 476
      _headingPageController.animateToPage(pageIndex, curve: _kScrollCurve, duration: _kScrollDuration);
      _scrollController.animateTo(midScrollOffset, curve: _kScrollCurve, duration: _kScrollDuration);
477 478 479 480
    } 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;
481
      _headingPageController.animateToPage(newPageIndex, curve: _kScrollCurve, duration: _kScrollDuration);
482 483 484 485 486
    }
  }

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

  Iterable<Widget> _detailItemsFor(Section section) {
495
    final Iterable<Widget> detailItems = section.details.map<Widget>((SectionDetail detail) {
496
      return SectionDetailView(detail: detail);
497
    });
498
    return ListTile.divideTiles(context: context, tiles: detailItems);
499 500 501 502 503
  }

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

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

546
    // The scroll offset that reveals the appBarMidHeight appbar.
547 548
    final double appBarMidScrollOffset = statusBarHeight + appBarMaxHeight - _kAppBarMidHeight;

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