Releases #

[1.7.0] - 3/13/2020 #

• (breaking change) removed showErrorIOS as the validator now works for both material and cupertino. This affects: CardSettingsText, CardSettingsParagraph , CardSettingsEmail, CardSettingsDouble, CardSettingsCurrency, CardSettingsInt, CardSettingsPassword, CardSettingsPhone
• removed the word 'Select' from the hard coded label of CardSettingsMultiselect to allow for localization
• example app: changed showMaterialonIOS swap icon to show android or apple logo
• example app: added a dialog on save to mention there are validation errors, as the button appeard to do nothing previosly

[1.6.1] - 2/13/2020 #

• updated to use latest version of flutter_cupertino_settings

[1.6.0] - 2/13/2020 #

• removed pickers and instead referenced the flutter_material_pickers package

[1.5.5] - 1/6/2020 #

• Updated library references to latest for: flutter_cupertino_settings, flutter_masked_text

[1.5.4] - 1/6/2020 #

• Allowed label width to be set for CardSettingsSwitch. https://github.com/codegrue/card_settings/issues/86

[1.5.3] - 12/13/2019 #

• Enhanced ListPicker to allow a list of values separate from options. https://github.com/codegrue/card_settings/issues/60

[1.5.2] - 12/13/2019 #

• Fixed elevation not showing in .sectioned version. Padding as well. https://github.com/codegrue/card_settings/issues/63

[1.5.1] - 12/13/2019 #

• Fixed display of ColorPicker
• Added pickerType property to pick one of "Colors", "Material", or "Block". https://github.com/codegrue/card_settings/issues/62
• Migrated Android example to use AndroidX API

[1.5.0] - 12/12/2019 #

• Upgraded intl dpendency to 1.16.0 https://github.com/codegrue/card_settings/issues/82
• Added code to restrict double's number of decimal digits https://github.com/codegrue/card_settings/issues/81
• Added .IsDense to field content so heights line up
• Added global labelWidth property https://github.com/codegrue/card_settings/issues/80
• fixed all code warnings
• replaced deprecated code

[1.4.2] - 10/3/2019 #

• text align will now used property or end if null
• Added hint text and made initial value optional
• Fixed validator and save issue
• Fixed required indicator position in android
• dynamic multi line support

[1.4.1] - 2/21/2019 #

• Added Slider
• Added Dark Mode Support
• Updated Example

[1.4.0] - 2/18/2019 #

• Added Optional override for showing material on iOS
• Added Cupertino Forms and all Cupertino Equilivant Controls and Actions
• Updated Example
• [Warning] For the text fields on iOS using [CupertinoTextFields] the [validator] and [onSaved] do not exist, please use [showErrorIOS] to show a [red] Border around the Text Field and [onChanged] and [onFieldSubmitted] to update the value like in the example.
• Require Indicator on iOS will show * next to the label if [requireIndicator] is not equal to null.

[1.3.1] - 2/15/2019 #

• Updated Build Methodes for All Widgets (No More Errors for Dart 2)
• Added Cupertino Widgets for Date, DateTime, Time and List Picker (onLongPress Overrides to material)

[1.2.5] - 1/22/2019 #

• Fixed validator text not showing up in any new line fields (e.g. CardSettingsMultiselect)

[1.2.4] - 1/9/2019 #

• Allow for zero width margin around card by setting padding to zero

[1.2.3] - 1/9/2019 #

• Fixes text color not reflecting custom color in the Instructions widget
• Added the ability to hide the counter in the paragraph control
• Added missing hint text for the password field
• fixed case where if there is no change handler then we crashed
• Added missing contentOnNewLine field
• Added missing contentOnNewLine field
• Added missing contentOnNewLine field

[1.2.2] - 11/2/2018 #

• Fixed a crash bug with icons when a theme color is not provided

[1.2.1] - 10/2/2018 #

