snap_bottom_sheet 0.1.1

A customizable bottom sheet with snap positions for Flutter, inspired by iOS-style sheet detents.

SnapBottomSheet

A customizable bottom sheet library for Flutter with iOS-style snap positions.

Features

• Three snap positions (minimum, medium, maximum)
• Natural spring animations
• Drag gestures and velocity detection
• Customizable heights (ratio or absolute values)
• External control via controller
• Helper widget for Scaffold integration

Installation

Add this dependency to your pubspec.yaml file:

dependencies:
  snap_bottom_sheet: ^0.1.0

Usage

Basic Usage

import 'package:flutter/material.dart';
import 'package:snap_bottom_sheet/snap_bottom_sheet.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Stack(
          children: [
            // Your main content
            YourMainContent(),
            
            // Snap sheet
            SnapSheet(
              minHeightRatio: 0.1,
              mediumHeightRatio: 0.5,
              maxHeightRatio: 0.9,
              initialPosition: SnapPosition.medium,
              onPositionChanged: (position) {
                print('Sheet position changed: $position');
              },
              child: YourSheetContent(),
            ),
          ],
        ),
      ),
    );
  }
}

Using SnapBottomSheetScaffold

import 'package:flutter/material.dart';
import 'package:snap_bottom_sheet/snap_bottom_sheet.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Stack(
          children: [
            // Your main content
            YourMainContent(),
            
            // Snap sheet
            SnapSheet(
              minHeightRatio: 0.1,
              mediumHeightRatio: 0.5,
              maxHeightRatio: 0.9,
              initialPosition: SnapPosition.medium,
              onPositionChanged: (position) {
                print('Sheet position changed: $position');
              },
              child: YourSheetContent(),
            ),
          ],
        ),
      ),
    );
  }
}

Using the Controller

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  final _controller = SnapSheetController();
  
  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Controller Example'),
        actions: [
          IconButton(
            icon: Icon(Icons.arrow_upward),
            onPressed: () => _controller.snapToMaximum(),
          ),
          IconButton(
            icon: Icon(Icons.arrow_downward),
            onPressed: () => _controller.snapToMinimum(),
          ),
        ],
      ),
      body: Stack(
        children: [
          // Main content
          Center(child: Text('Main Content')),
          
          // Controller-managed snap sheet
          SnapSheet(
            controller: _controller,
            minHeightRatio: 0.1,
            mediumHeightRatio: 0.5,
            maxHeightRatio: 0.9,
            child: Center(child: Text('Sheet Content')),
          ),
        ],
      ),
    );
  }
}

Customization

The SnapSheet widget offers various options for customization:

• minHeightRatio, mediumHeightRatio, maxHeightRatio: Sheet height as a ratio of screen height
• minHeight, mediumHeight, maxHeight: Absolute height in pixels
• initialPosition: Initial sheet position
• backgroundColor: Sheet background color
• showDragHandle: Whether to show the drag handle
• borderRadius: Corner radius of the sheet
• snapSensitivity: Sensitivity of snapping
• animationDuration: Duration of animations
• animationCurve: Animation curve (default: SpringCurve)

Custom Animation

By default, a SpringCurve is used, but you can customize it:

SnapSheet(
  // Other properties...
  animationCurve: SpringCurve(
    mass: 1.0,        // Higher = more bounce
    stiffness: 200.0, // Higher = less bounce
    damping: 25.0,    // Higher = less oscillation
  ),
  // Or use another Flutter curve
  // animationCurve: Curves.easeOutBack,
  child: YourSheetContent(),
)