[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-9509":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":16,"stars30d":17,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":18,"rankGlobal":10,"rankLanguage":10,"license":19,"archived":20,"fork":20,"defaultBranch":21,"hasWiki":22,"hasPages":20,"topics":23,"createdAt":10,"pushedAt":10,"updatedAt":35,"readmeContent":36,"aiSummary":37,"trendingCount":16,"starSnapshotCount":16,"syncStatus":15,"lastSyncTime":38,"discoverSource":39},9509,"flutter-settings-ui","yako-dev\u002Fflutter-settings-ui","yako-dev","Create native settings for Flutter app in a minutes.","https:\u002F\u002Fpub.dev\u002Fpackages\u002Fsettings_ui",null,"Dart",955,237,12,2,0,5,11.13,"Apache License 2.0",false,"master",true,[24,25,26,27,28,29,30,31,32,33,34],"adaptive","android","dart","flutter","flutter-package","ios","mobile","settings","ui","ui-components","widget","2026-06-12 02:02:08","# Settings UI for Flutter\n\n[![Pub Version](https:\u002F\u002Fimg.shields.io\u002Fpub\u002Fv\u002Fsettings_ui?color=blueviolet)](https:\u002F\u002Fpub.dev\u002Fpackages\u002Fsettings_ui)\n[![License](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Flicense-Apache%202.0-blue.svg)](LICENSE)\n[![Platform](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fplatform-android%20%7C%20ios%20%7C%20web-lightgrey)](https:\u002F\u002Fpub.dev\u002Fpackages\u002Fsettings_ui)\n\nA Flutter package for building settings screens that look native on **Android**, **iOS**, and **Web** — all from a single API. The UI automatically adapts to each platform's visual style: Material for Android, Cupertino for iOS, and a card-based Web layout. Also runs on macOS, Windows, Linux, and Fuchsia (macOS\u002FWindows use the Cupertino style; Linux uses Material).\n\n\u003Cp align=\"center\">\n  \u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Fyako-dev\u002Fflutter-settings-ui\u002Fmaster\u002Fassets\u002Fv2\u002Fsettings_ui_cover.png\" height=\"560px\">\n\u003C\u002Fp>\n\n---\n\n## Contents\n\n- [Installing](#installing)\n- [Quick start](#quick-start)\n- [Tile types](#tile-types)\n- [Platform styles](#platform-styles)\n- [Theming](#theming)\n- [Advanced usage](#advanced-usage)\n- [API reference](#api-reference)\n\n---\n\n## Installing\n\nAdd to your `pubspec.yaml`:\n\n```yaml\ndependencies:\n  settings_ui: ^3.0.1\n```\n\nThen import:\n\n```dart\nimport 'package:settings_ui\u002Fsettings_ui.dart';\n```\n\n---\n\n## Quick start\n\n```dart\nclass SettingsScreen extends StatefulWidget {\n  const SettingsScreen({super.key});\n\n  @override\n  State\u003CSettingsScreen> createState() => _SettingsScreenState();\n}\n\nclass _SettingsScreenState extends State\u003CSettingsScreen> {\n  bool _notificationsEnabled = true;\n  bool _darkMode = false;\n\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      appBar: AppBar(title: const Text('Settings')),\n      body: SettingsList(\n        sections: [\n          SettingsSection(\n            title: const Text('General'),\n            tiles: [\n              SettingsTile.navigation(\n                leading: const Icon(Icons.language),\n                title: const Text('Language'),\n                value: const Text('English'),\n                onPressed: (context) { \u002F* navigate *\u002F },\n              ),\n            ],\n          ),\n          SettingsSection(\n            title: const Text('Appearance'),\n            tiles: [\n              SettingsTile.switchTile(\n                leading: const Icon(Icons.dark_mode),\n                title: const Text('Dark mode'),\n                initialValue: _darkMode,\n                onToggle: (value) => setState(() => _darkMode = value),\n              ),\n              SettingsTile.switchTile(\n                leading: const Icon(Icons.notifications),\n                title: const Text('Notifications'),\n                description: const Text('Alerts, sounds, badges'),\n                initialValue: _notificationsEnabled,\n                onToggle: (value) =>\n                    setState(() => _notificationsEnabled = value),\n              ),\n            ],\n          ),\n        ],\n      ),\n    );\n  }\n}\n```\n\n---\n\n## Tile types\n\n### `SettingsTile` — basic tile\n\nA tappable tile with optional leading icon, description, and trailing widget.\n\n```dart\nSettingsTile(\n  leading: const Icon(Icons.storage),\n  title: const Text('Storage'),\n  description: const Text('30% used — 5.60 GB free'),\n  onPressed: (context) { \u002F* ... *\u002F },\n)\n```\n\n### `SettingsTile.navigation` — navigation tile\n\nAdds a platform-appropriate trailing chevron. Right arrow in LTR, left arrow in RTL.\n\n```dart\nSettingsTile.navigation(\n  leading: const Icon(Icons.language),\n  title: const Text('Language'),\n  value: const Text('English'),\n  titleDescription: const Text('Choose your preferred language'),\n  onPressed: (context) {\n    Navigator.of(context).push(\u002F* language screen *\u002F);\n  },\n)\n```\n\n### `SettingsTile.switchTile` — switch tile\n\nRenders a `Switch` on Material platforms and a `CupertinoSwitch` on iOS\u002FmacOS.\n\n```dart\nSettingsTile.switchTile(\n  leading: const Icon(Icons.fingerprint),\n  title: const Text('Use biometrics'),\n  description: const Text('Unlock with fingerprint or Face ID'),\n  initialValue: _biometricsEnabled,\n  onToggle: (value) => setState(() => _biometricsEnabled = value),\n)\n```\n\n### `CustomSettingsTile` — any widget as a tile\n\n```dart\nCustomSettingsTile(\n  child: Padding(\n    padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),\n    child: LinearProgressIndicator(value: 0.3),\n  ),\n)\n```\n\n### `CustomSettingsSection` — any widget as a section\n\n```dart\nCustomSettingsSection(\n  child: Padding(\n    padding: const EdgeInsets.all(16),\n    child: Text(\n      'Signed in as Danny Yako',\n      style: Theme.of(context).textTheme.bodySmall,\n    ),\n  ),\n)\n```\n\n---\n\n## Platform styles\n\n`SettingsList` detects the platform automatically. You can override it:\n\n```dart\nSettingsList(\n  platform: DevicePlatform.iOS,  \u002F\u002F force Cupertino style\n  sections: [ \u002F* ... *\u002F ],\n)\n```\n\n\u003Cp align=\"center\">\n  \u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Fyako-dev\u002Fflutter-settings-ui\u002Fmaster\u002Fassets\u002Fv3\u002Fandroid_settings.png\" width=\"30%\">\n   \n  \u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Fyako-dev\u002Fflutter-settings-ui\u002Fmaster\u002Fassets\u002Fv3\u002Fios_cupertino.png\" width=\"30%\">\n   \n  \u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Fyako-dev\u002Fflutter-settings-ui\u002Fmaster\u002Fassets\u002Fv3\u002Fweb_chrome.png\" width=\"30%\">\n\u003C\u002Fp>\n\u003Cp align=\"center\">\u003Cem>Android (Material)  •  iOS (Cupertino)  •  Web\u003C\u002Fem>\u003C\u002Fp>\n\n| `DevicePlatform` | Style |\n|---|---|\n| `device` *(default)* | Auto-detected at runtime |\n| `android`, `fuchsia`, `linux` | Material |\n| `iOS`, `macOS`, `windows` | Cupertino |\n| `web` | Web (card layout) |\n\n---\n\n## Theming\n\n### Material 3 (v3.0.0+)\n\nOn Android and Web, colors are automatically derived from your app's `ColorScheme`. No extra configuration needed — seed colors, light\u002Fdark mode, and custom `ColorScheme` all work out of the box.\n\n\u003Cp align=\"center\">\n  \u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Fyako-dev\u002Fflutter-settings-ui\u002Fmaster\u002Fassets\u002Fv3\u002Fandroid_material3.png\" width=\"45%\">\n\u003C\u002Fp>\n\n```dart\nMaterialApp(\n  theme: ThemeData(\n    colorSchemeSeed: Colors.indigo,\n    useMaterial3: true,\n  ),\n  home: const SettingsScreen(),\n)\n```\n\n### Custom theme overrides\n\nAny field left `null` falls back to the platform default derived from your `ColorScheme`.\n\n```dart\nSettingsList(\n  lightTheme: const SettingsThemeData(\n    settingsListBackground: Color(0xFFF2F2F7),\n    settingsSectionBackground: Colors.white,\n    titleTextColor: Colors.indigo,\n  ),\n  darkTheme: const SettingsThemeData(\n    settingsListBackground: Color(0xFF1C1C1E),\n    settingsSectionBackground: Color(0xFF2C2C2E),\n    titleTextColor: Colors.indigoAccent,\n  ),\n  sections: [ \u002F* ... *\u002F ],\n)\n```\n\n### Custom text styles\n\n```dart\nSettingsList(\n  lightTheme: SettingsThemeData(\n    tileTextStyle: const TextStyle(fontFamily: 'Roboto', fontSize: 16),\n    tileDescriptionTextStyle: const TextStyle(fontSize: 12),\n    titleTextStyle: const TextStyle(\n      fontWeight: FontWeight.bold,\n      fontSize: 13,\n      letterSpacing: 0.5,\n    ),\n  ),\n  sections: [ \u002F* ... *\u002F ],\n)\n```\n\n### Disabled tiles\n\n```dart\nSettingsTile.switchTile(\n  title: const Text('Feature'),\n  initialValue: false,\n  onToggle: null,   \u002F\u002F null disables interaction\n  enabled: false,\n)\n\n\u002F\u002F Control the disabled switch color:\nSettingsList(\n  lightTheme: const SettingsThemeData(\n    inactiveSwitchColor: Colors.grey,\n  ),\n  sections: [ \u002F* ... *\u002F ],\n)\n```\n\n---\n\n## Advanced usage\n\n### Scroll controller\n\n```dart\nfinal _controller = ScrollController();\n\nSettingsList(\n  scrollController: _controller,\n  sections: [\n    SettingsSection(\n      tiles: [\n        SettingsTile(\n          title: const Text('Jump to bottom'),\n          onPressed: (_) => _controller.animateTo(\n            _controller.position.maxScrollExtent,\n            duration: const Duration(milliseconds: 300),\n            curve: Curves.easeOut,\n          ),\n        ),\n      ],\n    ),\n  ],\n)\n```\n\n### Compact tiles\n\n```dart\nSettingsTile(\n  title: const Text('Option'),\n  compact: true,  \u002F\u002F halves the vertical padding\n)\n```\n\n### Embedding inside another scroll view\n\n```dart\nSettingsList(\n  shrinkWrap: true,\n  physics: const NeverScrollableScrollPhysics(),\n  sections: [ \u002F* ... *\u002F ],\n)\n```\n\n### Wide screen alignment\n\nOn screens wider than 810 dp, the list auto-centers. To left-align:\n\n```dart\nSettingsList(\n  crossAxisAlignment: CrossAxisAlignment.start,\n  sections: [ \u002F* ... *\u002F ],\n)\n```\n\n### CupertinoApp support\n\n```dart\n\u002F\u002F Pure CupertinoApp:\nSettingsList(\n  applicationType: ApplicationType.cupertino,\n  sections: [ \u002F* ... *\u002F ],\n)\n\n\u002F\u002F MaterialApp on Android, CupertinoApp on iOS:\nSettingsList(\n  applicationType: ApplicationType.both,\n  sections: [ \u002F* ... *\u002F ],\n)\n```\n\n---\n\n## API reference\n\n### `SettingsList`\n\n| Parameter | Type | Default | Description |\n|---|---|---|---|\n| `sections` | `List\u003CAbstractSettingsSection>` | required | Sections to display |\n| `platform` | `DevicePlatform?` | `device` | Force a specific platform style |\n| `lightTheme` | `SettingsThemeData?` | — | Overrides for light mode |\n| `darkTheme` | `SettingsThemeData?` | — | Overrides for dark mode |\n| `brightness` | `Brightness?` | — | Override brightness detection |\n| `applicationType` | `ApplicationType` | `material` | `material`, `cupertino`, or `both` |\n| `scrollController` | `ScrollController?` | — | Programmatic scroll control |\n| `shrinkWrap` | `bool` | `false` | Shrink-wrap to content height |\n| `physics` | `ScrollPhysics?` | — | Custom scroll physics |\n| `contentPadding` | `EdgeInsetsGeometry?` | — | Override list padding |\n| `crossAxisAlignment` | `CrossAxisAlignment` | `center` | Horizontal alignment on wide screens |\n\n### `SettingsSection`\n\n| Parameter | Type | Description |\n|---|---|---|\n| `tiles` | `List\u003CAbstractSettingsTile>` | The tiles in this section |\n| `title` | `Widget?` | Section header |\n| `margin` | `EdgeInsetsDirectional?` | Override section margin |\n\n### `SettingsTile`\n\n| Parameter | Type | Applies to | Description |\n|---|---|---|---|\n| `title` | `Widget` | all | Tile label |\n| `description` | `Widget?` | all | Secondary text below the title |\n| `leading` | `Widget?` | all | Icon or widget at the start |\n| `trailing` | `Widget?` | all | Widget at the end |\n| `enabled` | `bool` | all | Grays out and disables interaction |\n| `compact` | `bool` | all | Halves the vertical padding |\n| `onPressed` | `Function(BuildContext)?` | all | Tap callback |\n| `value` | `Widget?` | simple, navigation | Widget shown before the chevron |\n| `titleDescription` | `Widget?` | navigation | Text below title (iOS\u002FmacOS\u002FWindows) |\n| `initialValue` | `bool?` | switchTile | Initial switch state |\n| `onToggle` | `Function(bool)?` | switchTile | Toggle callback; `null` disables the switch |\n| `activeSwitchColor` | `Color?` | switchTile | Active switch color override |\n\n### `SettingsThemeData`\n\n| Field | Type | Description |\n|---|---|---|\n| `settingsListBackground` | `Color?` | Background of the whole list |\n| `settingsSectionBackground` | `Color?` | Background of each section card |\n| `dividerColor` | `Color?` | Divider color between tiles |\n| `tileHighlightColor` | `Color?` | Tile press highlight color |\n| `titleTextColor` | `Color?` | Section header text color |\n| `titleTextStyle` | `TextStyle?` | Section header text style |\n| `settingsTileTextColor` | `Color?` | Tile title text color |\n| `tileTextStyle` | `TextStyle?` | Tile title text style |\n| `tileDescriptionTextColor` | `Color?` | Description\u002Fvalue text color |\n| `tileDescriptionTextStyle` | `TextStyle?` | Description\u002Fvalue text style |\n| `leadingIconsColor` | `Color?` | Leading icon color |\n| `trailingTextColor` | `Color?` | Trailing text color |\n| `inactiveTitleColor` | `Color?` | Tile title color when disabled |\n| `inactiveSubtitleColor` | `Color?` | Description color when disabled |\n| `inactiveSwitchColor` | `Color?` | Switch color when disabled |\n\n---\n\n## License\n\nApache License 2.0 — see the [LICENSE](LICENSE) file for details.\n","该项目提供了一个用于快速构建Flutter应用设置界面的包，支持Android、iOS和Web平台。核心功能包括自适应不同平台的设计风格（如Material Design for Android, Cupertino for iOS）以及一系列预定义的UI组件，如开关、导航等，使得开发者能够轻松创建出符合各平台视觉规范的设置页面。特别适合需要跨平台一致性体验的应用开发场景，无论是移动设备还是桌面环境都能良好适配。通过简单的API调用即可实现复杂且美观的设置界面布局。","2026-06-11 03:23:11","top_language"]