• Removed hard coded word 'Select' from picker title
• Added text capitalization to CardSettingsText
• Set picker to first item if no initialvalue is provided
• Added 'hintText' to CardListPicker

[1.2.0] - 9/8/2018 #

• Fixed overflow bug with picker dialogs on smaller screens
• Refactored row layout helpers into a single flexible CardFieldLayout

[1.1.0] - 9/5/2018 #

• Added hintText to CardSettingsText widget

[1.0.1] - 8/24/2018 #

• Changed Example to use NativeDeviceOrientationReader for orientation changes.

[1.0.0] - 8/24/2018 #

• Ready for full release. No API changes predicted
• Added Discord channel to the collaboration section

[0.1.16] - 8/23/2018 #

• Added CardSettingsMultiselect widget
• Fixed bug when onChange was null
• Fixed validation issue with phone numbers

[0.1.15] - 8/20/2018 #

• Added landscape layout and material title for CardSettingsListPicker
• Added landscape layout and material title for CardSettingsNumberPicker
• Added landscape layout and material title for CardSettingsColorPicker

[0.1.14] - 8/20/2018 #

• Added CardFieldLayout_FractionallySpaced for controlled spacing in a row
• Fixed bug with labelAlign right not working

[0.1.13] - 8/19/2018 #

• Enhanced the example to show switching to landscape orientation
• Created CardFieldLayout_EqualSpaced to handle mutiple fields in a row.

[0.1.12] - 8/17/2018 #

• Added padding and cardElevation to CardSettings
• Added support for field icon to every widget
• Added a requiredIndicator to show next to a label
• Removed textInputAction property to be compatible with the current beta branch

[0.1.11] - 8/15/2018 #

• downgraded intl dependency to ^0.15.6
• removed a few properties that were reported as issues in dartpub analyze

[0.1.10] - 8/9/2018 #

• Removed TextCapitalization from CardSettingsText due to an analysis error

[0.1.8] - 8/9/2018 #

• Added a analysis_options.yaml file and a bunch if linter checks
• Cleaned and tigtened code

[0.1.7] - 8/8/2018 #

• All fields now implement an onChange event.
• Added a CardSettingsPhone widget
• Enhanced CardSettingsText to allow a input mask (based on flutter_masked_text)

[0.1.6] - 8/2/2018 #

• Added contentAlign property to all fields to allow for right justification
• Added labelAlign to CardHeaders to allow center or right positioning
• Improved support of themes for input text and labels

[0.1.5] - 8/1/2018 #

• Support default button style through themes
• All text fields expose controller as optional parameter (except currency)
• Support theming of header text
• Changed CardSettings to an InheritableWidget with global properties to control label appearance
• Added a labelAlign property to all fields

[0.1.4] - 7/31/2018 #

• Added CardSettingsEmail field
• Added CardSettingsPassword field
• Changed all TextFormFields to be stateless widget wrappers

[0.1.3] - 7/30/2018 #

• Added CardSettingsCurrency field
• Added CardSettingsInstructions field
• Added CardSettingsButton field
• Added ability to tap to select in pickers

[0.1.2] - 7/27/2018 #

• Attempt to improve documentation and remove warnings

[0.1.1] - 7/26/2018 #

• General cleanup to meet publication requirements.

[0.1.0] - 7/26/2018 #

• First release implementing card view and core set of field widgets.

example/lib/main.dart

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:card_settings/card_settings.dart';
import 'results.dart';
import 'model.dart';
import 'dart:io';
import 'package:flutter/cupertino.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Card Settings Example',
      home: PonyExample(),
      theme: ThemeData(
        accentColor: Colors.indigo[400], // background color of card headers
        cardColor: Colors.white, // background color of fields
        backgroundColor: Colors.indigo[100], // color outside the card
        primaryColor: Colors.teal, // color of page header
        buttonColor: Colors.lightBlueAccent[100], // background color of buttons
        textTheme: TextTheme(
          button:
              TextStyle(color: Colors.deepPurple[900]), // style of button text
          subhead: TextStyle(color: Colors.grey[800]), // style of input text
        ),
        primaryTextTheme: TextTheme(
          title: TextStyle(color: Colors.lightBlue[50]), // style for headers
        ),
        inputDecorationTheme: InputDecorationTheme(
          labelStyle: TextStyle(color: Colors.indigo[400]), // style for labels
        ),
      ),
      darkTheme: ThemeData.dark(),
    );
  }
}

class PonyExample extends StatefulWidget {
  @override
  _PonyExampleState createState() => _PonyExampleState();
}

class _PonyExampleState extends State<PonyExample> {
  final _ponyModel = PonyModel();

  // once the form submits, this is flipped to true, and fields can then go into autovalidate mode.
  bool _autoValidate = false;

  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();

  // control state only works if the field order never changes.
  // to support orientation changes, we assign a unique key to each field
  // if you only have one orientation, the _formKey is sufficient
  final GlobalKey<FormState> _nameKey = GlobalKey<FormState>();
  final GlobalKey<FormState> _typeKey = GlobalKey<FormState>();
  final GlobalKey<FormState> _ageKey = GlobalKey<FormState>();
  final GlobalKey<FormState> _descriptionlKey = GlobalKey<FormState>();
  final GlobalKey<FormState> _hobbiesKey = GlobalKey<FormState>();
  final GlobalKey<FormState> _coatKey = GlobalKey<FormState>();
  final GlobalKey<FormState> _maneKey = GlobalKey<FormState>();
  final GlobalKey<FormState> _hasSpotsKey = GlobalKey<FormState>();
  final GlobalKey<FormState> _spotKey = GlobalKey<FormState>();
  final GlobalKey<FormState> _heightKey = GlobalKey<FormState>();
  final GlobalKey<FormState> _weightKey = GlobalKey<FormState>();
  final GlobalKey<FormState> _dateKey = GlobalKey<FormState>();
  final GlobalKey<FormState> _timeKey = GlobalKey<FormState>();
  final GlobalKey<FormState> _priceKey = GlobalKey<FormState>();
  final GlobalKey<FormState> _phoneKey = GlobalKey<FormState>();
  final GlobalKey<FormState> _emailKey = GlobalKey<FormState>();
  final GlobalKey<FormState> _passwordKey = GlobalKey<FormState>();
  final GlobalKey<FormState> _sliderKey = GlobalKey<FormState>();

  bool _showMaterialonIOS = true;

  @override
  Widget build(BuildContext context) {
    var orientation = MediaQuery.of(context).orientation;

    return Scaffold(
      key: _scaffoldKey,
      backgroundColor: Theme.of(context).backgroundColor,
      appBar: AppBar(
        title: Text("My Little Pony"),
        actions: <Widget>[
          Container(
            child: Platform.isIOS
                ? IconButton(
                    icon: (_showMaterialonIOS)
                        ? FaIcon(FontAwesomeIcons.apple)
                        : Icon(Icons.android),
                    onPressed: () {
                      setState(() {
                        _showMaterialonIOS = !_showMaterialonIOS;
                      });
                    },
                  )
                : null,
          ),
          IconButton(
            icon: Icon(Icons.save),
            onPressed: _savePressed,
          ),
        ],
        leading: IconButton(
          icon: Icon(Icons.refresh),
          onPressed: _resetPressed,
        ),
      ),
      body: Form(
        key: _formKey,
        child: (orientation == Orientation.portrait)
            ? _buildPortraitLayout()
            : _buildLandscapeLayout(),
      ),
    );
  }

  /* CARDSETTINGS FOR EACH LAYOUT */

