'Truecaller like alert dialog in dart
I am trying to implement a true caller like alert dialog in flutter. Since I am very new to flutter+dart, I was looking for any out of the box implementation. So far I have found system_alert_window but this creates the alert dialogue in JAVA and uses platform channels to communicate with it. My question is that if it's possible to do this is pure flutter+dart.
I do not know if this kind of dialogues has any special names, also in truecaller the dialogue is shown regardless the app is running or not. Can anyone provide some pointers?
Thanks
Solution 1:[1]
No you can't do with flutter
You can only go with Java.
Flollow the steps
your project > android > app > src > main > AndroidManifest.xml
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" />
add this permission on your Androidmanifest.xml file
after adding the permission add the below receiver class
<receiver android:name=".CallReceiver"
android:enabled="true"
android:permission="android.permission.BIND_JOB_SERVICE"
android:exported="true">
<intent-filter>
<action android:name="android.intent.action.PHONE_STATE" />
</intent-filter>
</receiver>
the receiver class
ServiceReceiver.Java
public class ServiceReceiver extends BroadcastReceiver {
@Override
public void onReceive(final Context context, Intent intent) {
TelephonyManager telephony = (TelephonyManager)context.getSystemService(Context.TELEPHONY_SERVICE);
telephony.listen(new PhoneStateListener(){
@Override
public void onCallStateChanged(int state, String incomingNumber) {
super.onCallStateChanged(state, incomingNumber);
System.out.println("incomingNumber : "+incomingNumber);
WindowManager windowManager = (WindowManager) context.getSystemService(WINDOW_SERVICE);
View view = LayoutInflater.from(context).inflate(R.layout.popup_window, null); // Code for inflating xml layout
int LAYOUT_FLAG;
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
LAYOUT_FLAG = WindowManager.LayoutParams.TYPE_APPLICATION_OVERLAY;
} else {
LAYOUT_FLAG = WindowManager.LayoutParams.TYPE_PHONE;
}
WindowManager.LayoutParams params = new WindowManager.LayoutParams(
WindowManager.LayoutParams.WRAP_CONTENT,
WindowManager.LayoutParams.WRAP_CONTENT,
LAYOUT_FLAG,
WindowManager.LayoutParams.FLAG_LAYOUT_IN_SCREEN,
PixelFormat.TRANSLUCENT);
windowManager.addView(view, params);
}
},PhoneStateListener.LISTEN_CALL_STATE);
}
}
add the below xml file on the folder
your project > android > app > src > main > res > layout > popup_window.xml
popup_window.xml
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/card_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="5dp"
android:layout_marginRight="10dp"
android:layout_marginBottom="5dp"
android:background="#000000"
card_view:cardCornerRadius="4dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/popup_color"
android:orientation="vertical"
tools:ignore="UselessParent">
<LinearLayout
android:id="@+id/ll1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal"
android:padding="5dp">
<ImageView
android:id="@+id/paymentlogo"
android:layout_width="65dp"
android:layout_height="65dp"
android:scaleType="fitCenter"
android:src="@drawable/rsoft_logo"
app:srcCompat="@drawable/rsoft_logo" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical"
android:padding="3dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="2"
android:orientation="horizontal">
<TextView
android:id="@+id/lbl_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:layout_marginLeft="6dp"
android:layout_weight="0.3"
android:singleLine="true"
android:text="Anand"
android:textColor="#000000"
android:textSize="20sp" />
<ImageView
android:id="@+id/iv_close"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1.7"
android:src="@drawable/ic_close_black" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
<TextView
android:id="@+id/txt_record_id"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="TextView"
android:visibility="gone"
tools:ignore="HardcodedText" />
<View
android:id="@+id/btw_view"
android:layout_width="fill_parent"
android:layout_height="1dp"
android:layout_gravity="center"
android:background="#bab9b9" />
<LinearLayout
android:id="@+id/details_adp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal"
android:padding="5dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical"
android:padding="3dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="horizontal"
android:padding="3dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical">
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/tv_icon"
android:layout_width="17dp"
android:layout_marginTop="4dp"
android:layout_height="17dp"
android:layout_weight="1"
android:textColor="#000000"
android:src="@android:drawable/sym_call_incoming"
android:textSize="10sp" />
<TextView
android:id="@+id/tv_mobile"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="4dp"
android:layout_weight="1"
android:text="7667673691"
android:padding="0dp"
android:textColor="#000000"
android:textSize="16sp" />
</LinearLayout>
<TextView
android:id="@+id/tv_mobile_"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="4dp"
android:layout_marginTop="4dp"
android:text="Incomingg"
android:textColor="#000000"
android:textSize="12sp" />
<!-- <LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="horizontal"
android:layout_marginTop="4dp"
android:padding="3dp">
<ImageView
android:id="@+id/iv_im"
android:layout_width="14dp"
android:layout_height="14dp"
android:src="@drawable/sim" />
<TextView
android:id="@+id/tv_sim"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="4dp"
android:text="Incomingg"
android:textColor="#000000"
android:textSize="12sp" />
</LinearLayout>-->
</LinearLayout>
<TextView
android:id="@+id/tv_lead"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="4dp"
android:text="Save As Lead"
android:background="@drawable/rounded_btn"
android:padding="8dp"
android:layout_marginTop="6dp"
android:textColor="#000000"
android:textSize="16sp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</androidx.cardview.widget.CardView>
Solution 2:[2]
You can use flutter_overlay_window. Its JAVA only but works fine. The example app has a truecaller like overlay demo. The other answer is correct, no it can't be done in pure flutter.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Anandh Krishnan |
| Solution 2 | Sudipta Roy |