Fluid Dialog

style: very good analysis License: MIT

A dialog that can switch between multiple contents and animates size and alignment dynamically.

Video Demo

video demo

Features ๐ŸŽ‰

  • Navigate between different pages
  • Animated size and alignment
  • Fully customizable

Usage ๐Ÿงช

To show a FluidDialog you typically use flutter's showDialog function. You can also use your implementation to show the dialog.

Here's an example:

 context: context,
 builder: (context) => FluidDialog(
  // Set the first page of the dialog.
  rootPage: FluidDialogPage(
    alignment: Alignment.bottomLeft, //Aligns the dialog to the bottom left.
    builder: (context) => const TestDialog(), // This can be any widget.

To navigate in the dialog, use the DialogNavigator. It works similarly to the flutter navigator.

This only works for widgets in the FluidDialog

  onPressed: () => DialogNavigator.of(context).push(
      builder: (context) => const SecondDialogPage(),
  child: const Text('Go to next page'),

Take a look at the example or demo for more code.


A library used to create fluid dialogs.