Landscape version?

[codegrue]

Would love an alternate layout that works in landscape format. Perhaps with the color square in the left and the sliders on the right. For reference see the date_picker.dart showDatePicker() dialog that displays differently depending on orientation.

[mchome]

Like this?

[codegrue]

Perfect. Thanks!

Only other enhancement I would love is to be able to inject style into the title for both orientations. Trying to make it consistent with the built in material pickers and they have a background on the title.

[mchome]

Something like this?

showDialog(
  context: context,
  builder: (BuildContext context) {
    return AlertDialog(
      titlePadding: EdgeInsets.all(0.0),
      contentPadding: EdgeInsets.all(0.0),
      title: Container(
        color: Theme.of(context).primaryColor,
        child: Center(
          child: const Text(
            'Pick a color!',
            style: TextStyle(
              fontSize: 20.0,
              color: const Color(0xffffffff),
            ),
          ),
        ),
        padding: EdgeInsets.all(20.0),
      ),
      content: SingleChildScrollView(
        child: ColorPicker(
          pickerColor: pickerColor,
          onColorChanged: changeColor,
          colorPickerWidth: 1000.0,
          pickerAreaHeightPercent: 0.7,
        ),
      ),
      actions: <Widget>[
        FlatButton(
          child: Text('Got it'),
          onPressed: () {
            setState(() => currentColor = pickerColor);
            Navigator.of(context).pop();
          },
        ),
      ],
    );
  },
)

[codegrue]

That is very nice! Only additional tweak for consistency with stock pickers would be the buttons should be "CANCEL" and "OK".

[mchome]

You can do this by editing the AlertDialog's actions look like this.

actions: <Widget>[
  FlatButton(
    child: Text('OK'),
    onPressed: () {
      setState(() => currentColor = pickerColor);
      Navigator.of(context).pop();
    },
  ),
  FlatButton(
    child: Text('CANCEL'),
    onPressed: () => Navigator.of(context).pop(),
  ),
],

[codegrue]

Suggestion to update your project example to show usage of landscape orientation (and switching).

[codegrue]

This is what I get trying to package it into landscape:

Actual usage code for reference is here:

https://github.com/codegrue/card_settings/blob/master/lib/widgets/picker_fields/card_settings_color_picker.dart

* Note: portrait works as expected.

[mchome]

What's your example result? Looks like you need to fill the colorPickerWidth and disable enableLabel.

[codegrue]

colorPickerWidth: 1000.0 fixed it. Thank you.