Dialog

In ProgressDark modeRTL

A modal dialog overlay with backdrop.

7:21

Edit profile

Make changes to your profile here.

Name

Abdullah Yousif

Bio

Flutter developer...

Cancel

Save changes

Installation

Copy the component into your project using the CLI:

$ronakcn add dialog

Usage

Import and use the component in your Flutter widget tree:

lib/pages/example.dart

import 'package:flutter/material.dart';
import '../components/dialog/dialog.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('RcnDialog Example')),
      body: Center(
        child: RcnDialog(
          // Configure props here
        ),
      ),
    );
  }
}

Variants

Dialog ships with the following variants:

default

A basic modal dialog.

7:21

Edit profile

Make changes to your profile here.

Name

Abdullah Yousif

Bio

Flutter developer...

Cancel

Save changes

with-form

Dialog containing a form.

7:21

Edit profile

Make changes to your profile here.

Name

Abdullah Yousif

Bio

Flutter developer...

Cancel

Save changes

fullscreen

A full-screen modal.

7:21

Edit profile

Make changes to your profile here.

Name

Abdullah Yousif

Bio

Flutter developer...

Cancel

Save changes

Props

Prop	Type	Default	Description
`title`*	`String`	—	Dialog title text.
`content`*	`Widget`	—	Dialog body content.
`actions`	`List<Widget>`	`const []`	Action buttons at the bottom.
`isOpen`	`bool`	`false`	Whether the dialog is shown.
`onClose`	`VoidCallback?`	`null`	Called when dialog is dismissed.

Source files

lib/components/ui/dialog.dart

import 'package:flutter/material.dart';

class RcnDialog extends StatelessWidget {
  const RcnDialog({super.key, required this.title, required this.content, this.actions = const [], this.isOpen = false, this.onClose});
  final String title;
  final Widget content;
  final List<Widget> actions;
  final bool isOpen;
  final VoidCallback? onClose;

  static Future<void> show(BuildContext context, {required String title, required Widget content, List<Widget> actions = const []}) {
    return showDialog(context: context, builder: (_) => RcnDialog(title: title, content: content, actions: actions, isOpen: true));
  }

  @override
  Widget build(BuildContext context) {
    final colors = Theme.of(context).colorScheme;
    return Dialog(
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
      child: Padding(
        padding: const EdgeInsets.all(24),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(title, style: TextStyle(fontSize: 18, fontWeight: FontWeight.w700, color: colors.onSurface)),
            const SizedBox(height: 8),
            content,
            if (actions.isNotEmpty) ...[const SizedBox(height: 16), Row(mainAxisAlignment: MainAxisAlignment.end, children: actions)],
          ],
        ),
      ),
    );
  }
}

Version 0.1.0 · feedback category