Last active
February 11, 2022 18:45
-
-
Save H3mnz/e50673ad5750f2dbff4fa99af5711042 to your computer and use it in GitHub Desktop.
Simple Flutter TopSheet
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import 'dart:developer'; | |
| import 'package:flutter/material.dart'; | |
| void main() { | |
| runApp(const MyApp()); | |
| } | |
| class MyApp extends StatelessWidget { | |
| const MyApp({Key? key}) : super(key: key); | |
| @override | |
| Widget build(BuildContext context) { | |
| return MaterialApp( | |
| title: 'TopSheet', | |
| theme: ThemeData( | |
| primarySwatch: Colors.indigo, | |
| ), | |
| home: const MyHomePage(), | |
| ); | |
| } | |
| } | |
| class MyHomePage extends StatelessWidget { | |
| const MyHomePage({Key? key}) : super(key: key); | |
| @override | |
| Widget build(BuildContext context) { | |
| return Scaffold( | |
| appBar: AppBar(), | |
| floatingActionButton: FloatingActionButton( | |
| onPressed: () async { | |
| var res = await showTopSheet( | |
| context: context, | |
| child: Material( | |
| child: Column( | |
| children: [ | |
| ListTile( | |
| leading: const Icon(Icons.settings), | |
| title: const Text('Settings'), | |
| onTap: () => Navigator.of(context).pop('Settings'), | |
| ), | |
| ListTile( | |
| leading: const Icon(Icons.timer), | |
| title: const Text('Archive'), | |
| onTap: () => Navigator.of(context).pop('Archive'), | |
| ), | |
| ListTile( | |
| leading: const Icon(Icons.bookmark), | |
| title: const Text('Saved'), | |
| onTap: () => Navigator.of(context).pop('Saved'), | |
| ), | |
| ListTile( | |
| leading: const Icon(Icons.list), | |
| title: const Text('CLose Friends'), | |
| onTap: () => Navigator.of(context).pop('CLose Friends'), | |
| ), | |
| const SizedBox(height: 4), | |
| Row( | |
| mainAxisAlignment: MainAxisAlignment.center, | |
| children: [ | |
| Container( | |
| width: kToolbarHeight, | |
| height: 4, | |
| decoration: BoxDecoration( | |
| color: Colors.grey, | |
| borderRadius: BorderRadius.circular(100), | |
| ), | |
| ) | |
| ], | |
| ), | |
| const SizedBox(height: 4), | |
| ], | |
| ), | |
| ), | |
| ); | |
| log(res.toString()); | |
| }, | |
| ), | |
| ); | |
| } | |
| } | |
| class TopSheet extends StatelessWidget { | |
| final Widget child; | |
| final Animation<double> animation; | |
| const TopSheet({ | |
| Key? key, | |
| required this.child, | |
| required this.animation, | |
| }) : super(key: key); | |
| @override | |
| Widget build(BuildContext context) { | |
| return Column( | |
| children: [ | |
| Material( | |
| color: Colors.transparent, | |
| elevation: 0, | |
| child: SlideTransition( | |
| position: Tween( | |
| begin: const Offset(0.0, -1.0), | |
| end: Offset.zero, | |
| ).animate(animation), | |
| child: SizedBox( | |
| width: MediaQuery.of(context).size.width, | |
| child: Container( | |
| color: Colors.white, | |
| child: child, | |
| ), | |
| ), | |
| ), | |
| ), | |
| ], | |
| ); | |
| } | |
| } | |
| Future<T?> showTopSheet<T>({required BuildContext context, required Widget child}) { | |
| return Navigator.of(context).push<T>( | |
| RawDialogRoute( | |
| pageBuilder: (context, animation, secondaryAnimation) { | |
| return TopSheet( | |
| child: child, | |
| animation: animation, | |
| ); | |
| }, | |
| ), | |
| ); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment