Flutter Clean Settings UI

All apps need a setting panel for its configuration. Generating one requires the same boiler plate code to be written for each app. Although the configuration itself is myriad depending on the application purpose the set of widgets remain the same.

Flutter out-of-the-box does not provide a generic way of constructing configuration panels. Clean settings project delivers a simple yet rich way of building the configuration panel.

Structure


  Container                               
+----------------------------------------+
|   Section                              |
| +-----------------------------------+  |
| |   Item                            |  |
| |  +-----------------------------+  |  |
| |  |                             |  |  |
| |  +-----------------------------+  |  |
| |   Item                            |  |
| |  +-----------------------------+  |  |
| |  |                             |  |  |
| |  +-----------------------------+  |  |
| +-----------------------------------+  |
|   Section                              |
| +-----------------------------------+  |
| | ...                               |  |
| +-----------------------------------+  |
+----------------------------------------+

Getting started

To get started, install the clean_settings dependency in your pubspec.yaml. (Check pub.dev for latest version)

dependencies:
  clean_settings: ^0.1.4

Clean settings can be embedded in any Widget however we will see a standalone route for it. A basic Scaffold would look like the following:

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
   return Scaffold(
         body: Container(
                // We will add code here
               )
   );
  }
}

As shown in the structure above, settings need to start with a primary container which controls the alignment and placement followed by any number of sections and within them items.

SettingContainer(
  sections: [
    SettingSection(
      title: 'Object Management',
      items: [
        SettingCheckboxItem(
          title: 'Allow deletion',
          description: 'Enables deletion of objects',
          priority: ItemPriority.high,
          value: disableDemoItems,
          onChanged: (v) => setState(() => allowDeletion = v),
        ),
      ],
    ),
  ],
),

Supported widgets

Clean settings supports a rich set of widgets with zero dependency.

Checkbox

https://raw.githubusercontent.com/grouped/clean_settings/master/demo/checkbox-item.gif


SettingCheckboxItem(
    title: 'Smart Reply',
    value: smartReply,
    onChanged: (v) => setState(() => smartReply = v),
    description: 'Show suggested replies when available'),
Radio Picker

https://raw.githubusercontent.com/grouped/clean_settings/master/demo/radio-item.gif


SettingRadioItem<String>(
  title: 'Theme',
  displayValue: '$theme theme',
  selectedValue: theme,
  items: [
    SettingRadioValue('Light', 'Light'),
    SettingRadioValue('Dark', 'Dark'),
    SettingRadioValue('System Default', 'System Default'),
  ],
  onChanged: (v) => setState(() => theme = v),
),

Text Input

https://raw.githubusercontent.com/grouped/clean_settings/master/demo/text-item.gif

SettingTextItem(
  title: 'Auto Reply Message',
  displayValue: autoReplyMessage,
  initialValue: autoReplyMessage,
  hintText: 'Sent by system on away',
  onChanged: (v) => setState(() => autoReplyMessage = v),
),

Date and Time Picker

https://raw.githubusercontent.com/grouped/clean_settings/master/demo/datetime-item.gif

SettingDateTimeItem<DateTime>(
  title: 'Next Scheduled Email At',
  displayValue: scheduledEmailSlug,
  onChanged: (v) => setState(() => scheduledEmailDateTime = v),
),
Date Picker

https://raw.githubusercontent.com/grouped/clean_settings/master/demo/date-item.gif

SettingDateTimeItem<DateTime>(
  title: 'Date of birth',
  displayValue: dateOfBirthSlug,
  onChanged: (v) => setState(() => dateOfBirth = v),
  timePicker: false,
),
Time Picker

https://raw.githubusercontent.com/grouped/clean_settings/master/demo/time-item.gif

SettingDateTimeItem<TimeOfDay>(
  title: 'Daily wake up email',
  displayValue: dailyEmailAt.format(context),
  onChanged: (v) => setState(() => dailyEmailAt = v),
  datePicker: false,
),
Wheel - Number List

https://raw.githubusercontent.com/grouped/clean_settings/master/demo/wheel-number-item.gif

SettingWheelPickerItem(
  title: 'Days of mail to sync',
  displayValue: daysOfMailToSync.toString(),
  initialValueIndex: daysOfMailToSync,
  items: List.generate(10, (index) => index.toString()),
  onChanged: (v) => setState(() => daysOfMailToSync = v),
),
Wheel - Text

https://raw.githubusercontent.com/grouped/clean_settings/master/demo/wheel-text-item.gif

var replyOptions = ['Reply', 'Reply All', 'Last Chosen', 'None'];
SettingWheelPickerItem(
  title: 'Default reply action',
  displayValue: replyOptions[chosenReplyOptionIndex],
  initialValueIndex: chosenReplyOptionIndex,
  items: replyOptions,
  onChanged: (v) => setState(() => chosenReplyOptionIndex = v),
),

Confirm Dialog

https://raw.githubusercontent.com/grouped/clean_settings/master/demo/confirm-item.gif

SettingConfirmItem(
  title: 'Delete account',
  displayValue: 'Permanently deletes your account',
  alertTitle: 'Delete your account',
  alertMessage: 'Are you sure?',
  priority: ItemPriority.high,
  onConfirm: () => {},
  onCancel: () => {},
),

Custom Handler

https://raw.githubusercontent.com/grouped/clean_settings/master/demo/custom-handler-item.gif

SettingItem(
  title: 'Simple Counter',
  displayValue: counter.toString(),
  onTap: () => setState(() => counter++),
),

To get the latest version and other info, head over to https://pub.dev/packages/clean_settings and don’t forget to like the project. Please post any issues/feedback on Github.

Join my newsletter
I'll send you my latest blog posts by email. Also, you'll be the first to hear about new things I'm working on.