How to Create Popup in Flutter Popup Menu Example - fluttercorner.com

Hello Guys How are you all ? Hope you all are fine. Today We are going to learn How to Create Popup in Flutter With Popup Menu Example.

Popup is Exactly like toast in flutter, if you read our previous tutorial How to create Toast in Flutter With Example. Then You definitely have an idea about toast. Pop-up is like a dialog box that gains complete focus when it appears on the screen.

Popup is useful when users want to know some additional information or else submit feedback, etc. In this tutorial, we will create a pop-up widget with Flutter. It will show some normal and clickable text. So Lets start this tutorial without wasting your time.

First of all Import material.dart package in your app’s main.dart file.

import 'package:flutter/material.dart';

Create Stateless widget and Define in runApp.

void main() => runApp(MyApp());

Create new StateLess Widget named MyApp And Define Home like below.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyHomePage(),
    );
  }
}

Then, Create a RaisedButton widget that will show a pop-up when we click on it. and give onPressed Property to RaisedButton Like Below.
We are using showDailoge class and trigger _buildPopupDialog widget.

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Popup Menu Example - FlutterCorner'),
        backgroundColor: Colors.black,
      ),
      body: Center(
        child: RaisedButton(
          child: Text(
            'Show Pop-up',
            style: TextStyle(
              color: Colors.white,
            ),
          ),
          color: Colors.black,
          onPressed: () {
            showDialog(
              context: context,
              builder: (BuildContext context) => _buildPopupDialog(context),
            );
          },
        ),
      ),
    );
  }
}

Now, Let’s create the main part of the tutorial that is a pop-up widget. make _buildPopupDialog Widget in your main.dart file.
in _buildPopupDialog this Widget we will return AlertDialog and that contain title, content and action that we are going to use.

Widget _buildPopupDialog(BuildContext context) {
  return new AlertDialog(
    title: const Text('Popup example'),
    content: new Column(
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Text("Hello"),
      ],
    ),
    actions: <Widget>[
      new FlatButton(
        onPressed: () {
          Navigator.of(context).pop();
        },
        textColor: Theme.of(context).primaryColor,
        child: const Text('Close'),
      ),
    ],
  );
}

Title property is title of our Popup.
content property hold all content which we used is text, but you can customize it.
actions contain footer action button, we are used FlatButton and that will dismiss our popup.
here I am Providing my full source code for batter understanding.

Here Is Source Code How to Create Popup in Flutter Popup Menu Example