Dialog in Flutter – SwiftUI – Jetpack Compose

Flutter :

import 'package:flutter/material.dart';

class DialogScreen extends StatelessWidget {
  const DialogScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Column(
          children: [
            ElevatedButton(
              onPressed: () {
                showDialog(
                  context: context,
                  builder: (context) {
                    return AlertDialog(
                      icon: const Icon(Icons.warning),
                      title: const Text('Delete?'),
                      content: const Text('Do you want to delete your account?'),
                      actions: [
                        Row(
                          mainAxisAlignment: MainAxisAlignment.end,
                          children: [
                            TextButton.icon(
                              onPressed: () {
                                Navigator.of(context).pop();
                              }, 
                              icon: const Icon(Icons.check), 
                              label: const Text('Yes'),
                            ),

                            TextButton.icon(
                              onPressed: () {
                                Navigator.of(context).pop();
                              }, 
                              icon: const Icon(Icons.remove), 
                              label: const Text('No'),
                            )
                          ],
                        )
                      ],

                    );
                    
                  });
                
              }, 
              child: const Text('Dialog'))
          ],
        ),
      ),
    );
  }
}

SwiftUI :

import SwiftUI

struct DialogView: View {
    @State private var showDialog = false
    var body: some View {
        Button("Show Alert") {
            showDialog = !showDialog
        }
        .alert(isPresented: $showDialog) {
            Alert(
                title: Text("Delete!"),
                message: Text("Do you want to delete your account?"),
                primaryButton: .destructive(Text("Yes"), action: {
                    print("Yes")
                }),
                secondaryButton: .cancel(Text("No"),action: {
                    print("No")
                })
            )
            
        }
        
    }
}

struct DialogView_Previews: PreviewProvider {
    static var previews: some View {
        DialogView()
    }
}

Jetpack Compose :

package com.example.composeuidemo

import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.AlertDialog
import androidx.compose.material.Button
import androidx.compose.material.ButtonDefaults
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.MutableState
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color


import androidx.compose.ui.unit.dp



@Composable
fun ShowDialog() {
    val openDialog = remember {
        mutableStateOf(false)
    }
    Button(
        colors = ButtonDefaults.buttonColors(
            backgroundColor = Color.Red,
            contentColor = Color.White,
        ),
        modifier = Modifier
            .clip(RoundedCornerShape(8))
            .width(220.dp)
            .padding(8.dp),

        onClick = {
                  openDialog.value = !openDialog.value
        },
    ) {
        Text(text = "Show Dialog")
    }

    if (openDialog.value) {
        AlertDialog(
            onDismissRequest = {
                openDialog.value = true
            },
            title = {
                Text(text =  "Delete?")
            },
            text = {
                Text("Do you want to delete your account?")
            },
            buttons = {
                Row(
                    modifier = Modifier
                        .padding(all = 8.dp)
                        .fillMaxWidth()
                    ,
                    horizontalArrangement = Arrangement.End
                ) {

                    Button(
                        onClick = { openDialog.value = false }
                    ) {
                        Text("No")
                    }

                    Spacer(modifier = Modifier.width(8.dp))

                    Button(

                        onClick = { openDialog.value = false }
                    ) {
                        Text("Yes")
                    }
                }
            }
        )
    }
}