🧩 Responsive Sheet #

A powerful and flexible responsive bottom sheet for Flutter that adapts automatically between modal, side sheet, and dialog modes — depending on the screen size.

It’s designed for apps that need a seamless experience across mobile, tablet, and desktop platforms.

🚀 Features #

✅ Automatically adapts between bottom sheet, side sheet, or dialog
✅ Fully customizable style (margin, radius, background)
✅ Support for state preservation
✅ Nested sheet support
✅ Return results from sheet
✅ Easy to integrate with a single function

📦 Installation #

Add dependency to your pubspec.yaml:

dependencies:
  responsive_sheet: ^1.0.0

Then run:

flutter pub get

🧱 Basic Usage #

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

Future<void> showMySheet(BuildContext context) async {
  final result = await showResponsiveBottomSheet(
    context,
    builder: (context) => const MySheetContent(),
  );

  if (context.mounted && result != null) {
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(content: Text('Result: $result')),
    );
  }
}

🧩 Example Preview #

Below are several use cases showing how ResponsiveSheet adapts automatically depending on device type and configuration.

🧱 Default Responsive Sheet #

showResponsiveBottomSheet(
  context,
  builder: (context) => BottomSheetExampleOne(
    title: "Show Default Responsive BottomSheet",
  ),
);

🪟 Side Sheet Only #

showResponsiveBottomSheet(
  context,
  typeBuilder: (_) => ResponsiveSheetType.side,
  builder: (context) => BottomSheetExampleOne(
    title: "Show Responsive BottomSheet Side Only",
  ),
);

🖼️ Dialog Only #

showResponsiveBottomSheet(
  context,
  typeBuilder: (_) => ResponsiveSheetType.dialog,
  builder: (context) => SizedBox(
    width: 670,
    child: BottomSheetExampleOne(
      title: "Show Responsive BottomSheet Dialog Only",
    ),
  ),
);

⚙️ Fixed Size #

showResponsiveBottomSheet(
  context,
  typeBuilder: (_) => ResponsiveSheetType.side,
  builder: (context) => SizedBox(
    width: 300,
    child: BottomSheetExampleOne(
      title: "Show Responsive BottomSheet Side with Fixed Size",
    ),
  ),
);

⚙️ Fixed Ratio Size #

showResponsiveBottomSheet(
  context,
  typeBuilder: (_) => ResponsiveSheetType.side,
  builder: (context) => SizedBox(
    width: MediaQuery.sizeOf(context).width * 0.4,
    child: BottomSheetExampleOne(
      title: "Show Responsive BottomSheet Side with Ratio Size",
    ),
  ),
);

you can also make size responsive to media query like this

showResponsiveBottomSheet(
  context,
  typeBuilder: (_) => ResponsiveSheetType.side,
  builder: (context) => SizedBox(
    width: context.responsiveValues(
      desktop: MediaQuery.sizeOf(context).width * 0.4,
      tablet: MediaQuery.sizeOf(context).width * 0.6,
      mobile: MediaQuery.sizeOf(context).width * 0.8,
    ),
    child: BottomSheetExampleOne(
      title: "Show Responsive BottomSheet Side with Ratio Size",
    ),
  ),
);

⚙️ Custom Style #

showResponsiveBottomSheet(
  context,
  styleBuilder: (context, type) {
    return context.responsiveValues(
      desktop: ResponsiveSheetStyle(
        margin: 300,
        borderRadius: BorderRadius.circular(72),
      ),
      tablet: ResponsiveSheetStyle(
        margin: 100,
        borderRadius: BorderRadius.circular(48),
      ),
      mobile: ResponsiveSheetStyle(
        margin: 90,
        borderRadius: BorderRadius.circular(24),
      ),
    );
  },
  builder: (context) => BottomSheetExampleOne(
    title: "Show Responsive BottomSheet with Custom Style",
  ),
);

🔁 With Result #

final result = await showResponsiveBottomSheet(
  context,
  builder: (context) => BottomSheetExampleOne(
    title: "Pick a color",
  ),
);

if (context.mounted && result != null) {
  ScaffoldMessenger.of(context)
      .showSnackBar(SnackBar(content: Text("Result: $result")));
}

🧩 Nested Sheets #

showResponsiveBottomSheet(
  context,
  builder: (context) => BottomSheetExampleThree(),
);

♻️ Preserve State Automatically #

showResponsiveBottomSheet(
  context,
  builder: (context) => BottomSheetExampleTwo(),
);

🧠 Responsive Logic #

Internally, ResponsiveSheet will choose sheet type automatically:

• Mobile: Bottom sheet
• Tablet: Side sheet
• Desktop: Dialog

You can override this by providing a custom typeBuilder.

🎨 Custom Styling with styleBuilder #

The styleBuilder parameter allows you to define custom visual styles for each sheet type (side, dialog, or sheet).
You can adjust the margin, border radius, and elevation dynamically.

Using the BuildContext, you can even manage different styles per screen size for more refined responsiveness.

🧰 Advanced Parameters #

📸 Example App #

You can try all use cases by running the included example:

cd example
flutter run

🧑‍💻 Contributing #

Contributions, issues, and feature requests are welcome!
Feel free to open a pull request.