displayInfoBar function

Future<void> displayInfoBar(BuildContext context, { required InfoBarPopupBuilder builder, Alignment alignment = Alignment.bottomCenter, Duration duration = const Duration(seconds: 3), })

Displays an InfoBar as a popup

duration is the duration that the popup will be in the screen

displayInfoBar(
  context,
  builder: (context, close) {
    return InfoBar(
      title: Text('Title'),
      action: IconButton(
        icon: const Icon(FluentIcons.clear),
        onPressed: close,
      ),
    );
  }
)

Implementation

Future<void> displayInfoBar(
  BuildContext context, {
  required InfoBarPopupBuilder builder,
  Alignment alignment = Alignment.bottomCenter,
  Duration duration = const Duration(seconds: 3),
}) async {
  assert(debugCheckHasOverlay(context));
  assert(debugCheckHasFluentTheme(context));

  final theme = FluentTheme.of(context);

  late OverlayEntry entry;

  var isFading = true;

  var alreadyInitialized = false;

  entry = OverlayEntry(builder: (context) {
    return SafeArea(
      child: Align(
        alignment: alignment,
        child: Padding(
          padding: const EdgeInsets.symmetric(
            vertical: 24.0,
            horizontal: 16.0,
          ),
          child: StatefulBuilder(builder: (context, setState) {
            void close() async {
              if (entry.mounted) setState(() => isFading = true);

              await Future.delayed(theme.mediumAnimationDuration);

              if (entry.mounted) entry.remove();
            }

            if (!alreadyInitialized) {
              Future.delayed(theme.mediumAnimationDuration).then((_) {
                if (entry.mounted && !alreadyInitialized) {
                  setState(() => isFading = false);
                }

                alreadyInitialized = true;
              }).then((_) => Future.delayed(duration).then((_) => close()));
            }

            return AnimatedSwitcher(
              duration: theme.mediumAnimationDuration,
              switchInCurve: theme.animationCurve,
              switchOutCurve: theme.animationCurve,
              child: isFading
                  ? const SizedBox.shrink()
                  : PhysicalModel(
                      color: Colors.transparent,
                      elevation: 8.0,
                      child: builder(context, close),
                    ),
            );
          }),
        ),
      ),
    );
  });

  Overlay.of(context).insert(entry);
}