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

Have you tried using `Provider`? You can create a separate class for `Server communications` , and use a provider to access that class and its functions from the children widgets. — ASAD HAMEED, Oct 24 '20 at 04:09

dontknowhy · Accepted Answer · 2020-10-26T09:44:41.787

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;
              });
            },
          )
        ],
      ),
    );
  }
}

MahdiGharooni · Answer 2 · 2021-02-07T13:24:57.980

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.

how to implement setState() and initState()? in another class? which has a dialog function class — dontknowhy, Oct 24 '20 at 08:06
In this way, you can't use setState or initState. You can pass a function as argument to a class. See this question: https://stackoverflow.com/questions/54493002/pass-method-as-parameter-to-a-widget — MahdiGharooni, Oct 24 '20 at 10:31
Thank you for the effort, but it doesn't seem to relate to my problem. — dontknowhy, Oct 24 '20 at 11:29

Flutter, how to call Dialog function from another class

2 Answers2