This project help developpers to display a beautiful Settings Screen UI using Flutter.
Compatible with Android & iOS & Web.
| Settings screen |
SmallUserCard |
 |
 |
| BigUserCard |
SimpleUserCard |
 |
 |
- add the following dependency in your
pubspact.yaml file:
dependencies:
babstrap_settings_screen : "^latest_version"
- add import in your
dart code:
import 'package:babstrap_settings_screen/babstrap_settings_screen.dart';
Padding(
padding: const EdgeInsets.all(10),
child: ListView(
children: [
// User card
BigUserCard(
cardColor: Colors.red,
userName: "Babacar Ndong",
userProfilePic: AssetImage("assets/logo.png"),
cardActionWidget: SettingsItem(
icons: Icons.edit,
iconStyle: IconStyle(
withBackground: true,
borderRadius: 50,
backgroundColor: Colors.yellow[600],
),
title: "Modify",
subtitle: "Tap to change your data",
onTap: () {
print("OK");
},
),
),
SettingsGroup(
items: [
SettingsItem(
onTap: () {},
icons: CupertinoIcons.pencil_outline,
iconStyle: IconStyle(),
title: 'Appearance',
subtitle: "Make Ziar'App yours",
),
SettingsItem(
onTap: () {},
icons: Icons.dark_mode_rounded,
iconStyle: IconStyle(
iconsColor: Colors.white,
withBackground: true,
backgroundColor: Colors.red,
),
title: 'Dark mode',
subtitle: "Automatic",
trailing: Switch.adaptive(
value: false,
onChanged: (value) {},
),
),
],
),
SettingsGroup(
items: [
SettingsItem(
onTap: () {},
icons: Icons.info_rounded,
iconStyle: IconStyle(
backgroundColor: Colors.purple,
),
title: 'About',
subtitle: "Learn more about Ziar'App",
),
],
),
// You can add a settings title
SettingsGroup(
settingsGroupTitle: "Account",
items: [
SettingsItem(
onTap: () {},
icons: Icons.exit_to_app_rounded,
title: "Sign Out",
),
SettingsItem(
onTap: () {},
icons: CupertinoIcons.delete_solid,
title: "Delete account",
titleStyle: TextStyle(
color: Colors.red,
fontWeight: FontWeight.bold,
),
),
],
),
],
),
),
| Parameters |
Type |
Description |
| settingsGroupTitle |
String? |
Use it to add a Title for the group |
| settingsGroupTitleStyle |
TextStyle? |
Adapt the style of the title to your liking |
| items |
List<SettingsItem> |
Use it to add the SettingsItem allowing the user to do action |
| iconItemSize |
double? |
Use it to increase or decrease all SettingsItem icon size |
| Parameters |
Type |
Description |
| icons |
IconData |
Use it to add an Icon at the beginning |
| iconStyle |
IconStyle? |
Use it to change the icon colour, add the icon background, etc. |
| title |
String |
Use it to add a title on the SettingsItem |
| titleStyle |
TextStyle? |
Use it to change the title style |
| subtitle |
String? |
Use it to add a subtitle on the SettingsItem |
| subtitleStyle |
TextStyle? |
Use it to change the subtitle style |
| trailing |
Widget? |
Use it to add a widget at the end of the SettingsItem |
| onTap |
VoidCallback |
Use it to trigger an action on click |
| Parameters |
Type |
Description |
| userProfilePic |
ImageProvider |
Use it to display an image |
| cardColor |
Color? |
Use it to change the card color |
| cardRadius |
double? |
Use it to change the card corner radius |
| backgroundMotifColor |
Color? |
Use it to change the card background motif color |
| cardActionWidget |
Widget? |
Use it to add an other Widget on the card for managing the onTap action (You use a SettingsItem here) |
| userName |
String? |
Use it to add the user name |
| userMoreInfo |
Widget? |
Use it to add more user's informations |
| Parameters |
Type |
Description |
| userProfilePic |
ImageProvider |
Use it to display an image |
| cardColor |
Color? |
Use it to change the card color |
| cardRadius |
double? |
Use it to change the card corner radius |
| backgroundMotifColor |
Color? |
Use it to change the card background motif color |
| onTap |
VoidCallback |
Use it to trigger an action on Card clicked |
| userName |
String? |
Use it to add the user name |
| userMoreInfo |
Widget? |
Use it to add more user's informations |
| Parameters |
Type |
Description |
| userProfilePic |
ImageProvider |
Use it to display an image |
| userName |
String |
Use it to add the user name |
| imageRadius |
double? |
Use it to change the image corner |
| onTap |
VoidCallback? |
Use it to trigger an action on the Image |
| textStyle |
TextStyle? |
Use it to change the userName text style |
| icon |
Icon? |
Use it tot add a Icon on the image for improve the UI |
Licence MIT
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent