Break out dialogs in it's own file or class

Question

I have a beginner question. It's really simple to break out a Widget to it's own class. Like having a Column with buttons in a stateless widget that accepts some functions and some strings in the constructor. Then I can include and use this from any screen and widget in my app.

But how is this achieved with dialogs? If I design a dialog I would love to have that in its own file so I can just import it, and then pass functions and texts into it.

Right now I'm trying to break out a Picker dialog form the flutter_picker package. In one of my screens I have this:

  void _showTimeDialog() {
    Picker(
      adapter: NumberPickerAdapter(data: <NumberPickerColumn>[
        NumberPickerColumn(begin: 0, end: 60, initValue: _minutes),
        NumberPickerColumn(begin: 0, end: 60, initValue: _seconds),
      ]),
      delimiter: <PickerDelimiter>[
        PickerDelimiter(
          child: Container(
            width: 30.0,
            alignment: Alignment.center,
            child: Text(':'),
          ),
        )
      ],
      builderHeader: (context) {
        return Padding(
          padding: const EdgeInsets.symmetric(vertical: 20),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              Text('MINUTES'),
              Container(
                width: 30,
              ),
              Text('SECONDS'),
            ],
          ),
        );
      },
      hideHeader: false,
      confirmText: 'OK',
      diameterRatio: 1.3,
      magnification: 1.3,
      height: 100,
      squeeze: 1,
      title: Center(child: const Text('DURATION')),
      selectedTextStyle: TextStyle(color: Theme.of(context).primaryColor),
      onConfirm: (Picker picker, List<int> value) {
        onConfirmDurationPicker(picker, value);
      },
    ).showDialog(context);
  }

  void onConfirmDurationPicker(Picker picker, List<int> value) {
    setState(() {
      _minutes = picker.getSelectedValues()[0];
      _seconds = picker.getSelectedValues()[1];
    });
  }

What I would like is to have this in it's own file. And then I want to pass the onConfirmDurationPicker function (that will change in different screens) and some other values to set this picker up. But I don't want to have to duplicate all this code in every single screen that need this kind of picker dialog.

What's the kosher way of breaking stuff like this out in its own classes/files? Let me know if anything is unclear in my question.

Answer 1

You are on the right path! Indeed it is best practice to split your app into meaningful parts to avoid boilerplate code. In your case just create a new File and build a Stateless Widget there. This Stateless Widget should return your Picker and can take the arguments via it's constructor. You can then call your class with the .showDialog(context) wherever you want!