grouped/clean_settings

pub package

clean_settings

Settings UI generator with sane defaults.

Creating a settings screen requires the same boiler plate code over and over. Settings also need a rich set of widgets to cover all possible cases. This library aims to provide sane defaults while creating a setting screen.

Features

• Setting Sections
• Out-of-the-box widgets for multiple types
• Read-only items

Widgets supported

• Checkbox

Checkbox Widget

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

• Switch

Switch Widget

SettingSwitchItem(
  title: 'Smart Compose',
  value: smartCompose,
  onChanged: (v) => setState(() => smartCompose = v),
  description: 'Show predictive writing suggestions',
  priority: ItemPriority.high,
),

• Radio Picker

Radio Picker

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

Text Input

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

• Date and Time Picker

Date Time Picker

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

• Date Picker

Date Picker

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

• Time Picker

Time Picker

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

• Wheel - Number List

Wheel Number

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

Wheel Text

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

Confirm Dialog

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

• Custom Handler

Custom Handler

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

Structure

Root - SettingContainer
         \
          \_ SettingSection
                 \
                  \_ SettingItem (or Variants) 

Common Options

• priority

Set the priority of the item to one of:

• ItemPriority.high - Shows red color
• ItemPriority.normal - Default color
• ItemPriority.low - Shows in green color
• ItemPriority.disabled - Disables the item

Example

Creates a simple Checkbox setting item

SettingContainer(
  sections: [
    SettingSection(
      title: 'Appearance',
      items: [
        SettingCheckboxItem(
            title: 'Smart Reply',
            value: smartReply,
            onChanged: (v) => setState(() => smartReply = v),
            description: 'Show suggested replies when available'),
      ],
    ),
  ],
)

Notes

• Early version
• API bound to change as more widgets get added
• Please report bugs/issues/features

Buy Me A Coffee

Buy Me A Coffee