search

babstrap / babstrap_settings_screen

This project help developers to get beautiful Settings Screen UI using Flutter.
MIT License
39 stars 26 forks source link
dart flutter flutter-package ui

readme

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.

Version 0.1.7 Twitter

Showcase

Settings screen SmallUserCard
settingsscreenpreview smallcard
BigUserCard SimpleUserCard
bigUserCard Capture d’écran 2021-08-16 à 17 31 34

Getting started

dependencies:
  babstrap_settings_screen : "^latest_version"
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(
        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,
            ),
          ),
        ],
      ),
    ],
  ),
),

Components

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

Licence MIT

Author

Babacar NDONG