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

bouncy_top_sheet.dart

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),
          ),
        ),
      ),
    );
  }
}