grabber_sheet 1.3.1

A reusable and customizable draggable bottom sheet for Flutter, inspired by the modal sheet in the Google Maps app.

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, colorSchemeSeed: Colors.blue),
      home: const SimpleExamplePage(),
    );
  }
}

class SimpleExamplePage extends StatelessWidget {
  const SimpleExamplePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(title: const Text('Simple GrabberSheet')),
      body: Stack(
        children: [
          const Center(child: Text('Map or Background Content Here')),
          // 1. Wrap your content with GrabberSheet
          GrabberSheet(
            snap: true,
            builder: (context, scrollController) {
              // 2. Connect the scrollController
              return ListView.builder(
                controller: scrollController,
                itemCount: 50,
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text('Simple Item $index'),
                    leading: const Icon(Icons.location_on),
                  );
                },
              );
            },
          ),
        ],
      ),
    );
  }
}