  CardSettings _buildPortraitLayout() {
    return CardSettings.sectioned(
      showMaterialonIOS: _showMaterialonIOS,
      labelWidth: 100,
      children: <CardSettingsSection>[
        CardSettingsSection(
          showMaterialonIOS: _showMaterialonIOS,
          header: CardSettingsHeader(
            label: 'Bio',
            showMaterialonIOS: _showMaterialonIOS,
          ),
          children: <Widget>[
            _buildCardSettingsText_Name(),
            _buildCardSettingsListPicker_Type(),
            _buildCardSettingsNumberPicker(),
            _buildCardSettingsParagraph(5),
            _buildCardSettingsMultiselect(),
          ],
        ),
        CardSettingsSection(
          showMaterialonIOS: _showMaterialonIOS,
          header: CardSettingsHeader(
            label: 'Colors',
            showMaterialonIOS: _showMaterialonIOS,
          ),
          children: <Widget>[
            _buildCardSettingsColorPicker_Coat(),
            _buildCardSettingsColorPicker_Mane(),
            _buildCardSettingsSwitch_Spots(),
            _buildCardSettingsColorPicker_Spot(),
          ],
        ),
        CardSettingsSection(
          showMaterialonIOS: _showMaterialonIOS,
          header: CardSettingsHeader(
            label: 'Size',
            showMaterialonIOS: _showMaterialonIOS,
          ),
          children: <Widget>[
            _buildCardSettingsDouble_Height(),
            _buildCardSettingsInt_Weight(),
          ],
        ),
        CardSettingsSection(
          showMaterialonIOS: _showMaterialonIOS,
          header: CardSettingsHeader(
            label: 'First Show',
            showMaterialonIOS: _showMaterialonIOS,
          ),
          instructions: _buildCardSettingsInstructions(),
          children: <Widget>[
            _buildCardSettingsDatePicker(),
            _buildCardSettingsTimePicker(),
            _buildCardSettingsCurrency(),
            _buildCardSettingsPhone(),
            _buildCardSettingsDouble_Slider(),
          ],
        ),
        CardSettingsSection(
          showMaterialonIOS: _showMaterialonIOS,
          header: CardSettingsHeader(
            label: 'Security',
            showMaterialonIOS: _showMaterialonIOS,
          ),
          children: <Widget>[
            _buildCardSettingsEmail(),
            _buildCardSettingsPassword(),
          ],
        ),
        CardSettingsSection(
          showMaterialonIOS: _showMaterialonIOS,
          header: CardSettingsHeader(
            label: 'Actions',
            showMaterialonIOS: _showMaterialonIOS,
          ),
          children: <Widget>[
            _buildCardSettingsButton_Save(),
            _buildCardSettingsButton_Reset(),
          ],
        ),
      ],
    );
  }

