Block-based, animated dialogs for Flutter with composable layout, typed results, and fine-grained dismissal control.
- Compose dialogs from rows of blocks (text, buttons, inputs, radio group, checkbox, spacer, custom).
- Typed results with
BlocksResult<T>and per-blockresultIdkeys. - Multiple built-in block animations with easy customization.
- Animated dimmed background synchronized with dialog animation.
- Per-block overrides for position and animation.
Add to pubspec.yaml:
dependencies:
block_dialog: ^1.0.1| Slide | Scale | Cinematic |
|---|---|---|
![]() |
![]() |
![]() |
BlockDialog.show(
context,
rows: [
BlockRow(blocks: [
BlockText(text: 'Create account?'),
]),
BlockRow(blocks: [
BlockInputField(resultId: 'email', hintText: 'Email'),
]),
BlockRow(blocks: [
BlockButton(
label: 'Continue',
onPressed: (results) {
final email = result.get<String>(resultKey: 'email');
},
),
BlockButton(
label: 'Cancel',
),
]),
],
);-
BlockText— simple text/title block. -
BlockInputField— text input (useresultId). -
BlockCheckbox— boolean input (useresultId). -
BlockRadioGroup<T>— single-choice selection (useresultId). -
BlockButton— action button (optionally closes the dialog). -
BlockSpacer— vertical gap. -
BlockCustom— any widget, optionally withresultBuilder.
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(),
)BlockAnimation.slide()BlockAnimation.scaleBlockAnimation.elasticBlockAnimation.depthBlockAnimation.cinematic()BlockAnimation.expandFromCorner()
- Each block that produces a value must provide a unique
resultId. -
BlocksResult.dismissReasonindicates how the dialog closed. - Tapping outside can be enabled/disabled with
barrierDismissible.
BlockCustom(
resultId: 'rating',
resultBuilder: () => 5,
builder: (context, controller, configs) {
return const Center(child: Text('Custom'));
},
)See the example/ folder for a full working demo.
- GitHub: https://github.com/tripletroop/flutter_block_dialog
- Pub.dev: https://pub.dev/packages/block_dialog
- Fork the repository
- Create a feature branch
- Submit a pull request
- Include tests for new features
- File issues on GitHub
- Include Flutter/Dart version and error details
- Expect response within 1–3 business days
MIT License. See LICENSE file.


