Settings UI for Flutter

Pub Version


Build the beautiful settings screen UI in one moment with Settings UI for Flutter


  1. Add the dependency in your pubspec.yaml file.
 settings_ui: <latest version>
  1. Import the settings_ui package.
import 'package:settings_ui/settings_ui.dart';

Basic Usage:

      sections: [
          title: Text('Common'),
          tiles: <SettingsTile>[
              leading: Icon(Icons.language),
              title: Text('Language'),
              value: Text('English'),
              onToggle: (value) {},
              initialValue: true,
              leading: Icon(Icons.format_paint),
              title: Text('Enable custom theme'),

Settings List

Settings list it's a wrapper for your settings UI.


List<AbstractSettingsSection> sectionsThe list of your settings sections+
bool shrinkWrapEnable/disable the shrink wrap for the list-
ScrollPhysics physicsSetup your custom scroll physics-
DevicePlatform platformChose the platform view you prefer-
SettingsThemeData lightThemeSetup your light theme-
SettingsThemeData darkThemeSetup your dark theme-
Brightness brightnessOverwrite the brightness you want-
EdgeInsetsGeometry contentPaddingSet custom paddings-
ApplicationType applicationTypeSetup the application type you use: the material for MaterialApp, the cupertino for CupertinoApp, and the both, if you running the MaterialApp and the CupertinoApp depending on the device's OC-

Settings Section

The Setting section is the block of your settings tiles located in your SettingsList.


AbstractSettingsSectionAn abstract entity. Just an OOP's thing (so you can expand it yourself)
CustomSettingsSectionYou asked a lot. We implemented this for you. Now you can put anything you want as a child inside this custom section. Just paste the image of your cat or the weather widget inside the SettingsList. Feel free and enjoy
SettingsSectionThe default section widget, contains Widget title, EdgeInsetsDirectional margin and the required list of AbstractSettingsTile we called tiles

Settings Tile

Here it is. The section tile. It displays the elements you want to show.

AbstractSettingsTileOne more OOP's thing (so you can expand it yourself)
CustomSettingsTileThe main idea is the same as for the CustomSettingsSection. You can put anything as a child inside your SettingsSection.
SettingsTileI think that we need to discuss this deeper. See below for the details.

Settings tile

The implementation of AbstractSettingsTile. It has a lot of fabric methods and parameters. Let's take a look.

Constructor / Fabric methodDescription
SettingsTileDisplays the default setting tile. Nothing special.
SettingsTile.navigationCreated to indicate this tile as a navigation tile. It adds a right-located arrow for the iOS design as an example.
SettingsTile.switchTileCreates a switch tile. Do you want some switch? Just use this one.

Now let's deal with all these parameters.

Widget leadingAdds some leading for your tile. Just like with the ListTile.
Widget trailingAdds some trailing for your tile. Just like with the ListTile.
Widget titleThe title of your tile.
Widget descriptionAdditional info about this tile. Displays different ways according to the platform
Function(BuildContext context) onPressedMore interactivity for your tiles. Just tap it.
Color activeSwitchColorSet the switch color for your SettingsTile.switchTile
Widget valueJust like the description but more declarative. You can compare and choose which exactly you want to use.
Function(bool value) onToggleOverride the on switch event in your SettingsTile.switchTile
bool initialValueChoose the initial value for your SettingsTile.switchTile
bool enabledMark your tile as disabled. It's pretty easy!


This project is licensed under the Apache License 2.0 - see the LICENSE file for details