interactive_modal | Flutter package

A Flutter package that allows you to display an interactive modal overlay on top of other widgets while maintaining interaction with both the modal and background content.

Features #

🎯 Interactive Background: The background widget remains fully interactive while the modal is displayed
🎨 Customizable Position: Place the modal at the top, center, bottom, or custom position
🖐️ Draggable Modal: Optionally make the modal draggable to move it anywhere on screen
✨ Smooth Animations: Built-in slide animations with customizable duration
🎭 Theme Support: Automatically adapts to light and dark themes
📱 Responsive: Works seamlessly across different screen sizes
🔧 Easy to Use: Simple controller-based API

Installation #

Add this to your package's pubspec.yaml file:

dependencies:
  interactive_modal: ^0.0.1

Then run:

flutter pub get

Usage #

Basic Example #

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

class MyPage extends StatefulWidget {
  @override
  State<MyPage> createState() => _MyPageState();
}

class _MyPageState extends State<MyPage> {
  final InteractiveModalController _controller = InteractiveModalController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: InteractiveModal(
        controller: _controller,
        background: Container(
          color: Colors.blue,
          child: Center(
            child: Text('Interactive Background'),
          ),
        ),
        modalContent: Container(
          padding: EdgeInsets.all(20),
          child: Column(
            children: [
              Text('Modal Content'),
              ElevatedButton(
                onPressed: () => _controller.hide(),
                child: Text('Close'),
              ),
            ],
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => _controller.show(),
        child: Icon(Icons.add),
      ),
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

Advanced Example with Custom Position #

InteractiveModal(
  controller: _controller,
  background: MyMapWidget(),
  modalContent: MyControlPanel(),
  position: ModalPosition.bottom,
  modalHeight: 300,
  animate: true,
  animationDuration: Duration(milliseconds: 400),
  modalBackgroundColor: Colors.white,
  borderRadius: BorderRadius.circular(20),
  boxShadow: [
    BoxShadow(
      color: Colors.black26,
      blurRadius: 10,
      spreadRadius: 5,
    ),
  ],
)

InteractiveModal(
  controller: _controller,
  background: MyInteractiveContent(),
  modalContent: MyModalPanel(),
  position: ModalPosition.bottom,
  isDraggable: true, // Enable drag functionality
  modalHeight: 250,
)

When isDraggable is set to true, users can touch and drag the modal to move it anywhere on the screen. This is particularly useful for:

Floating control panels
Movable toolbars
Customizable UI layouts
Picture-in-picture style interfaces

Controlling Which Area is Draggable

You can use the DragHandle widget to specify which part of the modal should be draggable:

Widget _buildModalContent() {
  return Column(
    children: [
      // Only this area will be draggable
      DragHandle(
        child: Container(
          padding: EdgeInsets.all(16),
          child: Row(
            children: [
              Icon(Icons.drag_handle),
              Text('Drag from here'),
              Spacer(),
              IconButton(
                icon: Icon(Icons.close),
                onPressed: () => controller.hide(),
              ),
            ],
          ),
        ),
      ),
      // This area will be scrollable, not draggable
      Expanded(
        child: ListView(
          children: [
            // Your scrollable content
          ],
        ),
      ),
    ],
  );
}

Without DragHandle, the entire modal will be draggable. With DragHandle, only the wrapped widget responds to drag gestures, allowing other parts (like scrollable lists) to work normally.

Parameters #