ModalTopSheet
ModalTopSheet A Flutter package for creating top-aligned modal sheets. This package not extends the modal sheet functionality in Flutter to allow for a more flexible and customizable user interface. The effect is like AppBar dropdown for example.
Features
https://github.com/Bomsamdi/modal_top_sheet/assets/94292009/4612353d-3f33-4dc1-ac31-621fdccec81d
Installation
Include your package in your pubspec.yaml
file:
dependencies:
modal_top_sheet: ^0.0.1
Usage
import 'package:flutter/material.dart';
import 'package:modal_top_sheet/modal_top_sheet.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
appBarTheme: const AppBarTheme(
backgroundColor: Colors.blue,
foregroundColor: Colors.black,
elevation: 0,
),
scaffoldBackgroundColor: Colors.white,
),
home: const HomePage(),
);
}
}
class HomePage extends StatefulWidget {
const HomePage({super.key});
@override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
void openModal() async => showModalTopSheet(
context,
isDismissible: false,
child: const YourModalWidget(),
);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBarWithSubtitle(
titleSection: InkWell(
onTap: openModal,
child: const Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Top Modal Sheet Example',
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 14,
color: Colors.black,
),
),
Text(
'Tap to expand',
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 12,
color: Colors.black54,
),
),
],
)),
),
body: CustomScrollView(
slivers: [
SliverList.builder(
itemBuilder: (context, index) {
return ListTile(
title: Text('Item $index'),
);
},
itemCount: 20,
),
],
),
);
}
}
Full example usage in /example
folder.
Issues and Bugs
Report any issues or bugs on the GitHub issues page.
License
This package is licensed under the MIT License.
Support
For any questions or assistance, please contact the author.