Bouncy Top Sheet - by Simon Lightfoot - 19/10/2022

bouncy_top_sheet.dart

// MIT License
//
// Copyright (c) 2022 Simon Lightfoot
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in all
// copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.
//
import 'package:flutter/material.dart';

void main() {
  runApp(const ExampleApp());
}

@immutable
class ExampleApp extends StatelessWidget {
  const ExampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData.dark(),
      home: const HomeScreen(),
    );
  }
}

@immutable
class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  int _selected = -1;

  Future<void> _shopTopSheet() async {
    final result = await Navigator.of(context).push(TopSheet.route());
    if (result != null && mounted) {
      setState(() => _selected = result);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Material(
      child: Column(
        children: [
          Expanded(
            child: Center(
              child: Text(
                'Selected: $_selected',
                style: const TextStyle(fontSize: 64.0),
              ),
            ),
          ),
          Expanded(
            child: Center(
              child: ElevatedButton(
                onPressed: _shopTopSheet,
                child: const Text('Show Top Sheet'),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

@immutable
class TopSheet extends StatelessWidget {
  static Route<int> route() {
    return PageRouteBuilder(
      opaque: false,
      barrierDismissible: true,
      pageBuilder: (BuildContext context, Animation<double> animation,
          Animation<double> secondaryAnimation) {
        return const TopSheet();
      },
      transitionDuration: const Duration(milliseconds: 1000),
      reverseTransitionDuration: const Duration(milliseconds: 1000),
      transitionsBuilder: (BuildContext context, Animation<double> animation,
          Animation<double> secondaryAnimation, Widget child) {
        return Align(
          alignment: Alignment.topLeft,
          child: SizeTransition(
            sizeFactor: CurvedAnimation(
                parent: animation, curve: Curves.bounceOut, reverseCurve: Curves.bounceIn),
            axisAlignment: 1,
            child: child,
          ),
        );
      },
    );
  }

  @visibleForTesting
  const TopSheet({super.key});

  @override
  Widget build(BuildContext context) {
    return Material(
      color: Colors.red.shade900,
      elevation: 8.0,
      child: SizedBox(
        width: double.infinity,
        height: 220.0,
        child: DefaultTextStyle.merge(
          child: Column(
            children: [
              TopSheetButton(
                onPressed: () => Navigator.of(context).pop(0),
                label: 'Hello',
              ),
              TopSheetButton(
                onPressed: () => Navigator.of(context).pop(1),
                label: 'World',
              ),
              TopSheetButton(
                onPressed: () => Navigator.of(context).pop(2),
                label: 'Testing',
              ),
            ],
          ),
        ),
      ),
    );
  }
}

@immutable
class TopSheetButton extends StatelessWidget {
  const TopSheetButton({
    super.key,
    required this.onPressed,
    required this.label,
  });

  final VoidCallback? onPressed;
  final String label;

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: InkWell(
        onTap: onPressed,
        child: Center(
          child: Text(
            label,
            style: const TextStyle(fontSize: 20.0),
          ),
        ),
      ),
    );
  }
}