babstrap_settings_screen 0.0.3

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.

Showcase

Settings screen	SmallUserCard
BigUserCard

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

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

• 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
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
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

Licence

Licence MIT