Custom Dialog using Flutter

 

In this tutorial, I'll show you the simplest way to build a custom alert dialog using flutter, like this

Source code: 

import 'package:flutter/material.dart';

void main() {

  runApp(MyApp());

}

class MyApp extends StatelessWidget {

  // This widget is the root of your application.

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      debugShowCheckedModeBanner: false,

      title: 'Flutter Demo',

      theme: ThemeData(

        primarySwatch: Colors.blue,

        visualDensity: VisualDensity.adaptivePlatformDensity,

      ),

      home: MyHomePage(title: 'Flutter Demo Home Page'),

    );

  }

}

class MyHomePage extends StatefulWidget {

  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override

  _MyHomePageState createState() => _MyHomePageState();

}

class _MyHomePageState extends State<MyHomePage> {

  Future<void> _showdialog() async {

    return showDialog<void>(

        context: context,

        barrierDismissible: false,

        builder: (BuildContext context) {

          return Dialog(

              backgroundColor: Colors.white,

              child: Container(

                height: 350.0,

                child: Column(

                  children: [

                    Image.network(

                        "https://static.vecteezy.com/system/resources/thumbnails/000/203/020/original/T_17-01.jpg"),

                    Text(

                      "Dicover space",

                      style: TextStyle(

                        color: Colors.black87,

                        fontSize: 28.0,

                      ),

                    ),

                    Expanded(

                      child: Padding(

                        padding: const EdgeInsets.all(8.0),

                        child: Center(

                          child: Text(

                            "This is a simple and custom dialog box that you can add to your project",

                            textAlign: TextAlign.center,

                          ),

                        ),

                      ),

                    ),

                    Padding(

                      padding: const EdgeInsets.all(8.0),

                      child: Container(

                        alignment: Alignment.centerRight,

                        child: MaterialButton(

                          color: Colors.blue,

                          onPressed: () => Navigator.of(context).pop(),

                          child: Text(

                            "Close",

                            style: TextStyle(

                              color: Colors.white,

                            ),

                          ),

                        ),

                      ),

                    )

                  ],

                ),

              ));

        });

  }

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(

        title: Text("Custom Dialog"),

      ),

      body: Center(

        child: FlatButton(

          onPressed: () {

            _showdialog();

          },

          color: Colors.blue,

          child: Text(

            "Open Dialog",

            style: TextStyle(

              color: Colors.white,

            ),

          ),

        ),

      ),

    );

  }

}