block_dialog

Block-based, animated dialogs for Flutter with composable layout, typed results, full interaction among blocks, and fine-grained dismissal control.

Features

  • Compose dialogs from rows of blocks (text, buttons, inputs, radio group, checkbox, spacer, custom).
  • Typed results with BlocksResult<T> and per-block blockTag keys.
  • Multiple built-in block animations with easy customization.
  • Animated dimmed background synchronized with dialog animation.
  • Per-block overrides for position and animation.

Install

Add to pubspec.yaml:

dependencies:
  block_dialog: ^2.0.2

Preview

Slide Scale Cinematic

Quick Start

BlockDialog.show(
  context,
  rows: [
    BlockRow(blocks: [
      BlockText(text: 'Create account?', isDialogTitle: true),
    ]),
    BlockRow(blocks: [
      BlockTextField(blockTag: 'email', hintText: 'Email'),
    ]),
    BlockRow(blocks: [
      BlockTextField(blockTag: 'password', hintText: 'Password'),
    ]),
    BlockRow(blocks: [
      BlockButton(
        label: 'Continue',
        isPositive: true,
        onPressed: (results) {
          final email = result.get<String>('email');
        },
      ),
      BlockButton(
        label: 'Cancel',
      ),
    ]),
  ],
);

Blocks

  • BlockText — simple text/title block.
  • BlockTextField — text input.
  • BlockCheckbox — boolean input.
  • BlockRadioGroup<T> — single-choice selection.
  • BlockButton — action button (optionally closes the dialog).
  • BlockSpacer — vertical gap.
  • BlockCustom — any widget, optionally with its own BlockCustomController.

Blocks interaction through the DialogController

  • Block
    • shakeBlock
  • BlockText
    • setBlockText
  • BlockButton
    • setBlockButtonLabel
    • setBlockButtonEnabled
    • performButtonTap
  • BlockCheckbox
    • setBlockCheckboxValue
    • toggleBlockCheckboxValue
    • setBlockCheckboxEnabled
  • BlockRadioGroup<T>
    • setBlockRadioGroupValue
    • setBlockRadioGroupOptionEnabled
  • BlockTextField
    • setBlockTextFieldText
    • appendBlockTextFieldText
    • setBlockTextFieldErrorText
    • setBlockTextFieldEnabled
    • setBlockTextFieldReadOnly
    • clearBlockTextField
    • focusBlockTextField
    • unfocusBlockTextField
  • BlockCustom
    • getBlockCustomController

Styling & Config

const DialogConfig(
  backgroundColor: Color(0xFFF8FAFC),
  backgroundColorPressed: Color(0xFFE2E8F0),
  strokeColor: Color(0xFFCBD5E1),
  strokeWidth: 1,
  borderRadius: 20,
  blocksSpacing: 6,
  barrierColor: Color(0xB3000000),
  animationDuration: Duration(milliseconds: 420),
  blockAnimation: BlockAnimation.cinematic(),
  textStyle: TextStyle(fontSize: 16, color: Colors.black87),
)

Animations

  • BlockAnimation.slide()
  • BlockAnimation.scale
  • BlockAnimation.elastic
  • BlockAnimation.depth
  • BlockAnimation.cinematic()
  • BlockAnimation.expandFromCorner()

Results & Dismissal

  • Each block that produces a value must provide a unique blockTag.
  • BlocksResult.dismissReason indicates how the dialog closed.
  • Tapping outside can be enabled/disabled with barrierDismissible.

Custom Blocks

BlockCustom(
  blockTag: 'rating',
  blockController: BlockCustomController(),
  builder: (context, dialogController, controller, configs) {
    return const Center(child: Text('Custom'));
  },
)

Example Project

See the example/ folder for a full working demo.

Additional Information

Contributing

  1. Fork the repository
  2. Create a feature branch
  3. Submit a pull request
  4. Include tests for new features

Issues

  • File issues on GitHub
  • Include Flutter/Dart version and error details
  • Expect response within 1–3 business days

License

MIT License. See LICENSE file.

Libraries

block_dialog