bottom-sheet.dart

bottom-sheet.dart

import 'package:flutter/material.dart';
import 'package:simple_animations/simple_animations.dart';
import 'package:supercharged/supercharged.dart';

main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(body: SafeArea(child: Page())),
    );
  }
}

class Page extends StatefulWidget {
  @override
  _PageState createState() => _PageState();
}

class _PageState extends State<Page> with AnimationMixin {
  Animation<double> bottomSheetOffsetY;
  var bottomSheetVisible = false;

  @override
  void initState() {
    bottomSheetOffsetY =
        200.0.tweenTo(0.0).curved(Curves.easeOut).animatedBy(controller);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Positioned.fill(child: _regularPageContent()),
        Positioned.fill(child: _bottomSheetPart())
      ],
    );
  }

  Widget _regularPageContent() {
    return Column(
      children: <Widget>[
        RaisedButton(
          child: Text("Show bottom sheet"),
          onPressed: () => _toggleBottomSheet(),
        ),
      ],
    );
  }

  Transform _bottomSheetPart() {
    return Transform.translate(
      offset: Offset(0.0, bottomSheetOffsetY.value),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[BottomSheet()],
      ),
    );
  }

  _toggleBottomSheet() {
    bottomSheetVisible = !bottomSheetVisible;
    if (bottomSheetVisible) {
      controller.play(duration: 500.milliseconds);
    } else {
      controller.playReverse(duration: 500.milliseconds);
    }
  }
}

class BottomSheet extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.orange,
      height: 200,
      child: Placeholder(
        color: Colors.red,
        strokeWidth: 5,
      ),
    );
  }
}