How can i implement a custom dialog?

Question

Hello I'm working on an language application and when user clicks on a word, i want to show a custom dialog like this: enter image description here

Answer 1

When you call showDialog, inside the builder you usually return an instance of AlertDialog. The content of AlertDialog can be any widget. Use your custom widget inside AlertDialog and you are set.

showDialog<void>(
  context: context,
  builder: (BuildContext context) {
    return AlertDialog(
      title: const Text('Dialog Title'),
      content: MyCustomDialogWidget(),
    );
  },
);

Answer 2

better use Dialog widget than AlertDialog

showDialog(
  context: context,
  builder: (BuildContext context) =>
     Dialog(
      child: Container(Text("hello")));

Answer 3

Try below code hope it helpful to you.use flutter_custom_clippers package for your design add this package in your pubspec.yaml file, import below package in your code file

import 'package:flutter_custom_clippers/flutter_custom_clippers.dart';

your alert function:

customAlert() {
 showDialog(
  context: context,
  builder: (BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        ClipPath(
          clipper: MessageClipper(),
          child: Container(
            margin: EdgeInsets.all(10),
            height: 150,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.all(
                Radius.circular(16.0),
              ),
              color: Colors.blue,
            ),
            child: Center(
              child: Text("Add Your Text Here",
                  style: TextStyle(
                    color: Colors.white,
                  )),
            ),
          ),
        ),
      ],
    );
  },
 );
}

Your Widget:

     TextButton(
        child: Text('Alert'),
        onPressed: () =>
            customAlert(),  
      ),

Your result screen->