grabber_sheet 1.0.0
grabber_sheet: ^1.0.0 copied to clipboard
A reusable and customizable draggable bottom sheet with a grabber handle, inspired by the modal sheets in popular apps.
example/lib/main.dart
import 'package:flutter/material.dart';
import 'package:grabber_sheet/grabber_sheet.dart';
void main() => runApp(const DraggableSheetExampleApp());
class DraggableSheetExampleApp extends StatelessWidget {
const DraggableSheetExampleApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
useMaterial3: true,
colorScheme: ColorScheme.fromSeed(
seedColor: Colors.lightBlue,
surface: Colors.lightBlue.shade50,
onSurface: Colors.black87,
),
),
home: const ExampleHomePage(),
);
}
}
class ExampleHomePage extends StatelessWidget {
const ExampleHomePage({super.key});
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
final sheetColor = Colors.blue.shade100;
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
title: const Text('GrabberSheet Example'),
backgroundColor: sheetColor,
),
body: Stack(
children: [
Center(
child: Text(
'Background Content',
style: theme.textTheme.headlineMedium,
),
),
GrabberSheet(
initialChildSize: 0.5,
minChildSize: 0.2,
maxChildSize: 0.8,
snap: true,
snapSizes: const [.5],
backgroundColor: sheetColor,
grabberStyle: GrabberStyle(color: Colors.grey.shade400),
bottom: Row(
children: [
const Text('sheet title'),
const Spacer(),
IconButton(onPressed: () {}, icon: const Icon(Icons.close)),
],
),
bottomAreaPadding: const EdgeInsets.symmetric(horizontal: 16),
builder: (BuildContext context, ScrollController scrollController) {
return ListView.builder(
controller: scrollController,
itemCount: 30,
itemBuilder: (BuildContext context, int index) {
return ListTile(
title: Text(
'Item $index',
style: TextStyle(color: theme.colorScheme.onSurface),
),
);
},
);
},
),
],
),
);
}
}