babstrap_settings_screen 0.1.0
babstrap_settings_screen: ^0.1.0 copied to clipboard

This package helps you to display a nice settings screen with Flutter in a very simple and fast way. Use it to have MVP right now.

Babstrap settings screen #

This package helps you to display a nice settings screen with Flutter in a very simple and fast way.

Compatible with Android & iOS & Web.

Version 0.1.0 Licence MIT Twitter

Showcase #

Settings screenSmallUserCard
settingsscreenpreviewsmallcard
BigUserCardSimpleUserCard
bigUserCardCapture d’écran 2021-08-16 à 17 31 34

Getting started #

  • add the following dependency in your pubspact.yaml file:
dependencies:
  babstrap_settings_screen : "^lastest_version"
  • add import in your dart code:
import 'package:babstrap_settings_screen/babstrap_settings_screen.dart';
  • 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(
        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,
            ),
          ),
        ],
      ),
    ],
  ),
),

Components #

  • SettingsGroup
ParametersTypeDescription
settingsGroupTitleString?Use it to add a Title for the group
settingsGroupTitleStyleTextStyle?Adapt the style of the title to your liking
itemsList<SettingsItem>Use it to add the SettingsItem allowing the user to do action
iconItemSizedouble?Use it to increase or decrease all SettingsItem icon size
  • SettingsItem
ParametersTypeDescription
iconsIconDataUse it to add an Icon at the beginning
iconStyleIconStyle?Use it to change the icon colour, add the icon background, etc.
titleStringUse it to add a title on the SettingsItem
titleStyleTextStyle?Use it to change the title style
subtitleString?Use it to add a subtitle on the SettingsItem
subtitleStyleTextStyle?Use it to change the subtitle style
trailingWidget?Use it to add a widget at the end of the SettingsItem
onTapVoidCallbackUse it to trigger an action on click
  • BigUserCard
ParametersTypeDescription
userProfilePicImageProviderUse it to display an image
cardColorColor?Use it to change the card color
cardRadiusdouble?Use it to change the card corner radius
backgroundMotifColorColor?Use it to change the card background motif color
cardActionWidgetWidget?Use it to add an other Widget on the card for managing the onTap action (You use a SettingsItem here)
userNameString?Use it to add the user name
userMoreInfoWidget?Use it to add more user's informations
  • SmallUserCard
ParametersTypeDescription
userProfilePicImageProviderUse it to display an image
cardColorColor?Use it to change the card color
cardRadiusdouble?Use it to change the card corner radius
backgroundMotifColorColor?Use it to change the card background motif color
onTapVoidCallbackUse it to trigger an action on Card clicked
userNameString?Use it to add the user name
userMoreInfoWidget?Use it to add more user's informations
  • SimpleUserCard
ParametersTypeDescription
userProfilePicImageProviderUse it to display an image
userNameStringUse it to add the user name
imageRadiusdouble?Use it to change the image corner
onTapVoidCallback?Use it to trigger an action on the Image
textStyleTextStyle?Use it to change the userName text style
iconIcon?Use it tot add a Icon on the image for improve the UI

Licence #

Licence MIT

28
likes
110
pub points
64%
popularity

This package helps you to display a nice settings screen with Flutter in a very simple and fast way. Use it to have MVP right now.

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (LICENSE)

Dependencies

flutter

More

Packages that depend on babstrap_settings_screen