Glue UI

Glue UI is a package that can trigger an indicator and dialog to show them separately from context of the app. It dynamically overlays widgets on top of the Navigator.

Content

Installation
Get Started
Methods And Properties
How To Use
Platforms
Contribution

Installation

Add the package to your dependencies:

dependencies:
  glue_ui: ^0.1.0

dependencies:
  glue_ui:
    git: https://github.com/hassony105/glue_ui.git
    ref: v0.1.0

Finally, run dart pub get to download the package.

Projects using this library can use any channel of Flutter.

Get Started

You must initialize GlueUI by calling initialize (typically in your main() method) and configuring it with GlueUIConfig:

void main() {
  GlueUI.instance.initialize(
    config: GlueUIConfig(
      defaultIndicator: CircularProgressIndicator(),
      overlayColor: Colors.black.withOpacity(0.5),
    ),
  );
  
  runApp(const MyApp());
}

Next, wrap your MaterialApp with GlueAppDelegate and assign the navigatorKey:

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

  @override
  Widget build(BuildContext context) {
    return GlueAppDelegate(
      child: MaterialApp(
        title: 'Flutter Glue UI Demo',
        theme: ThemeData.dark(useMaterial3: true),
        home: const MyHomePage(title: 'Glue UI'),
        navigatorKey: GlueUI.instance.navigatorKey, // Required!
      ),
    );
  }
}

Methods And Properties

Properties	Type	Description
`initialize()`	`void`	Required. Initializes the `GlueUI` singleton with an optional `GlueUIConfig`. This method must be called before accessing the `loader` or `dialog` services.
`GlueUI.instance`	`GlueUI`	The singleton instance of `GlueUI`.
`GlueUI.instance.loader`	`IndicatorService`	Provides access to the `IndicatorService` for displaying loading indicators.
`GlueUI.instance.dialog`	`DialogService`	Provides access to the `DialogService` for displaying custom dialogs.
`GlueUI.instance.loader.show()`	`void`	Displays the indicator overlay.
`GlueUI.instance.loader.hide()`	`void`	Hides the currently active indicator overlay.
`GlueUI.instance.loader.visible`	`bool`	Checks if the indicator is currently active (visible).
`GlueUI.instance.dialog.show()`	`Future<UniqueKey>`	Displays a custom dialog. The dialog is shown as an `OverlayEntry` at the center of the screen. Optionally takes a `title`, `desc` (description), and `type` of dialog. The `type` influences the appearance of the dialog. Returns a `Future` that resolves with a `UniqueKey` identifying the displayed dialog. This key can be used to hide the specific dialog later.
`GlueUI.instance.dialog.hide()`	`void`	Hides a specific dialog or the most recently shown dialog. If a `key` is provided, the dialog with that specific key is hidden. If no `key` is provided, the dialog at the top of the stack (the most recent) is hidden.
`GlueUI.instance.dialog.hideAll()`	`void`	Hides all active dialogs in the stack.
`GlueUI.instance.dialog.isActive`	`bool`	Checks if there are any active dialogs in the stack.

How To Use

It is very simple to use, just like these examples:

Loader (Indicator)

ElevatedButton(  
  onPressed: () async {  
    try {  
      GlueUI.instance.loader.show();  
      
      // Execute any asynchronous method  
      await Future.delayed(Duration(seconds: 2));  
      
    } catch (e) {  
      if (kDebugMode) {  
        print(e);  
      }  
    } finally {  
      GlueUI.instance.loader.hide();  
    }  
  },  
  child: Text('Show Indicator'),  
)

Dialog

ElevatedButton(  
  onPressed: () async {  
    try {  
      final dialogKey = await GlueUI.instance.dialog.show(  
        context: context, // required for overlay context resolution
        title: 'Dialog Title',  
        desc: 'Dialog Description',  
        type: DialogType.success,  
      );  
      
      // Close dialog programmatically after 2 seconds
      await Future.delayed(Duration(seconds: 2));  
      GlueUI.instance.dialog.hide(dialogKey);
      
    } catch (e) {  
      if (kDebugMode) {  
        print(e);  
      }  
    }  
  },  
  child: Text('Show dialog for specific duration'),  
)

Platforms

Platform	Status
Android	✅
IOS	✅
Windows	✅
MacOS	✅
Linux	✅
Web	✅

Contribution

Feel free to file an issue if you find a problem or make pull requests.

All contributions are welcome :)