Merge pull request #1990 from HansMuller/bottom_sheet_placeholder

Adds showBottomSheet(), AlignTransition

sky/packages/sky/lib/src/material/bottom_sheet.dart

@@ -16,15 +16,15 @@ const Duration _kBottomSheetDuration = const Duration(milliseconds: 200);
 const double _kMinFlingVelocity = 700.0;
 const double _kFlingVelocityScale = 1.0 / 300.0;
 
-class _BottomSheet extends StatefulComponent {
-  _BottomSheet({ Key key, this.route }) : super(key: key);
+class _ModalBottomSheet extends StatefulComponent {
+  _ModalBottomSheet({ Key key, this.route }) : super(key: key);
 
   final _ModalBottomSheetRoute route;
 
-  _BottomSheetState createState() => new _BottomSheetState();
+  _ModalBottomSheetState createState() => new _ModalBottomSheetState();
 }
 
-class _BottomSheetLayout extends OneChildLayoutDelegate {
+class _ModalBottomSheetLayout extends OneChildLayoutDelegate {
   // The distance from the bottom of the parent to the top of the BottomSheet child.
   AnimatedValue<double> childTop = new AnimatedValue<double>(0.0);
 
@@ -43,9 +43,9 @@ class _BottomSheetLayout extends OneChildLayoutDelegate {
   }
 }
 
-class _BottomSheetState extends State<_BottomSheet> {
+class _ModalBottomSheetState extends State<_ModalBottomSheet> {
 
-  final _BottomSheetLayout _layout = new _BottomSheetLayout();
+  final _ModalBottomSheetLayout _layout = new _ModalBottomSheetLayout();
   bool _dragEnabled = false;
 
   void _handleDragStart(Point position) {
@@ -111,7 +111,7 @@ class _ModalBottomSheetRoute extends ModalRoute {
   }
 
   Color get barrierColor => Colors.black54;
-  Widget buildModalWidget(BuildContext context) => new _BottomSheet(route: this);
+  Widget buildModalWidget(BuildContext context) => new _ModalBottomSheet(route: this);
 
   void didPop([dynamic result]) {
     completer.complete(result);
@@ -120,6 +120,7 @@ class _ModalBottomSheetRoute extends ModalRoute {
 }
 
 Future showModalBottomSheet({ BuildContext context, Widget child }) {
+  assert(child != null);
   final Completer completer = new Completer();
   Navigator.of(context).pushEphemeral(new _ModalBottomSheetRoute(
     completer: completer,
@@ -127,3 +128,36 @@ Future showModalBottomSheet({ BuildContext context, Widget child }) {
   ));
   return completer.future;
 }
+
+class _PersistentBottomSheet extends StatelessComponent {
+  _PersistentBottomSheet({
+    Key key,
+    this.child,
+    this.route
+  }) : super(key: key);
+
+  final TransitionRoute route;
+  final Widget child;
+
+  Widget build(BuildContext context) {
+    return new AlignTransition(
+      performance: route.performance,
+      alignment: new AnimatedValue<FractionalOffset>(const FractionalOffset(0.0, 0.0)),
+      heightFactor: new AnimatedValue<double>(0.0, end: 1.0),
+      child: child
+    );
+  }
+}
+
+class _PersistentBottomSheetRoute extends TransitionRoute {
+  bool get opaque => false;
+  Duration get transitionDuration => _kBottomSheetDuration;
+}
+
+void showBottomSheet({ BuildContext context, GlobalKey<PlaceholderState> placeholderKey, Widget child }) {
+  assert(child != null);
+  assert(placeholderKey != null);
+  _PersistentBottomSheetRoute route = new _PersistentBottomSheetRoute();
+  placeholderKey.currentState.child = new _PersistentBottomSheet(route: route, child: child);
+  Navigator.of(context).pushEphemeral(route);
+}

sky/packages/sky/lib/src/rendering/box.dart

@@ -5,6 +5,7 @@
 import 'dart:math' as math;
 import 'dart:ui' as ui;
 
+import 'package:flutter/animation.dart';
 import 'package:flutter/gestures.dart';
 import 'package:flutter/painting.dart';
 import 'package:vector_math/vector_math_64.dart';
@@ -792,5 +793,21 @@ class FractionalOffset {
     value = 37 * value + y.hashCode;
     return value;
   }
+  static FractionalOffset lerp(FractionalOffset a, FractionalOffset b, double t) {
+    if (a == null && b == null)
+      return null;
+    if (a == null)
+      return new FractionalOffset(b.x * t, b.y * t);
+    if (b == null)
+      return new FractionalOffset(b.x * (1.0 - t), b.y * (1.0 - t));
+    return new FractionalOffset(ui.lerpDouble(a.x, b.x, t), ui.lerpDouble(a.y, b.y, t));
+  }
   String toString() => '$runtimeType($x, $y)';
 }
+
+class AnimatedFractionalOffsetValue extends AnimatedValue<FractionalOffset> {
+  AnimatedFractionalOffsetValue(FractionalOffset begin, { FractionalOffset end, Curve curve, Curve reverseCurve })
+    : super(begin, end: end, curve: curve, reverseCurve: reverseCurve);
+
+  FractionalOffset lerp(double t) => FractionalOffset.lerp(begin, end, t);
+}

sky/packages/sky/lib/src/rendering/shifted_box.dart

@@ -166,7 +166,7 @@ class RenderPositionedBox extends RenderShiftedBox {
   FractionalOffset get alignment => _alignment;
   FractionalOffset _alignment;
   void set alignment (FractionalOffset newAlignment) {
-    assert(newAlignment == null || (newAlignment.x != null && newAlignment.y != null));
+    assert(newAlignment != null && newAlignment.x != null && newAlignment.y != null);
     if (_alignment == newAlignment)
       return;
     _alignment = newAlignment;

sky/packages/sky/lib/src/widgets/transitions.dart

@@ -177,6 +177,37 @@ class SquashTransition extends TransitionWithChild {
   }
 }
 
+class AlignTransition extends TransitionWithChild {
+  AlignTransition({
+    Key key,
+    this.alignment,
+    this.widthFactor,
+    this.heightFactor,
+    PerformanceView performance,
+    Widget child
+  }) : super(key: key,
+             performance: performance,
+             child: child);
+
+  final AnimatedValue<FractionalOffset> alignment;
+  final AnimatedValue<double> widthFactor;
+  final AnimatedValue<double> heightFactor;
+
+  Widget buildWithChild(BuildContext context, Widget child) {
+    if (alignment != null)
+      performance.updateVariable(alignment);
+    if (widthFactor != null)
+      performance.updateVariable(widthFactor);
+    if (heightFactor != null)
+      performance.updateVariable(heightFactor);
+    return new Align(
+      alignment: alignment?.value,
+      widthFactor: widthFactor?.value,
+      heightFactor: heightFactor?.value,
+      child: child);
+  }
+}
+
 /// An animated variable containing a RelativeRectangle
 ///
 /// This class specializes the interpolation of AnimatedValue<RelativeRect> to