Notifications are overlapping each other about overlay_support HOT 11 CLOSED

You can use TransientKey.

from overlay_support.

The logic of any UI is to always show the information in an ordered way, so the user can respond/interact with it. If you have multiple notifications showing at the same time on top of each other, and also dismissing at the same time, the user will only ever be able to see/interact with the top-most notification.

Consider the following scenario: A user is swiping to delete messages in an email app; each message is deleted in its own thread, and so takes an unknown amount of time to complete. The user expects to be able to swipe and delete as many messages as they want, and get a visual confirmation for each message deleted.
In this scenario, the notifications would be one display in one of these manners:
a) Stacked and displayed whenever they come in. (E.g.: a column of boxes.)
b) Sequenced and displayed one after the other, in the order they arrived. (I.e.: at any given time, only one notification will be displayed.)

Currently, if you trigger multiple notifications at the same time, they overlay and only the top-most notification is visible (while the other ones are animating in and out below it).

Sorry for the lengthy answer. Hope it's clear enough.

from overlay_support.

That's alright. I already wrote my own library that does everything I expected overlay_support or flushbar to do. I might publish it, to save people the hassle of opening more tickets like this one.

Thanks for taking the time to listen.

from overlay_support.

Can you be a little more vague? I almost understood your answer. 😜

Seriously, though. Adding a key to showOverlayNotification doesn't prevent the notifications from firing at the same time.

Also, this should be the default behavior. There is no use case where notifications should overlap or not wait for the previous one to dismiss first.

from overlay_support.

Adding a key to showOverlayNotification doesn't prevent the notifications from firing at the same time.

I think this should be a bug.

Also, this should be the default behavior

the default behavior? Is it important? if you want it be the default behaior, maybe you can just define a top function named with showXXXNotification.

from overlay_support.

Same issue can you please fix it ?

from overlay_support.

Indeed this is a normal requirement, but I think you are using the wrong tool.

This project is not to solve this kind of problem.

If you are developing an email application, when a new email arrives, you should use the notification API of the system to pop up a notification instead of using this library. The API provided by the Android/iOS system handles the problems you mentioned above well.

As for how flutter uses Android/iOS system-level notifications, I think you can refer to this repository. https://pub.dev/packages/flutter_local_notifications

from overlay_support.

I'm not talking about device notifications. I'm talking about user-triggered interactions that requires visual communication to the user. If the user deletes an email in Gmail, Gmail shows a "notification" widget on the bottom of the screen that allows the user to undo the deletion. That's not a "native" notification, and had nothing to do with what you're talking about. I suggest you give a second read to my use case above. It describes something competitor different from what you understood.

If that's not clear enough, maybe you can try the following: Create a loop that displays 5 notifications, each one with a button that prints "Clicked" on it. Give each Flushbar a duration of 3 seconds. Now try and click the button on all 5 notifications.

from overlay_support.

import 'dart:async';

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return OverlaySupport(
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
          visualDensity: VisualDensity.adaptivePlatformDensity,
        ),
        home: HomePage(),
      ),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _count = 0;

  @override
  void initState() {
    super.initState();
    Timer.periodic(const Duration(seconds: 2), (timer) {
      _count++;
      showSimpleNotification(
        Text("Hello, $_count"),
        trailing: Builder(builder: (context) {
          return FlatButton(
              onPressed: () {
                OverlaySupportEntry.of(context).dismiss();
                toast("You Click $_count");
              },
              child: Text("Click Me"));
        }),
        key: const ValueKey("test_notification"),
        position: NotificationPosition.bottom,
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(body: Container());
  }
}

I just create a sample. Is there anything wrong? actually I can not undertand.

from overlay_support.

Try this code:

import 'dart:async';

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return OverlaySupport(
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
          visualDensity: VisualDensity.adaptivePlatformDensity,
        ),
        home: HomePage(),
      ),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _count = 0;

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: RaisedButton(
            child: Text('Generate'), onPressed: _generateNotification),
      ),
    );
  }

  void _generateNotification() async {
    _count++;
    showSimpleNotification(
      Text('Hello, $_count'),
      duration: Duration(seconds: 3),
      trailing: Builder(builder: (context) {
        return FlatButton(
            onPressed: () {
              OverlaySupportEntry.of(context).dismiss();
              toast('You Clicked $_count');
            },
            child: Text('Click Me'));
      }),
      key: ValueKey('test_notification_$_count'),
      position: NotificationPosition.bottom,
    );
  }
}

Quickly tap the button 5-6 times, and see how the notifications are displayed one on top of the other. If you try to click all 5-6 buttons, you'll fail because the lowest ones (#1-3) already dismiss by the time you get to them.

from overlay_support.

This behavior is expected.

If you disagree, please feel free to tell me what kind of behavior is you want.
the behaviors include but are not limited to:

1. How to link and interact between the previous notification and the next notification.
2. How to deal with the relationship between the top and bottom notifications.
3. What do you expect the UI to look like? How to ensure that the UI effect is sufficiently customizable to meet various APP
   Needs?

If you can provide an animation effect to show your ideas, that would be the best.

from overlay_support.