Flutter, how to call Dialog function from another class

Question

what is the proper way to call Dialog function from another class.

I have been searching this topic for a while but seems none of them are my answer.

my Dialog has a little complicated logic for server communicating and some paginations

so this code is going to be long for just one dart file. so I want to separate them.

and I need the some dialog animations so I picked the showGeneralDialog()

I also saw the example dialog implementaion using StatefulBuilder() which can use setState,

but this problem is it is not able to use initState()

for now, what I did is below

dart1 file

import 'package:aaa/bbb/some_dialog_file.dart'
    as someDialog;

        GestureDetector(
          onTap: () async{
            var result =
                await someDialog.displayDialogOKCallBack(
                context,
              );
          },
          child: Container(
            width: 60,
            height: 60,
            child: Icon(
              Icons.comment,
              size: 38,
            ),
          ),
        )

dart2 file

Future<dynamic> displayDialogOKCallBack(BuildContext context) async {

  return await showGeneralDialog(
    barrierLabel: "Label",
    barrierDismissible: true,
    // barrierColor: ,
    transitionDuration: Duration(milliseconds: 400),

    context: context,
    pageBuilder: (context, anim1, anim2) {
      return StatefulBuilder(builder: (context, setState) {

        return Scaffold(            
          body: SafeArea(
            
          ),
        );
      });
    },
    transitionBuilder: (context, anim1, anim2, child) {
      return SlideTransition(
        position:
            Tween(begin: Offset(0, 1), end: Offset(0, -0.02)).animate(anim1),
        child: child,
      );
    },
  );
}

so my question is I want to build very clean animation dialog

which is logically separated from base class file and it has to have initState(), and setState()

how could I acheive this ? thanks

Answer 1

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: RaisedButton(
        onPressed: () {
          someDialog(context);
        },
        child: Text("click"),
      ),
    );
  }

  Future<dynamic> someDialog(BuildContext context) async {
    return await showGeneralDialog(
        barrierLabel: "Label",
        barrierDismissible: true,
        context: context,
        pageBuilder: (context, anim1, anim2) {
          return Scaffold(
            backgroundColor: Colors.transparent,
            body: SafeArea(
              child: Center(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: [
                    Column(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: [
                        // List
                        AnotherClassDialog(),
                      ],
                    ),
                  ],
                ),
              ),
            ),
          );
        });
  }
}

class AnotherClassDialog extends StatefulWidget {
  @override
  _AnotherClassDialogState createState() => _AnotherClassDialogState();
}

class _AnotherClassDialogState extends State<AnotherClassDialog> {
  Color color;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    color = Colors.black;
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: [
          RaisedButton(
            onPressed: () {
              setState(() {
                color = Colors.red;
              });
            },
          ),
          Container(
            width: 100,
            height: 100,
            color: color,
          ),
          RaisedButton(
            onPressed: () {
              setState(() {
                color = Colors.green;
              });
            },
          )
        ],
      ),
    );
  }
}

Answer 2

I use a custom dialog in my app in some classes and had the same problem. You should define a dialog and pass context and other variables to it and call it everywhere you want.

You can define a dialog like this :

showCustomDialog(BuildContext context, String title, String description) {
  showDialog(
    context: context,
    builder: (BuildContext context) {
     return AlertDialog(
      title: Text(
        title,
        textAlign: TextAlign.right,
      ),
      content: SingleChildScrollView(
        child: Text(
          description,
          style: Theme.of(context).textTheme.bodyText1,
          textAlign: TextAlign.right,
        ),
      ),
      actions: [
        FlatButton(
          child: Text(
            'ok',
            style: Theme.of(context).textTheme.bodyText2.copyWith(
                  color: Theme.of(context).accentColor,
                ),
          ),
          onPressed: () => Navigator.of(context).pop(),
        ),
      ],
      actionsPadding: EdgeInsets.symmetric(
        horizontal: 10,
        vertical: 5,
      ),
    );
  });
}

and use it everywhere you want like this :

InkWell(
       child: Icon(
                  Icons.error_outline,
                  size: 17,
             ),
       onTap: () =>  showCustomDialog(context,"text1" , "text2") ,
),

I hope my answer will help you.