  CardSettings _buildLandscapeLayout() {
    return CardSettings.sectioned(
      showMaterialonIOS: _showMaterialonIOS,
      labelPadding: 12.0,
      children: <CardSettingsSection>[
        CardSettingsSection(
          showMaterialonIOS: _showMaterialonIOS,
          header: CardSettingsHeader(
            label: 'Bio',
            showMaterialonIOS: _showMaterialonIOS,
          ),
          children: <Widget>[
            _buildCardSettingsText_Name(),
            CardFieldLayout(
              <Widget>[
                _buildCardSettingsListPicker_Type(),
                _buildCardSettingsNumberPicker(labelAlign: TextAlign.right),
              ],
              flexValues: [2, 1],
            ),
            _buildCardSettingsParagraph(3),
            _buildCardSettingsMultiselect(),
          ],
        ),
        CardSettingsSection(
          showMaterialonIOS: _showMaterialonIOS,
          header: CardSettingsHeader(
            label: 'Security',
            showMaterialonIOS: _showMaterialonIOS,
          ),
          children: <Widget>[
            CardFieldLayout(<Widget>[
              _buildCardSettingsEmail(),
              _buildCardSettingsPassword(),
            ]),
          ],
        ),
        CardSettingsSection(
          showMaterialonIOS: _showMaterialonIOS,
          header: CardSettingsHeader(
            label: 'Colors',
            showMaterialonIOS: _showMaterialonIOS,
          ),
          children: <Widget>[
            CardFieldLayout(<Widget>[
              _buildCardSettingsColorPicker_Coat(),
              _buildCardSettingsColorPicker_Mane(),
            ]),
            CardFieldLayout(<Widget>[
              _buildCardSettingsSwitch_Spots(),
              _buildCardSettingsColorPicker_Spot(),
            ]),
          ],
        ),
        CardSettingsSection(
          showMaterialonIOS: _showMaterialonIOS,
          header: CardSettingsHeader(
            label: 'Size',
            showMaterialonIOS: _showMaterialonIOS,
          ),
          children: <Widget>[
            CardFieldLayout(<Widget>[
              _buildCardSettingsDouble_Height(),
              _buildCardSettingsInt_Weight(),
            ]),
          ],
        ),
        CardSettingsSection(
          showMaterialonIOS: _showMaterialonIOS,
          header: CardSettingsHeader(
            label: 'First Show',
            showMaterialonIOS: _showMaterialonIOS,
          ),
          children: <Widget>[
            _buildCardSettingsInstructions(),
            CardFieldLayout(<Widget>[
              _buildCardSettingsDatePicker(),
              _buildCardSettingsTimePicker(),
            ]),
            CardFieldLayout(<Widget>[
              _buildCardSettingsCurrency(),
              _buildCardSettingsPhone(),
            ]),
            _buildCardSettingsDouble_Slider(),
          ],
        ),
        CardSettingsSection(
          showMaterialonIOS: _showMaterialonIOS,
          header: CardSettingsHeader(
            label: 'Actions',
            showMaterialonIOS: _showMaterialonIOS,
          ),
          children: <Widget>[
            CardFieldLayout(<Widget>[
              _buildCardSettingsButton_Save(),
              _buildCardSettingsButton_Reset(),
            ]),
          ],
        ),
      ],
    );
  }

  /* BUILDERS FOR EACH FIELD */

  CardSettingsButton _buildCardSettingsButton_Reset() {
    return CardSettingsButton(
      showMaterialonIOS: _showMaterialonIOS,
      label: 'RESET',
      isDestructive: true,
      onPressed: _resetPressed,
      backgroundColor: Colors.redAccent,
      textColor: Colors.white,
    );
  }

  CardSettingsButton _buildCardSettingsButton_Save() {
    return CardSettingsButton(
      showMaterialonIOS: _showMaterialonIOS,
      label: 'SAVE',
      onPressed: _savePressed,
    );
  }

  CardSettingsPassword _buildCardSettingsPassword() {
    return CardSettingsPassword(
      showMaterialonIOS: _showMaterialonIOS,
      labelWidth: 150.0,
      key: _passwordKey,
      icon: Icon(Icons.lock),
      initialValue: _ponyModel.password,
      autovalidate: _autoValidate,
      validator: (value) {
        if (value == null) return 'Password is required.';
        if (value.length <= 6) return 'Must be more than 6 characters.';
        return null;
      },
      onSaved: (value) => _ponyModel.password = value,
      onChanged: (value) {
        setState(() {
          _ponyModel.password = value;
        });
        _showSnackBar('Password', value);
      },
    );
  }

  CardSettingsEmail _buildCardSettingsEmail() {
    return CardSettingsEmail(
      showMaterialonIOS: _showMaterialonIOS,
      labelWidth: 150.0,
      key: _emailKey,
      icon: Icon(Icons.person),
      initialValue: _ponyModel.email,
      autovalidate: _autoValidate,
      validator: (value) {
        if (value == null || value.isEmpty) return 'Email is required.';
        if (!value.contains('@'))
          return "Email not formatted correctly."; // use regex in real application
        return null;
      },
      onSaved: (value) => _ponyModel.email = value,
      onChanged: (value) {
        setState(() {
          _ponyModel.email = value;
        });
        _showSnackBar('Email', value);
      },
    );
  }

