Flutter incoming video/audio call notification using Agora

I have been working on an application and I need to implement in app audio and video calling in my app which I have done using Agora.io but the issue is I have to display incoming call notification does not matter if app is in foreground or in background. I have tried many things but still I am unable to configure that out. I am using agora_rtc_engine package for making calls.

Any help would be appreciated.

Thanks

The code I am working with currently:

Call Methods

class CallMethods {
  final callRef = FirebaseFirestore.instance.collection('Calls');

  Stream<DocumentSnapshot> callstream({@required String id}) =>
      callRef.doc(id).snapshots();

  Future<bool> makeCall({@required Call call}) async {
    try {
      log('Making call');
      call.hasdialed = true;
      Map<String, dynamic> hasDialedMap = call.toMap(call);

      call.hasdialed = false;
      Map<String, dynamic> hasNotDialedMap = call.toMap(call);

      await callRef.doc(call.senderid).set(hasDialedMap);
      await callRef.doc(call.receiverid).set(hasNotDialedMap);

      return true;
    } catch (e) {
      print(e);
      return false;
    }
  }

  Future<bool> endCall({@required Call call}) async {
    try {
      log('ending call');
      await callRef.doc(call.senderid).delete();
      await callRef.doc(call.receiverid).delete();

      return true;
    } catch (e) {
      print(e);
      return false;
    }
  }
}

Call Utils: Which is used to make calls

class CallUtils {
  static final CallMethods callmethods = CallMethods();

  static dial(
    BuildContext context, {
    @required User from,
    @required var to,
  }) async {
    Call call = Call(
      senderid: from.id,
      // senderpic: from.avatar.url,
      callername: from.name,
      receiverid: to.id,
      // receiverpic: to.avatar.url,
      receivername: to.name,
      channelid: Random().nextInt(999999).toString(),
    );

    bool callmade = await callmethods.makeCall(call: call);
    call.hasdialed = true;

    if (callmade) {
      Navigator.push(
        context,
        MaterialPageRoute(
          builder: (context) => VideoCallScreen(call: call),
        ),
      );
    }
  }
}

After that I have a pickup layout which is used to wrap all the screens to display incoming call notification.

Pickup Call Layout:

(user.value.id != null)
          ? StreamBuilder<DocumentSnapshot>(
              stream: callmethods.callstream(id: user.value.id),
              builder: (context, snapshot) {
                if (snapshot.hasData && snapshot.data.data() != null) {
                    Call call = Call.fromMap(snapshot.data.data());
                  if (!call.hasdialed) {
                    return PickupScreen(call: call);
                  } else {
                    return widget.scaffold;
                  }

                } else {
                  return widget.scaffold;
                }
              },
            )
          : widget.scaffold,

It can be done via firebase push notifications & backend API service.

Sender side:

As soon as a call is made, you would post your backend api service with caller and receiver id, and your backend service is further responsible to send a push notification with a payload to the receiver.

Receiver side:

When receiver gets a push notification, you can configure it to open your app automatically and show a screen with all the payload information. Maybe you can show him a screen with accept and decline button and if he accepts, you can connect him to Agora.

Check this for payload configuration.