ColorPickerActionButtons: dialogActionButtons are not showing up in the bottom

[bettyballin]

Hello,

i have the following code and want to display the dialogActionButtons in the bottom of the dialog. Unfortunately, they will not appear.

showDialog(
        context: context,
        builder: (BuildContext context) {
          return SizedBox(
              width: double.infinity,
              child: LayoutBuilder(builder: (context, constraint) {
                return Padding(
                    padding: const EdgeInsets.all(5.0),
                    child: SingleChildScrollView(
                      child: Card(
                        elevation: 2,
                        child: ColorPicker(
                          color: primaryColor!,
                          onColorChanged: (Color color) {
                             setState(() {
                                    primaryColor = color;
                                  })
                          },
                          width: constraint.smallest.shortestSide * 0.1,
                          height: constraint.smallest.shortestSide * 0.1,
                          actionButtons: const ColorPickerActionButtons(
                            okButton: false,
                            closeButton: false,
                            dialogActionButtons: true,
                          ),
                          pickersEnabled: <ColorPickerType, bool>{
                            ColorPickerType.both: true,
                            ColorPickerType.accent: false,
                            ColorPickerType.primary: false,
                          },
                        ),
                      ),
                    );
              )}));
        }
);

[rydmike]

Hi @bettyballin, without seeing a bit more of the use case it is difficult the say for 100% sure what the issue is. However, based on the included code, it looks to me like you are using the ColorPicker Widget in your own custom dialog.

It is of course a perfectly fine use case, to use your own custom dialog design. However, FlexColorPicker and its properties cannot control or show bottom buttons in a dialog (AlertDialog) that is not a dialog it creates and controls itself.

If you want to use your own dialog you will have to make your own dialog buttons and correct actions on them as a part of your own custom dialog.

In the FlexColorPicker config class ColorPickerActionButtons the okButton and closeButton are indeed controlling a part of the ColorPicker Widget's title content. So they will actually show up in a custom dialog too, although I have not actually tested how/if they work when used with a custom dialog, but to be honest they were not intended to be used in custom dialog design either. The reason being that if you are making your own dialog design, your probably want to make your own title and any top actions buttons as well.

In the config class ColorPickerActionButtons , the dialogActionButtons is controlling the visibility of action buttons when you use the ColorPicker:s built-in dialog. Thus this setting will not have any impact at all in your custom dialog, since you are not using the part of FlexColorPicker package at all where it is used and has an impact.

For more info on the built-in ways of using the ColorPicker with its pre-made dialogs, please see the tutorial here: https://pub.dev/packages/flex_color_picker#dialog-colorpicker-method or here https://pub.dev/packages/flex_color_picker#dialog-colorpicker-function

If you just want to quickly select and pick a color, the latter one is easier to use. If you also want to interactively change colors (like theme colors etc) in the running app, while the dialog is open and operated, then you need to use the first a bit more complex variant.

As mentioned though, you can totally make and build your own dialog, you just can't use features related to built-in dialogs when doing so. Of course nothing prevents you from re-using some of the properties in FlexColorPicker and its config classes, to control availability and visibility of same features in your own custom dialog(s), but you will have to code in that behavior then.

The built-in dialog in FlexColorPicker does offer quite a lot of configuration options, so in most/many cases you might not need to make a custom dialog. In case you did not try that already, you might want to test it too.

In addition to the tutorial the live web demo and its package bundled code also offers more insights into usage and configuration options of the ColorPicker.

Hope this explanation helps! 😃

[rydmike]

Closing this question since there has not been any follow-up question or activity since the above answer. If you feel that answer is not sufficient, fell free to open a new follow-up question.