GTF
GTF

Reputation: 155

Custom Dialog Flutter with many buttons

What I'm trying to do is create a custom dialog with many buttons in flutter, When user press a button, my goal is to close custom dialog and know which button is pressed (in order to refresh my homepage by using of provider)

I define custom dialog with 2 button (for example). How I can achieve my goal?

That is the code:

CustomDialog.dart

import 'package:flutter/material.dart';
class CustomDialog extends StatelessWidget {

  dialogContent(BuildContext context) {
    return Container(
      decoration: new BoxDecoration(
        color: Colors.white,
        shape: BoxShape.rectangle,
        borderRadius: BorderRadius.circular(10),
        boxShadow: [
          BoxShadow(
            color: Colors.black26,
            blurRadius: 10.0,
            offset: const Offset(0.0, 10.0),
          ),
        ],
      ),
      child: Column(
        mainAxisSize: MainAxisSize.min, // To make the card compact
        children: <Widget>[
          RaisedButton(
            onPressed: (){},
            child: Text("Button 1"),
          ),

          RaisedButton(
            onPressed: (){},
            child: Text("Button 2"),
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Dialog(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(10),
      ),
      elevation: 0.0,
      backgroundColor: Colors.transparent,
      child: dialogContent(context),
    );
  }
}


In main.dart I call it:

Container(
              child: Center(
                child: RaisedButton(
                  onPressed: (){
                    showDialog(context: context,
                        builder: (BuildContext context){
                          return CustomDialog(

                          );
                        }
                    );
                  },
                  child: Text("Custom Dialog"),
                ),
              ),
            ),

Upvotes: 2

Views: 1277

Answers (2)

GTF
GTF

Reputation: 155

I solved in this way:

showDialog(context: context,
                    builder: (BuildContext context){
                      return CustomDialog(

                      );
                    }
                ).then((value) {

                });

And in CustomDialog:

Navigator.pop(context, //** RETURNED VALUE**//);

Upvotes: 2

Dominik Šimon&#237;k
Dominik Šimon&#237;k

Reputation: 1602

From the dialog it is possible to return the value back to the place where it was opened

First, you have to wait for the value when you open the dialog

 return Container(
      child: Center(
        child: RaisedButton(
          onPressed: () async {
            var pressedButtonNumber = await showDialog<int>(
                context: context,
                builder: (BuildContext context) {
                  return CustomDialog();
                });

            print(pressedButtonNumber);
          },
          child: Text("Custom Dialog"),
        ),
      ),
    );
  }

And then you have to return the value when you close the dialog

          RaisedButton(
            onPressed: () {
              Navigator.of(context).pop(1);
            },
            child: Text("Button 1"),
          ),

Upvotes: 0

Related Questions