GitLocker: The Coding Marketplace

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