babstrap_settings_screen

Description:

babstrap settings screen

Babstrap settings screen #
This project allows you to create an intuitive and visually appealing Settings screen for your Flutter applications.
Compatible with Android & iOS & Web.

Showcase #



Settings screen
SmallUserCard








BigUserCard
SimpleUserCard







Getting started #

add the following dependency in your pubspact.yaml file:

dependencies:
babstrap_settings_screen : "^latest_version"
copied to clipboard

add import in your dart code:

import 'package:babstrap_settings_screen/babstrap_settings_screen.dart';
copied to clipboard

Example

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(
backgroundColor: Colors.blue,
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,
),
),
],
),
],
),
),
copied to clipboard
Components #

SettingsGroup




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


backgroundColor
Color?
Use it to custom item's colors


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




SettingsItem




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




BigUserCard




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




SmallUserCard




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




SimpleUserCard




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 #
Licence MIT
Author #
Babacar NDONG