docs: update README with real screenshots and fix platform claims

- Replace placeholder images with actual screenshots from example app
- Add Material 3 demo screenshot showing ColorScheme seed colors
- Fix platform description: macOS/Windows use Cupertino, Linux uses Material
- Restore original cover image showing Android, iOS, and Web/browser
- Add comprehensive quick start, tile types, theming, and API reference sections

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: yadaniyil

README.md

@@ -2,14 +2,12 @@
 
 [![Pub Version](https://img.shields.io/pub/v/settings_ui?color=blueviolet)](https://pub.dev/packages/settings_ui)
 [![License](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](LICENSE)
-[![Platform](https://img.shields.io/badge/platform-android%20%7C%20ios%20%7C%20web%20%7C%20macos%20%7C%20windows%20%7C%20linux-lightgrey)](https://pub.dev/packages/settings_ui)
+[![Platform](https://img.shields.io/badge/platform-android%20%7C%20ios%20%7C%20web-lightgrey)](https://pub.dev/packages/settings_ui)
 
-A Flutter package for building native-looking settings screens across **Android, iOS, Web, macOS, Windows, and Linux** from a single API. The UI automatically adapts to each platform's visual style — Material for Android/Web/Linux, Cupertino for iOS/macOS/Windows.
+A 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/Windows use the Cupertino style; Linux uses Material).
 
 <p align="center">
-  <img src="https://raw.githubusercontent.com/yako-dev/flutter-settings-ui/master/assets/v2/android/mockup_01.png" height="540px">
-  &nbsp;&nbsp;&nbsp;&nbsp;
-  <img src="https://raw.githubusercontent.com/yako-dev/flutter-settings-ui/master/assets/v2/iOS/mockup_01.png" height="540px">
+  <img src="https://raw.githubusercontent.com/yako-dev/flutter-settings-ui/master/assets/v2/settings_ui_cover.png" height="400px">
 </p>
 
 ---
@@ -19,7 +17,7 @@ A Flutter package for building native-looking settings screens across **Android,
 - [Installing](#installing)
 - [Quick start](#quick-start)
 - [Tile types](#tile-types)
-- [Platform rendering](#platform-rendering)
+- [Platform styles](#platform-styles)
 - [Theming](#theming)
 - [Advanced usage](#advanced-usage)
 - [API reference](#api-reference)
@@ -70,9 +68,7 @@ class _SettingsScreenState extends State<SettingsScreen> {
                 leading: const Icon(Icons.language),
                 title: const Text('Language'),
                 value: const Text('English'),
-                onPressed: (context) {
-                  // navigate to language picker
-                },
+                onPressed: (context) { /* navigate */ },
               ),
             ],
           ),
@@ -108,27 +104,26 @@ class _SettingsScreenState extends State<SettingsScreen> {
 
 ### `SettingsTile` — basic tile
 
-A simple tappable tile with optional leading icon, description, and trailing widget.
+A tappable tile with optional leading icon, description, and trailing widget.
 
 ```dart
 SettingsTile(
   leading: const Icon(Icons.storage),
   title: const Text('Storage'),
   description: const Text('30% used — 5.60 GB free'),
-  trailing: const Icon(Icons.chevron_right),
   onPressed: (context) { /* ... */ },
 )
 ```
 
 ### `SettingsTile.navigation` — navigation tile
 
-Adds a platform-appropriate trailing chevron (right arrow on LTR, left arrow on RTL). Use this for tiles that push a new screen.
+Adds a platform-appropriate trailing chevron. Right arrow in LTR, left arrow in RTL.
 
 ```dart
 SettingsTile.navigation(
   leading: const Icon(Icons.language),
   title: const Text('Language'),
-  value: const Text('English'),     // shown next to the chevron
+  value: const Text('English'),
   titleDescription: const Text('Choose your preferred language'),
   onPressed: (context) {
     Navigator.of(context).push(/* language screen */);
@@ -138,7 +133,7 @@ SettingsTile.navigation(
 
 ### `SettingsTile.switchTile` — switch tile
 
-A tile with a `Switch` (Material) or `CupertinoSwitch` (Cupertino) depending on the active platform.
+Renders a `Switch` on Material platforms and a `CupertinoSwitch` on iOS/macOS.
 
 ```dart
 SettingsTile.switchTile(
@@ -150,9 +145,7 @@ SettingsTile.switchTile(
 )
 ```
 
-### `CustomSettingsTile` — fully custom tile
-
-Place any widget inside a section as if it were a tile.
+### `CustomSettingsTile` — any widget as a tile
 
 ```dart
 CustomSettingsTile(
@@ -163,51 +156,60 @@ CustomSettingsTile(
 )
 ```
 
-### `CustomSettingsSection` — fully custom section
-
-Place any widget as an entire section, outside the standard section chrome.
+### `CustomSettingsSection` — any widget as a section
 
 ```dart
 CustomSettingsSection(
-  child: Column(
-    children: [
-      const SizedBox(height: 16),
-      CircleAvatar(radius: 40, child: Icon(Icons.person, size: 40)),
-      const SizedBox(height: 8),
-      const Text('Danny Yako', style: TextStyle(fontSize: 18)),
-      const SizedBox(height: 16),
-    ],
+  child: Padding(
+    padding: const EdgeInsets.all(16),
+    child: Text(
+      'Signed in as Danny Yako',
+      style: Theme.of(context).textTheme.bodySmall,
+    ),
   ),
 )
 ```
 
 ---
 
-## Platform rendering
+## Platform styles
 
-By default `SettingsList` detects the running platform automatically (`DevicePlatform.device`). You can override it to force a specific style:
+`SettingsList` detects the platform automatically. You can override it:
 
 ```dart
 SettingsList(
-  platform: DevicePlatform.iOS,   // always render iOS style
+  platform: DevicePlatform.iOS,  // force Cupertino style
   sections: [ /* ... */ ],
 )
 ```
 
-| `DevicePlatform` value | Style used |
+<p align="center">
+  <img src="https://raw.githubusercontent.com/yako-dev/flutter-settings-ui/master/assets/v3/android_settings.png" width="30%">
+  &nbsp;
+  <img src="https://raw.githubusercontent.com/yako-dev/flutter-settings-ui/master/assets/v3/ios_cupertino.png" width="30%">
+  &nbsp;
+  <img src="https://raw.githubusercontent.com/yako-dev/flutter-settings-ui/master/assets/v3/web_chrome.png" width="30%">
+</p>
+<p align="center"><em>Android (Material) &nbsp;•&nbsp; iOS (Cupertino) &nbsp;•&nbsp; Web</em></p>
+
+| `DevicePlatform` | Style |
 |---|---|
 | `device` *(default)* | Auto-detected at runtime |
 | `android`, `fuchsia`, `linux` | Material |
 | `iOS`, `macOS`, `windows` | Cupertino |
-| `web` | Web (Material with card layout) |
+| `web` | Web (card layout) |
 
 ---
 
 ## Theming
 
 ### Material 3 (v3.0.0+)
 
-On Android and Web, colors are automatically derived from your app's `ColorScheme`. No configuration needed — if you use `ThemeData(colorSchemeSeed: ...)` or a custom `ColorScheme`, the settings list will match.
+On Android and Web, colors are automatically derived from your app's `ColorScheme`. No extra configuration needed — seed colors, light/dark mode, and custom `ColorScheme` all work out of the box.
+
+<p align="center">
+  <img src="https://raw.githubusercontent.com/yako-dev/flutter-settings-ui/master/assets/v3/android_material3.png" width="45%">
+</p>
 
 ```dart
 MaterialApp(
@@ -221,7 +223,7 @@ MaterialApp(
 
 ### Custom theme overrides
 
-Pass a `SettingsThemeData` to `lightTheme` and/or `darkTheme` on `SettingsList` to override individual colors. Any field you leave `null` falls back to the platform default.
+Any field left `null` falls back to the platform default derived from your `ColorScheme`.
 
 ```dart
 SettingsList(
@@ -239,7 +241,7 @@ SettingsList(
 )
 ```
 
-### Custom fonts and text styles
+### Custom text styles
 
 ```dart
 SettingsList(
@@ -256,20 +258,17 @@ SettingsList(
 )
 ```
 
-### Disabled state colors
+### Disabled tiles
 
 ```dart
 SettingsTile.switchTile(
   title: const Text('Feature'),
   initialValue: false,
-  onToggle: null,          // passing null disables the tile
+  onToggle: null,   // null disables interaction
   enabled: false,
 )
-```
-
-To control the color of the switch when disabled:
 
-```dart
+// Control the disabled switch color:
 SettingsList(
   lightTheme: const SettingsThemeData(
     inactiveSwitchColor: Colors.grey,
@@ -284,8 +283,6 @@ SettingsList(
 
 ### Scroll controller
 
-Pass a `ScrollController` to programmatically scroll the list:
-
 ```dart
 final _controller = ScrollController();
 
@@ -294,7 +291,7 @@ SettingsList(
   sections: [
     SettingsSection(
       tiles: [
-        SettingsTile.navigation(
+        SettingsTile(
           title: const Text('Jump to bottom'),
           onPressed: (_) => _controller.animateTo(
             _controller.position.maxScrollExtent,
@@ -310,18 +307,14 @@ SettingsList(
 
 ### Compact tiles
 
-Reduce tile height with `compact: true` for dense layouts:
-
 ```dart
 SettingsTile(
   title: const Text('Option'),
-  compact: true,
+  compact: true,  // halves the vertical padding
 )
 ```
 
-### Embedding inside a scroll view
-
-When placing `SettingsList` inside another scrollable widget (e.g. a `ListView` or `CustomScrollView`), set `shrinkWrap: true` and provide non-scrolling physics:
+### Embedding inside another scroll view
 
 ```dart
 SettingsList(
@@ -331,9 +324,9 @@ SettingsList(
 )
 ```
 
-### Wide screen / web alignment
+### Wide screen alignment
 
-On screens wider than 810 dp the list automatically adds horizontal padding to keep content centered. To left-align instead:
+On screens wider than 810 dp, the list auto-centers. To left-align:
 
 ```dart
 SettingsList(
@@ -344,18 +337,14 @@ SettingsList(
 
 ### CupertinoApp support
 
-If your app uses `CupertinoApp` instead of `MaterialApp`, set `applicationType` accordingly so brightness is read from the correct theme:
-
 ```dart
+// Pure CupertinoApp:
 SettingsList(
   applicationType: ApplicationType.cupertino,
   sections: [ /* ... */ ],
 )
-```
 
-For apps that use `MaterialApp` on Android and `CupertinoApp` on iOS:
-
-```dart
+// MaterialApp on Android, CupertinoApp on iOS:
 SettingsList(
   applicationType: ApplicationType.both,
   sections: [ /* ... */ ],
@@ -370,16 +359,16 @@ SettingsList(
 
 | Parameter | Type | Default | Description |
 |---|---|---|---|
-| `sections` | `List<AbstractSettingsSection>` | required | The list of sections to display |
+| `sections` | `List<AbstractSettingsSection>` | required | Sections to display |
 | `platform` | `DevicePlatform?` | `device` | Force a specific platform style |
-| `lightTheme` | `SettingsThemeData?` | — | Color/style overrides for light mode |
-| `darkTheme` | `SettingsThemeData?` | — | Color/style overrides for dark mode |
+| `lightTheme` | `SettingsThemeData?` | — | Overrides for light mode |
+| `darkTheme` | `SettingsThemeData?` | — | Overrides for dark mode |
 | `brightness` | `Brightness?` | — | Override brightness detection |
 | `applicationType` | `ApplicationType` | `material` | `material`, `cupertino`, or `both` |
-| `scrollController` | `ScrollController?` | — | Control scrolling programmatically |
-| `shrinkWrap` | `bool` | `false` | Shrink-wrap the list to its content height |
+| `scrollController` | `ScrollController?` | — | Programmatic scroll control |
+| `shrinkWrap` | `bool` | `false` | Shrink-wrap to content height |
 | `physics` | `ScrollPhysics?` | — | Custom scroll physics |
-| `contentPadding` | `EdgeInsetsGeometry?` | — | Override default list padding |
+| `contentPadding` | `EdgeInsetsGeometry?` | — | Override list padding |
 | `crossAxisAlignment` | `CrossAxisAlignment` | `center` | Horizontal alignment on wide screens |
 
 ### `SettingsSection`
@@ -396,36 +385,36 @@ SettingsList(
 |---|---|---|---|
 | `title` | `Widget` | all | Tile label |
 | `description` | `Widget?` | all | Secondary text below the title |
-| `leading` | `Widget?` | all | Icon or widget at the start of the tile |
-| `trailing` | `Widget?` | all | Widget at the end of the tile |
-| `enabled` | `bool` | all | Grays out the tile and disables interaction |
+| `leading` | `Widget?` | all | Icon or widget at the start |
+| `trailing` | `Widget?` | all | Widget at the end |
+| `enabled` | `bool` | all | Grays out and disables interaction |
 | `compact` | `bool` | all | Halves the vertical padding |
 | `onPressed` | `Function(BuildContext)?` | all | Tap callback |
-| `value` | `Widget?` | simple, navigation | Secondary widget shown before the chevron |
-| `titleDescription` | `Widget?` | navigation | Text shown below the title (iOS/macOS/Windows only) |
+| `value` | `Widget?` | simple, navigation | Widget shown before the chevron |
+| `titleDescription` | `Widget?` | navigation | Text below title (iOS/macOS/Windows) |
 | `initialValue` | `bool?` | switchTile | Initial switch state |
-| `onToggle` | `Function(bool)?` | switchTile | Called when the switch changes; `null` disables it |
+| `onToggle` | `Function(bool)?` | switchTile | Toggle callback; `null` disables the switch |
 | `activeSwitchColor` | `Color?` | switchTile | Active switch color override |
 
 ### `SettingsThemeData`
 
 | Field | Type | Description |
 |---|---|---|
-| `settingsListBackground` | `Color?` | Background color of the whole list |
-| `settingsSectionBackground` | `Color?` | Background color of each section card |
-| `dividerColor` | `Color?` | Color of the dividers between tiles |
-| `tileHighlightColor` | `Color?` | Tile press/highlight color |
+| `settingsListBackground` | `Color?` | Background of the whole list |
+| `settingsSectionBackground` | `Color?` | Background of each section card |
+| `dividerColor` | `Color?` | Divider color between tiles |
+| `tileHighlightColor` | `Color?` | Tile press highlight color |
 | `titleTextColor` | `Color?` | Section header text color |
 | `titleTextStyle` | `TextStyle?` | Section header text style |
 | `settingsTileTextColor` | `Color?` | Tile title text color |
 | `tileTextStyle` | `TextStyle?` | Tile title text style |
-| `tileDescriptionTextColor` | `Color?` | Tile description/value text color |
-| `tileDescriptionTextStyle` | `TextStyle?` | Tile description/value text style |
-| `leadingIconsColor` | `Color?` | Color applied to leading icon widgets |
-| `trailingTextColor` | `Color?` | Color of trailing text |
-| `inactiveTitleColor` | `Color?` | Tile title color when `enabled: false` |
-| `inactiveSubtitleColor` | `Color?` | Description color when `enabled: false` |
-| `inactiveSwitchColor` | `Color?` | Switch color when `enabled: false` |
+| `tileDescriptionTextColor` | `Color?` | Description/value text color |
+| `tileDescriptionTextStyle` | `TextStyle?` | Description/value text style |
+| `leadingIconsColor` | `Color?` | Leading icon color |
+| `trailingTextColor` | `Color?` | Trailing text color |
+| `inactiveTitleColor` | `Color?` | Tile title color when disabled |
+| `inactiveSubtitleColor` | `Color?` | Description color when disabled |
+| `inactiveSwitchColor` | `Color?` | Switch color when disabled |
 
 ---