[Question]: How to make a dialog swipeable?

[Apollo108]

What is your question?

I'm trying to make a snackbar with 3 sec auto hide, + I need it to be able to swipe it away at any time. Didn't find a way to do this, please, help.

Code of Conduct

• I agree to follow this project's Code of Conduct

[feduke-nukem]

What is your question?

I'm trying to make a snackbar with 3 sec auto hide, + I need it to be able to swipe it away at any time. Didn't find a way to do this, please, help.

Code of Conduct

• I agree to follow this project's Code of Conduct

Hello @Apollo108.

import 'package:flutter/material.dart';
import 'package:flutter_easy_dialogs/flutter_easy_dialogs.dart';

void main() => runApp(const MainApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      builder: FlutterEasyDialogs.builder(),
      home: Scaffold(
        body: const Center(
          child: Text('Hello World!'),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () => Container(
            color: Colors.red,
            height: 200,
            width: double.infinity,
          )
              .positioned(autoHideDuration: const Duration(seconds: 3))
              .swipe()
              .slideHorizontal()
              .show(),
        ),
      ),
    );
  }
}

Try this

[Apollo108]

Thanks. But I also need to bind onHide and onShow callbacks, I found it possible via EasyDialogDecoration.builder, but I noticed that onHide doesn't trigger when I'm swiping it out, but the onDismiss does, so, in the end, it's working like this:

Please, correct me, if I'm doing it wrong.

[Apollo108]

Also I need the onTap callback, but I didn't find anything similar. Can I avoid wrapping it in GestureDetector?)

[feduke-nukem]

Thanks. But I also need to bind onHide and onShow callbacks, I found it possible via EasyDialogDecoration.builder, but I noticed that onHide doesn't trigger when I'm swiping it out, but the onDismiss does, so, in the end, it's working like this:

Please, correct me, if I'm doing it wrong.

You may use onHidden callback that is called when dialog is no longer presented. onHide doesn't fire in your case, because it's being removed via Dismissible which has it's own animation and lifecycle.

Also I need the onTap callback, but I didn't find anything similar. Can I avoid wrapping it in GestureDetector?)

You can add .tap() decoration:

import 'package:flutter/material.dart';
import 'package:flutter_easy_dialogs/flutter_easy_dialogs.dart';

void main() => runApp(const MainApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      builder: FlutterEasyDialogs.builder(),
      home: Scaffold(
        body: const Center(
          child: Text('Hello World!'),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () => Container(
            color: Colors.red,
            height: 200,
            width: double.infinity,
          )
              .positioned(autoHideDuration: const Duration(seconds: 3))
              .swipe()
              .tap(
                onDismissed: () => print('tapped'),
              )
              .slideHorizontal()
              .decorate(
                EasyDialogDecoration.builder(
                  (context, dialog) => dialog.content,
                  onHidden: () {
                    print('');
                  },
                ),
              )
              .show(),
        ),
      ),
    );
  }
}

But it will also trigger dialog hiding, if you only need to recognize tap gestures, consider using GestureDetector on provided widget.

[Apollo108]

Also, I noticed strange behavior for top-positioned dialogs - I have to add direction: position == EasyDialogPosition.top ? VerticalSlideDirection.down : VerticalSlideDirection.up, otherwise it will be sliding from the bottom (by default) during the appearance and hiding, and it looks weird. For bottom-positioned - it's fine

[feduke-nukem]

Also, I noticed strange behavior for top-positioned dialogs - I have to add direction: position == EasyDialogPosition.top ? VerticalSlideDirection.down : VerticalSlideDirection.up, otherwise it will be sliding from the bottom (by default) during the appearance and hiding, and it looks weird. For bottom-positioned - it's fine

You have full control over your dialogs, that's it.

If you want the dialog slide from bot to top or vice versa then you should provide relevant parameters.

There's no dependency on dialog's position. As you could apply slideVertical decoration to full screen dialog also.

[Apollo108]

Thank you for the awesome package and rapid response!

[feduke-nukem]

Thank you for the awesome package and rapid response!

You are welcome