  CardSettingsPhone _buildCardSettingsPhone() {
    return CardSettingsPhone(
      showMaterialonIOS: _showMaterialonIOS,
      key: _phoneKey,
      label: 'Box Office',
      initialValue: _ponyModel.boxOfficePhone,
      autovalidate: _autoValidate,
      validator: (value) {
        if (value != null && value.toString().length != 10)
          return 'Incomplete number';
        return null;
      },
      onSaved: (value) => _ponyModel.boxOfficePhone = value,
      onChanged: (value) {
        setState(() {
          _ponyModel.boxOfficePhone = value;
        });
        _showSnackBar('Box Office', value);
      },
    );
  }

  CardSettingsCurrency _buildCardSettingsCurrency() {
    return CardSettingsCurrency(
      showMaterialonIOS: _showMaterialonIOS,
      key: _priceKey,
      label: 'Ticket Price',
      initialValue: _ponyModel.ticketPrice,
      autovalidate: _autoValidate,
      validator: (value) {
        if (value != null && value > 100) return 'No scalpers allowed!';
        return null;
      },
      onSaved: (value) => _ponyModel.ticketPrice = value,
      onChanged: (value) {
        setState(() {
          _ponyModel.ticketPrice = value;
        });
        _showSnackBar('Ticket Price', value);
      },
    );
  }

  CardSettingsTimePicker _buildCardSettingsTimePicker() {
    return CardSettingsTimePicker(
      showMaterialonIOS: _showMaterialonIOS,
      key: _timeKey,
      icon: Icon(Icons.access_time),
      label: 'Time',
      initialValue: TimeOfDay(
          hour: _ponyModel.showDateTime.hour,
          minute: _ponyModel.showDateTime.minute),
      onSaved: (value) => _ponyModel.showDateTime =
          updateJustTime(value, _ponyModel.showDateTime),
      onChanged: (value) {
        setState(() {
          _ponyModel.showDateTime =
              updateJustTime(value, _ponyModel.showDateTime);
        });
        _showSnackBar('Show Time', value);
      },
    );
  }

  CardSettingsDatePicker _buildCardSettingsDatePicker() {
    return CardSettingsDatePicker(
      showMaterialonIOS: _showMaterialonIOS,
      key: _dateKey,
      justDate: true,
      icon: Icon(Icons.calendar_today),
      label: 'Date',
      initialValue: _ponyModel.showDateTime,
      onSaved: (value) => _ponyModel.showDateTime =
          updateJustDate(value, _ponyModel.showDateTime),
      onChanged: (value) {
        setState(() {
          _ponyModel.showDateTime = value;
        });
        _showSnackBar(
            'Show Date', updateJustDate(value, _ponyModel.showDateTime));
      },
    );
  }

  CardSettingsInstructions _buildCardSettingsInstructions() {
    return CardSettingsInstructions(
      showMaterialonIOS: _showMaterialonIOS,
      text: 'This is when this little horse got her big break',
    );
  }

  CardSettingsInt _buildCardSettingsInt_Weight() {
    return CardSettingsInt(
      showMaterialonIOS: _showMaterialonIOS,
      key: _weightKey,
      label: 'Weight',
      unitLabel: 'lbs',
      initialValue: _ponyModel.weight,
      autovalidate: _autoValidate,
      validator: (value) {
        if (value != null) {
          if (value > 70) return 'You won\'t fly at the weight.';
          if (value < 10) return 'Cmon, you are not a feather.';
        }
        return null;
      },
      onSaved: (value) => _ponyModel.weight = value,
      onChanged: (value) {
        setState(() {
          _ponyModel.weight = value;
        });
        _showSnackBar('Weight', value);
      },
    );
  }

