home.dart 23.5 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
    if (_maxHeight == value) {
48
      return;
49
    }
50 51 52 53 54 55 56 57
    _maxHeight = value;
    markNeedsLayout();
  }

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

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

class _StatusBarPaddingSliver extends SingleChildRenderObjectWidget {
79
  const _StatusBarPaddingSliver({
80
    required this.maxHeight,
81
    this.scrollFactor = 5.0,
82
  }) : assert(maxHeight >= 0.0),
83
       assert(scrollFactor >= 1.0);
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
    required this.sectionIndex,
    required this.sections,
    required this.selectedIndex,
266 267 268
    this.minHeight,
    this.midHeight,
    this.maxHeight,
269
    this.sectionCards = const <Widget>[],
270
  }) : assert(sectionCards.length == sections.length),
271
       assert(sectionIndex >= 0 && sectionIndex < sections.length),
272
       assert(selectedIndex.value! >= 0.0 && selectedIndex.value! < sections.length.toDouble()),
273
       super(listenable: selectedIndex);
274

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

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

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

nt4f04uNd's avatar
nt4f04uNd committed
290
    // The layout's progress from a column to a row. Its value is
291 292 293
    // 0.0 when size.height equals the maxHeight, 1.0 when the size.height
    // equals the midHeight.
    final double tColumnToRow =
294 295
      1.0 - ((size.height - midHeight!) /
             (maxHeight! - midHeight!)).clamp(0.0, 1.0);
296 297


nt4f04uNd's avatar
nt4f04uNd committed
298
    // The layout's progress from the midHeight row layout to
299 300 301
    // 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 =
302 303
      1.0 - ((size.height - minHeight!) /
             (midHeight! - minHeight!)).clamp(0.0, 1.0);
304

305
    double indicatorOpacity(int index) {
306
      return 1.0 - _selectedIndexDelta(index) * 0.5;
307 308
    }

309
    double titleOpacity(int index) {
310 311 312
      return 1.0 - _selectedIndexDelta(index) * tColumnToRow * 0.5;
    }

313
    double titleScale(int index) {
314 315 316
      return 1.0 - _selectedIndexDelta(index) * tColumnToRow * 0.15;
    }

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

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

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

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

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

358 359 360 361
// 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 {
362
  const _SnappingScrollPhysics({
363
    super.parent,
364
    required this.midScrollOffset,
365
  });
366 367 368 369

  final double midScrollOffset;

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

374
  Simulation _toMidScrollOffsetSimulation(double offset, double dragVelocity, ScrollMetrics metrics) {
375
    final double velocity = math.max(dragVelocity, minFlingVelocity);
376
    return ScrollSpringSimulation(spring, offset, midScrollOffset, velocity, tolerance: toleranceFor(metrics));
377 378
  }

379
  Simulation _toZeroScrollOffsetSimulation(double offset, double dragVelocity, ScrollMetrics metrics) {
380
    final double velocity = math.max(dragVelocity, minFlingVelocity);
381
    return ScrollSpringSimulation(spring, offset, 0.0, velocity, tolerance: toleranceFor(metrics));
382 383 384
  }

  @override
385 386
  Simulation? createBallisticSimulation(ScrollMetrics position, double dragVelocity) {
    final Simulation? simulation = super.createBallisticSimulation(position, dragVelocity);
387 388 389 390 391 392 393
    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.
394
      final double simulationEnd = simulation.x(double.infinity);
395
      if (simulationEnd >= midScrollOffset) {
396
        return simulation;
397 398
      }
      if (dragVelocity > 0.0) {
399
        return _toMidScrollOffsetSimulation(offset, dragVelocity, position);
400 401
      }
      if (dragVelocity < 0.0) {
402
        return _toZeroScrollOffsetSimulation(offset, dragVelocity, position);
403
      }
404 405
    } else {
      // The user ended the drag with little or no velocity. If they
406
      // didn't leave the offset above midScrollOffset, then
407 408 409
      // snap to midScrollOffset if they're more than halfway there,
      // otherwise snap to zero.
      final double snapThreshold = midScrollOffset / 2.0;
410
      if (offset >= snapThreshold && offset < midScrollOffset) {
411
        return _toMidScrollOffsetSimulation(offset, dragVelocity, position);
412 413
      }
      if (offset > 0.0 && offset < snapThreshold) {
414
        return _toZeroScrollOffsetSimulation(offset, dragVelocity, position);
415
      }
416 417 418 419 420
    }
    return simulation;
  }
}

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

  static const String routeName = '/animation';

  @override
427
  State<AnimationDemoHome> 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
  void _handleBackButton(double midScrollOffset) {
449
    if (_scrollController.offset >= midScrollOffset) {
450
      _scrollController.animateTo(0.0, curve: _kScrollCurve, duration: _kScrollDuration);
451
    } else {
452
      Navigator.maybePop(context);
453
    }
454 455
  }

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

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

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

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

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

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

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

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