settings_tiles

Pub Version

A collection of settings tiles to easily create a settings screen.

Installing

See the installing instructions.

Usage

Section

Create a setting section that displays a list of setting tiles, optionally separated by a divider, with a title at the top:

SettingSection(
  title: 'A setting section',
  tiles: [
    // A list of tiles
  ],
)

To remove the dividers between the setting tiles, set the divider parameter to null.

Tiles

Text

A simple tile that only displays text and has no interactions:

const SettingTextTile(
  icon: Icons.abc,
  title: 'Text',
  description: 'This is a text tile',
)

Action

A tile that calls an action when tapped:

SettingActionTile(
  icon: Icons.touch_app,
  title: 'Action',
  description: 'This is an action tile',
  onTap: () {
    print('The action tile was tapped');
  },
),

Switch

A tile that displays a switch:

SettingSwitchTile(
  icon: Icons.toggle_on,
  title: 'Switch',
  description: 'This is a switch tile',
  toggled: true,
  onChanged: (value) {
    // Handle state change
  },
)

Checkbox

A tile that displays a checkbox:

SettingCheckboxTile(
  icon: Icons.check_box,
  title: 'Checkbox',
  description: 'This is a checkbox tile',
  checked: true,
  onChanged: (value) {
    if (value == null) {
      return;
    }

    // Handle state change
  },
)

Single option

A tile that shows a dialog with a single option to choose:

SettingSingleOptionTile(
  icon: Icons.radio_button_on,
  title: 'Single option',
  description: 'This is a single option tile',
  dialogTitle: 'Options',
  options: const ['Option 1', 'Option 2', 'Option 3'],
  initialOption: 'Option 1',
  onSubmitted: (value) {
    // Handle state change
  },
)

Multiple options

A tile that shows a dialog with multiple options to choose from:

SettingMultipleOptionsTile(
  icon: Icons.checklist,
  title: 'Multiple options',
  description: 'This is a multiple options tile',
  dialogTitle: 'Options',
  options: const ['Option 1', 'Option 2', 'Option 3'],
  initialOptions: const ['Option 1', 'Option 3'],
  onSubmitted: (value) {
    // Handle state change
  },
)

Text field

A tile that shows a dialog with a text field:

SettingTextFieldTile(
  icon: Icons.text_fields,
  title: 'Text field',
  description: 'This is a text field tile',
  dialogTitle: 'Text',
  initialText: 'Some text',
  onSubmitted: (value) {
    // Handle state change
  },
)

Slider

A tile that shows a dialog with a slider:

SettingSliderTile(
  icon: Icons.linear_scale,
  title: 'Slider',
  description: 'This is a slider tile',
  dialogTitle: 'Slider',
  min: 1.0,
  max: 10.0,
  divisions: 9,
  initialValue: 5.0,
  onSubmitted: (value) {
    // Handle state change
  },
)

Color picker

A tile that shows a dialog with some color pickers and a preview of the picked color:

SettingColorTile(
  icon: Icons.color_lens,
  title: 'Color',
  description: 'This is a color tile',
  dialogTitle: 'Color',
  initialColor: Colors.blue,
  onSubmitted: (value) {
    // Handle state change
  },
)

To change the available color pickers, set the colorPickers parameter. To enable all the color pickers, set it to ColorPickerType.values.

About

A tile that shows information about the application and opens Flutter's AboutDialog when tapped:

const SettingAboutTile(
  applicationIcon: Image.asset('assets/icon/icon.png'),
  title: 'Application name',
  description: 'v1.0.0',
)

The name of the application needs to passed to the title parameter, and the version to the description parameter.

Example

See the example app.

Libraries

settings_tiles