dialog_kit_widget #

A Flutter package that makes showing dialogs and bottom sheets effortless — no BuildContext passing required, no boilerplate. Simply call .openDialog() or .openBottomSheet() directly on any Widget.

Features #

• 🚀 Zero-context API — set context once globally, call anywhere
• 💬 .openDialog() — show any widget as a Material dialog
• 🗂️ .openSimpleDialog() — wrap any widget in a Dialog with padding automatically
• 📋 .openBottomSheet() — show any widget as a modal bottom sheet
• 🧩 DialogWidget base class — extend it to create self-presenting dialog/sheet widgets
• 🎨 Full customisation: barrier color, shape, scroll control, drag, constraints, and more

Getting Started #

Add the package to your pubspec.yaml:

dependencies:
  dialog_kit_widget: ^0.0.2

Then run:

flutter pub get

Setup #

Set the global context once in your app (recommended: inside MaterialApp via navigatorKey):

final GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      navigatorKey: navigatorKey,
      home: const MyHomePage(),
    );
  }
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  void initState() {
    super.initState();
    // Set global context — do this once
    DialogKitWidget.setContext = navigatorKey.currentContext!;
  }
}

DialogKitWidget.setContext = navigatorKey.currentContext!;

Usage #

1. Open any widget as a Dialog #

ElevatedButton(
  onPressed: () {
    const MyContentWidget().openDialog();
  },
  child: const Text('Open Dialog'),
)

2. Open any widget as a Simple Dialog (auto-padded) #

const MyContentWidget().openSimpleDialog(
  padding: const EdgeInsets.all(24),
  barrierDismissible: true,
);

3. Open any widget as a Bottom Sheet #

const MyContentWidget().openBottomSheet(
  isScrollControlled: true,
  enableDrag: true,
  backgroundColor: Colors.white,
  shape: const RoundedRectangleBorder(
    borderRadius: BorderRadius.vertical(top: Radius.circular(24)),
  ),
);

4. Use DialogWidget — self-presenting widgets #

Extend DialogWidget to create widgets that know how to present themselves:

class MyBottomSheet extends DialogWidget {
  const MyBottomSheet({Key? key}) : super(
    key: key,
    isScrollControlled: true,
    enableDrag: true,
  );

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: MediaQuery.of(context).size.height * 0.5,
      child: const Center(child: Text('Hello from DialogWidget!')),
    );
  }
}

// Show it from anywhere:
const MyBottomSheet().showBottomSheet();

API Reference #

DialogKitWidget #

Widget Extensions #

All methods are available on every Flutter widget via extension.

openDialog<T>

Future<T?> openDialog<T>({
  BuildContext? context,
  bool? barrierDismissible,   // default: true
  Color? barrierColor,        // default: Colors.black45
})

openSimpleDialog<T>

Wraps the widget in a Dialog with padding before presenting it.

Future<T?> openSimpleDialog<T>({
  BuildContext? context,
  Color? barrierColor,
  bool? barrierDismissible,
  EdgeInsetsGeometry? padding,  // default: EdgeInsets.all(20)
})

openBottomSheet<T>

Future<T?> openBottomSheet<T>({
  BuildContext? context,
  Color? barrierColor,
  Color? backgroundColor,
  ShapeBorder? shape,           // default: top rounded corners (r=24)
  BoxConstraints? constraints,
  bool? isScrollControlled,     // default: false
  bool? useRootNavigator,       // default: false
  bool? barrierDismissible,     // default: true
  bool? enableDrag,             // default: true
})

DialogWidget<T> (abstract base class) #

Extend this class to build self-presenting widgets. It exposes all bottom-sheet options as constructor parameters and provides a showBottomSheet() method.

abstract class DialogWidget<T> extends StatelessWidget {
  final Color? barrierColor;
  final Color? backgroundColor;
  final bool? barrierDismissible;
  final ShapeBorder? shape;
  final BoxConstraints? constraints;
  final bool? isScrollControlled;
  final bool? useRootNavigator;
  final bool? enableDrag;

  Future<T?> showBottomSheet({BuildContext? context});
}

Full Example #

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

final GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      navigatorKey: navigatorKey,
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  void initState() {
    super.initState();
    DialogKitWidget.setContext = navigatorKey.currentContext!;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('dialog_kit_widget Demo')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () => const _MySheet().openBottomSheet(),
              child: const Text('Open Bottom Sheet'),
            ),
            ElevatedButton(
              onPressed: () => const _MySheet().openSimpleDialog(),
              child: const Text('Open Dialog'),
            ),
          ],
        ),
      ),
    );
  }
}

class _MySheet extends DialogWidget {
  const _MySheet({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: MediaQuery.of(context).size.height / 2,
      child: const Center(child: Text('Hello, dialog_kit_widget! 👋')),
    );
  }
}

License #

This project is licensed under the MIT License.