  CardSettingsDouble _buildCardSettingsDouble_Height() {
    return CardSettingsDouble(
      showMaterialonIOS: _showMaterialonIOS,
      key: _heightKey,
      label: 'Height',
      unitLabel: 'feet',
      decimalDigits: 2,
      initialValue: _ponyModel.height,
      onSaved: (value) => _ponyModel.height = value,
      onChanged: (value) {
        setState(() {
          _ponyModel.height = value;
        });
        _showSnackBar('Height', value);
      },
    );
  }

  CardSettingsColorPicker _buildCardSettingsColorPicker_Spot() {
    return CardSettingsColorPicker(
      showMaterialonIOS: _showMaterialonIOS,
      key: _spotKey,
      label: 'Spot',
      pickerType: CardSettingsColorPickerType.block,
      initialValue: intelligentCast<Color>(_ponyModel.spotColor),
      visible: _ponyModel.hasSpots,
      onSaved: (value) => _ponyModel.spotColor = colorToString(value),
      onChanged: (value) {
        setState(() {
          _ponyModel.type = colorToString(value);
        });
        _showSnackBar('Spot', value);
      },
    );
  }

  CardSettingsSwitch _buildCardSettingsSwitch_Spots() {
    return CardSettingsSwitch(
      showMaterialonIOS: _showMaterialonIOS,
      key: _hasSpotsKey,
      label: 'Does this horse have spots?',
      labelWidth: 240.0,
      initialValue: _ponyModel.hasSpots,
      onSaved: (value) => _ponyModel.hasSpots = value,
      onChanged: (value) {
        setState(() {
          _ponyModel.hasSpots = value;
        });
        _showSnackBar('Has Spots?', value);
      },
    );
  }

  CardSettingsColorPicker _buildCardSettingsColorPicker_Mane() {
    return CardSettingsColorPicker(
      showMaterialonIOS: _showMaterialonIOS,
      key: _maneKey,
      label: 'Mane',
      initialValue: intelligentCast<Color>(_ponyModel.maneColor),
      autovalidate: _autoValidate,
      pickerType: CardSettingsColorPickerType.material,
      validator: (value) {
        if (value.computeLuminance() > .7) return 'This color is too light.';
        return null;
      },
      onSaved: (value) => _ponyModel.maneColor = colorToString(value),
      onChanged: (value) {
        setState(() {
          _ponyModel.maneColor = colorToString(value);
        });
        _showSnackBar('Mane', value);
      },
    );
  }

  CardSettingsColorPicker _buildCardSettingsColorPicker_Coat() {
    return CardSettingsColorPicker(
      showMaterialonIOS: _showMaterialonIOS,
      key: _coatKey,
      label: 'Coat',
      initialValue: intelligentCast<Color>(_ponyModel.coatColor),
      autovalidate: _autoValidate,
      validator: (value) {
        if (value.computeLuminance() < .3)
          return 'This color is not cheery enough.';
        return null;
      },
      onSaved: (value) => _ponyModel.coatColor = colorToString(value),
      onChanged: (value) {
        setState(() {
          _ponyModel.coatColor = colorToString(value);
        });
        _showSnackBar('Coat', value);
      },
    );
  }

  CardSettingsMultiselect _buildCardSettingsMultiselect() {
    return CardSettingsMultiselect(
      showMaterialonIOS: _showMaterialonIOS,
      key: _hobbiesKey,
      label: 'Hobbies',
      initialValues: _ponyModel.hobbies,
      options: allHobbies,
      autovalidate: _autoValidate,
      validator: (List<String> value) {
        if (value == null || value.isEmpty)
          return 'You must pick at least one hobby.';

        return null;
      },
      onSaved: (value) => _ponyModel.hobbies = value,
      onChanged: (value) {
        setState(() {
          _ponyModel.hobbies = value;
        });
        _showSnackBar('Hobbies', value);
      },
    );
  }

