Skip to content

Commit c06e7a6

Browse files
author
RusKryzhanovskiy
committed
Update the README.md
1 parent 545cef6 commit c06e7a6

File tree

1 file changed

+98
-237
lines changed

1 file changed

+98
-237
lines changed

‎README.md

Lines changed: 98 additions & 237 deletions
Original file line numberDiff line numberDiff line change
@@ -1,248 +1,109 @@
1-
# Settings UI for Flutter
21

2+
# Settings UI for Flutter
33
[![Pub Version](https://img.shields.io/pub/v/settings_ui?color=blueviolet)](https://pub.dev/packages/settings_ui)
4+
## Overview:
5+
Build the beautiful settings screen UI in one moment with `Settings UI for Flutter`
46

5-
<p align="center">
6-
<img src="https://raw.githubusercontent.com/yako-dev/flutter-settings-ui/master/assets/flutter_settings_ui_logo.png" height="500px">
7-
</p>
8-
7+
<p align="center">
8+
<img src="https://raw.githubusercontent.com/yako-dev/flutter-settings-ui/dev/assets/v2/iOS/mockup_01.png" height="600px">
9+
<img src="https://raw.githubusercontent.com/yako-dev/flutter-settings-ui/dev/assets/v2/android/mockup_01.png" height="600px">
10+
</p>
911

1012
## Installing:
11-
In your pubspec.yaml
12-
```yaml
13-
dependencies:
14-
settings_ui: <latest version>
15-
```
16-
```dart
17-
import 'package:settings_ui/settings_ui_v2.dart';
18-
```
13+
1. Add the dependency in your `pubspec.yaml` file.
14+
```yaml
15+
dependencies:
16+
settings_ui: <latest version>
17+
```
1918
19+
2. Import the `settings_ui` package.
20+
```dart
21+
import 'package:settings_ui/settings_ui.dart';
22+
```
2023

2124
## Basic Usage:
22-
```dart
23-
SettingsList(
24-
sections: [
25-
SettingsSection(
26-
title: Text('APPEARANCE'),
27-
tiles: [
28-
SettingsTile.switchTile(
29-
onToggle: (value) {
30-
setState(() {
31-
darkTheme = value;
32-
});
33-
},
34-
initialValue: darkTheme,
35-
title: Text('Dark Appearance'),
36-
),
37-
],
38-
),
39-
SettingsSection(
40-
title: Text('IAD DEVELOPER APP TESTING'),
41-
tiles: [
42-
SettingsTile.navigation(
43-
title: Text('Fill Rate'),
44-
),
45-
SettingsTile.navigation(
46-
title: Text('Add Refresh Rate'),
47-
),
48-
SettingsTile.switchTile(
49-
onToggle: (_) {},
50-
initialValue: false,
51-
title: Text('Highlight Clipped Banners'),
52-
),
53-
SettingsTile.switchTile(
54-
onToggle: (_) {},
55-
initialValue: false,
56-
title: Text('Unlimited Ad Presentation'),
57-
),
58-
],
59-
),
60-
],
61-
)
62-
```
63-
64-
<br>
65-
<li>Navigation tile</li>
66-
67-
<p align="center">
68-
<img src="https://raw.githubusercontent.com/yako-dev/flutter-settings-ui/dev/assets/navigation-tile.png" width="400px">
69-
</p>
70-
71-
```dart
72-
SettingsTile.navigation(
73-
onPressed: (_) {},
74-
title: Text('View'),
75-
value: Text('Standard'),
76-
description: Text(
77-
'Choose a view for iPhone. '
78-
'Zoomed shadows larger controls. '
79-
'Standart shows more content.',
80-
),
81-
)
82-
```
83-
84-
<br>
85-
<b>SettingsSection:</b><br>
86-
The SettingsSection makes it easy to combine setting tiles of the same category
87-
88-
<p align="center">
89-
<img src="https://raw.githubusercontent.com/yako-dev/flutter-settings-ui/dev/assets/settings-section.png" width="400px">
90-
</p>
91-
92-
```dart
93-
SettingsSection(
94-
title: Text('IAD DEVELOPER APP TESTING'),
95-
tiles: [
96-
SettingsTile.navigation(
97-
title: Text('Fill Rate'),
98-
),
99-
SettingsTile.navigation(
100-
title: Text('Add Refresh Rate'),
101-
),
102-
SettingsTile.switchTile(
103-
onToggle: (_) {},
104-
initialValue: false,
105-
title: Text('Highlight Clipped Banners'),
106-
),
107-
SettingsTile.switchTile(
108-
onToggle: (_) {},
109-
initialValue: false,
110-
title: Text('Unlimited Ad Presentation'),
111-
),
112-
],
113-
)
114-
```
115-
116-
<br>
117-
118-
## Widgets
119-
<br>
120-
<b>SettingsTile:</b><br><br>
121-
<li>Simple tile</li>
122-
123-
<p align="center">
124-
<img src="https://raw.githubusercontent.com/yako-dev/flutter-settings-ui/dev/assets/simple-tile.png" width="400px">
125-
</p>
126-
127-
```dart
128-
SettingsTile(
129-
onPressed: (BuildContext context) {
130-
//TODO: Add implementation
131-
},
132-
title: Text(
133-
'Clear Trusted Computers',
134-
style: TextStyle(color: CupertinoColors.activeBlue),
135-
),
136-
description: Text(
137-
'Removing trusted computers will delete all '
138-
'of the records of computers that you have '
139-
'paired with previously',
140-
),
141-
)
142-
```
143-
144-
<br>
145-
<li>Switch tile</li>
146-
147-
<p align="center">
148-
<img src="https://raw.githubusercontent.com/yako-dev/flutter-settings-ui/dev/assets/switch-tile.png" width="400px">
149-
</p>
150-
151-
```dart
152-
SettingsTile.switchTile(
153-
onToggle: (value) {
154-
setState(() {
155-
darkTheme = value;
156-
});
157-
},
158-
initialValue: darkTheme,
159-
title: Text('Dark Appearance'),
160-
)
161-
```
162-
163-
<br>
164-
<li>Navigation tile</li>
165-
166-
<p align="center">
167-
<img src="https://raw.githubusercontent.com/yako-dev/flutter-settings-ui/dev/assets/navigation-tile.png" width="400px">
168-
</p>
169-
170-
```dart
171-
SettingsTile.navigation(
172-
onPressed: (_) {},
173-
title: Text('View'),
174-
value: Text('Standard'),
175-
description: Text(
176-
'Choose a view for iPhone. '
177-
'Zoomed shadows larger controls. '
178-
'Standart shows more content.',
179-
),
180-
)
181-
```
182-
183-
<br>
184-
<b>SettingsSection:</b><br>
185-
The SettingsSection makes it easy to combine setting tiles of the same category
186-
187-
<p align="center">
188-
<img src="https://raw.githubusercontent.com/yako-dev/flutter-settings-ui/dev/assets/settings-section.png" width="400px">
189-
</p>
190-
191-
```dart
192-
SettingsSection(
193-
title: Text('IAD DEVELOPER APP TESTING'),
194-
tiles: [
195-
SettingsTile.navigation(
196-
title: Text('Fill Rate'),
197-
),
198-
SettingsTile.navigation(
199-
title: Text('Add Refresh Rate'),
200-
),
201-
SettingsTile.switchTile(
202-
onToggle: (_) {},
203-
initialValue: false,
204-
title: Text('Highlight Clipped Banners'),
205-
),
206-
SettingsTile.switchTile(
207-
onToggle: (_) {},
208-
initialValue: false,
209-
title: Text('Unlimited Ad Presentation'),
210-
),
211-
],
212-
)
213-
```
214-
215-
<br>
216-
<b>SettingsList:</b><br>
217-
The SettingsList widget allows easily combine setting sections, specify settings theme, contentPadding and platform for all widgets
218-
219-
<p align="center">
220-
<img src="https://raw.githubusercontent.com/yako-dev/flutter-settings-ui/dev/assets/settings-list.png" width="400px">
221-
</p>
222-
223-
```dart
224-
SettingsList(
225-
platform: DevicePlatform.iOS,
226-
contentPadding: EdgeInsets.symmetric(horizontal: 20),
227-
theme: SettingsThemeData(
228-
trailingTextColor: Colors.white,
229-
settingsListBackground: Colors.orangeAccent,
230-
settingsSectionBackground: Colors.red,
231-
dividerColor: Colors.white,
232-
titleTextColor: Colors.white,
233-
leadingIconsColor: Colors.green,
234-
tileDescriptionTextColor: Colors.white,
235-
settingsTileTextColor: Colors.white),
236-
sections: [ ... ],
237-
)
238-
```
239-
240-
## Settings UI supports dark mode:
241-
<p align="center">
242-
<img src="https://raw.githubusercontent.com/yako-dev/flutter-settings-ui/master/assets/dark_mode_animation.gif" height="600px">
243-
</p>
244-
<br>
25+
```dart
26+
SettingsList(
27+
sections: [
28+
SettingsSection(
29+
title: Text('Common'),
30+
tiles: <SettingsTile>[
31+
SettingsTile.navigation(
32+
leading: Icon(Icons.language),
33+
title: Text('Language'),
34+
value: Text('English'),
35+
),
36+
SettingsTile.switchTile(
37+
onToggle: (value) {},
38+
initialValue: true,
39+
leading: Icon(Icons.format_paint),
40+
title: Text('Enable custom theme'),
41+
),
42+
],
43+
),
44+
],
45+
),
46+
```
47+
48+
## Settings List
49+
Settings list it's a wrapper for your settings UI.
50+
51+
### Parameters
52+
53+
| Parameter | Description | Required |
54+
|--|--|--|
55+
| List\<AbstractSettingsSection> sections | The list of your settings sections | +
56+
| bool shrinkWrap | Enable/disable the shrink wrap for the list | -
57+
| ScrollPhysics physics | Setup your custom scroll physics | -
58+
| DevicePlatform platform | Chose the platform view you prefer | -
59+
| SettingsThemeData lightTheme | Setup your light theme | -
60+
| SettingsThemeData darkTheme | Setup your dark theme | -
61+
| Brightness brightness | Overwrite the brightness you want | -
62+
| EdgeInsetsGeometry contentPadding | Set custom paddings | -
63+
| ApplicationType applicationType | Setup 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 | -
64+
65+
## Settings Section
66+
Setting section is the block of your settings tiles located in your `SettingsList`.
67+
68+
### Implementations
69+
70+
| Type | Description |
71+
|--|--|
72+
| AbstractSettingsSection | An abstract entity. Just an OOP's thing (so you can expand it yourself) |
73+
| CustomSettingsSection | You 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`. Fell free and enjoy |
74+
| SettingsSection | The default section widget, contains `Widget title`, `EdgeInsetsDirectional margin` and the required list of `AbstractSettingsTile` we called `tiles` |
75+
76+
## Settings Tile
77+
78+
Here it is. The section tile. It displays the elements you want to show.
79+
80+
| Type | Description |
81+
|--|--|
82+
| AbstractSettingsTile | One more OOP's thing (so you can expand it yourself) |
83+
| CustomSettingsTile | The main idea the same as for the `CustomSettingsSection`. You can put anything as a child inside your `SettingsSection`.
84+
| SettingsTile | I think that we need to discuss this deeper. See below for the details.
85+
86+
### Settings tile
87+
The implementation of `AbstractSettingsTile`. It has a lot of fabric methods and parameters. Let's take a look.
88+
89+
| Constructor / Fabric method | Description |
90+
|--|--|
91+
| SettingsTile | Displays the default setting tile. Nothing special. |
92+
| SettingsTile.navigation | Created to indicate this tile as a navigation tile. It adds a right-located arrow for the iOS design as an example.
93+
| SettingsTile.switchTile | Creates a switch tile. Do you want some switch? Just use this one. |
94+
95+
Now let's deal with all these parameters.
96+
| Parameter | Description |
97+
|--|--|
98+
| Widget leading | Adds some leading for your tile. Just like with the `ListTile`. |
99+
| Widget title | The title of your tile.
100+
| Widget description | Additional info about this tile. Displays different ways according to the platform
101+
| Function(BuildContext context) onPressed | More interactivity for your tiles. Just tap it.
102+
| Color activeSwitchColor | Set the switch color for your `SettingsTile.switchTile`
103+
| Widget value | Just like the `description` but more declarative. You can compare and choose which exactly you want to use.
104+
| Function(bool value) onToggle | Override the on switch event in your `SettingsTile.switchTile`
105+
| bool initialValue | Choose the initial value for your `SettingsTile.switchTile`
245106

246107

247108
## License
248-
This project is licensed under the Apache License 2.0 - see the [LICENSE](LICENSE) file for details
109+
This project is licensed under the Apache License 2.0 - see the [LICENSE](LICENSE) file for details

0 commit comments

Comments
 (0)