  CardSettingsParagraph _buildCardSettingsParagraph(int lines) {
    return CardSettingsParagraph(
      showMaterialonIOS: _showMaterialonIOS,
      key: _descriptionlKey,
      label: 'Description',
      initialValue: _ponyModel.description,
      numberOfLines: lines,
      onSaved: (value) => _ponyModel.description = value,
      onChanged: (value) {
        setState(() {
          _ponyModel.description = value;
        });
        _showSnackBar('Description', value);
      },
    );
  }

  CardSettingsNumberPicker _buildCardSettingsNumberPicker(
      {TextAlign labelAlign}) {
    return CardSettingsNumberPicker(
      showMaterialonIOS: _showMaterialonIOS,
      key: _ageKey,
      label: 'Age',
      labelAlign: labelAlign,
      initialValue: _ponyModel.age,
      min: 1,
      max: 30,
      validator: (value) {
        if (value == null) return 'Age is required.';
        if (value > 20) return 'No grown-ups allwed!';
        if (value < 3) return 'No Toddlers allowed!';
        return null;
      },
      onSaved: (value) => _ponyModel.age = value,
      onChanged: (value) {
        setState(() {
          _ponyModel.age = value;
        });
        _showSnackBar('Age', value);
      },
    );
  }

  CardSettingsListPicker _buildCardSettingsListPicker_Type() {
    return CardSettingsListPicker(
      showMaterialonIOS: _showMaterialonIOS,
      key: _typeKey,
      label: 'Type',
      initialValue: _ponyModel.type,
      hintText: 'Select One',
      autovalidate: _autoValidate,
      options: <String>['Earth', 'Unicorn', 'Pegasi', 'Alicorn'],
      values: <String>['E', 'U', 'P', 'A'],
      validator: (String value) {
        if (value == null || value.isEmpty) return 'You must pick a type.';
        return null;
      },
      onSaved: (value) => _ponyModel.type = value,
      onChanged: (value) {
        setState(() {
          _ponyModel.type = value;
        });
        _showSnackBar('Type', value);
      },
    );
  }

  CardSettingsText _buildCardSettingsText_Name() {
    return CardSettingsText(
      showMaterialonIOS: _showMaterialonIOS,
      key: _nameKey,
      label: 'Name',
      hintText: 'something cute...',
      initialValue: _ponyModel.name,
      requiredIndicator: Text('*', style: TextStyle(color: Colors.red)),
      autovalidate: _autoValidate,
      validator: (value) {
        if (value == null || value.isEmpty) return 'Name is required.';
        return null;
      },
      onSaved: (value) => _ponyModel.name = value,
      onChanged: (value) {
        setState(() {
          _ponyModel.name = value;
        });
        _showSnackBar('Name', value);
      },
    );
  }

  CardSettingsSlider _buildCardSettingsDouble_Slider() {
    return CardSettingsSlider(
      showMaterialonIOS: _showMaterialonIOS,
      key: _sliderKey,
      label: 'Rating',
      initialValue: _ponyModel.rating,
      autovalidate: _autoValidate,
      validator: (double value) {
        if (value == null) return 'You must pick a rating.';
        return null;
      },
      onSaved: (value) => _ponyModel.rating = value,
      onChanged: (value) {
        setState(() {
          _ponyModel.rating = value;
        });
        _showSnackBar('Rating', value);
      },
    );
  }

  /* EVENT HANDLERS */

  Future _savePressed() async {
    final form = _formKey.currentState;

    if (form.validate()) {
      form.save();
      showResults(context, _ponyModel);
    } else {
      showErrors(context);
      setState(() => _autoValidate = true);
    }
  }

  void _resetPressed() {
    _formKey.currentState.reset();
  }

  void _showSnackBar(String label, dynamic value) {
    _scaffoldKey.currentState.removeCurrentSnackBar();
    _scaffoldKey.currentState.showSnackBar(
      SnackBar(
        duration: Duration(seconds: 1),
        content: Text(label + ' = ' + value.toString()),
      ),
    );
  }
}