FLUTTER AWESOME UI KIT(BETA)

Installing

with Dart

$ dart pub add flutter_awesome_ui_kit

with Flutter

$ dart pub add flutter_awesome_ui_kit

Import it Now in your Dart code, you can use:

import 'package:flutter_awesome_ui_kit/flutter_awesome_ui_kit.dart';

If You Liked My Work

Components

• AwesomeButton
• AwesomeProfileImage
• AwesomeTextBoxed
• AwesomeSnackbar

AwesomeButton

AwesomeButton offers 3 types of button with number of customizations that can cater to every usecase a developer can ever face using development. It also offers user feedback on click and press in the form of ripples effect.

Types

• rounded()
• roundedCornors()
• flat()

Demo

Usage

// Rounded Cornors
AwesomeButton(
    "Rounded Cornors",
    textSize: 20,
    borderColor: Colors.green,
    borderWidth: 2,
    backgroundColor: Colors.white,
    textColor: Colors.green,
    showShadow: true,
    shadowColor: Colors.green,
    enabled: true,
    disabledBackgroundColor: Colors.grey.withOpacity(0.4),
    padding: const EdgeInsets.symmetric(vertical: 20,),
    onClick: () {},
).roundedCornors(),


// Rounded
AwesomeButton(
    "Rounded",
    textSize: 20,
    borderColor: Colors.blue,
    borderWidth: 2,
    backgroundColor: Colors.white,
    textColor: Colors.blue,
    enabled: true,
    showShadow: true,
    shadowColor: Colors.grey,
    disabledBackgroundColor: Colors.grey.withOpacity(0.4),
    padding: const EdgeInsets.symmetric(vertical: 20,),
    onClick: () {},
).rounded(),

// Flat
AwesomeButton(
    "Flat",
    textSize: 20,
    borderColor: Colors.green,
    borderWidth: 2,
    backgroundColor: Colors.white,
    textColor: Colors.green,
    enabled: true,
    disabledBackgroundColor: Colors.grey.withOpacity(0.4),
    padding: const EdgeInsets.symmetric(vertical: 20,),
    onClick: () {},
).flat()

AwesomeProfileImage

AwesomeProfileImage offer varity option for customization that makes adding profile image in your application easier.

Customization offers include shape, size, border color and status type.

Demo

Types

• withStatusDot() - Display Profile image with border and status
• withLiveEffect() - For when user is live on the platform
• withStatusText() - Display Profile image with border and status as text
• withIcon() - Adds a clickable icon to the profile

Profile Display Shape

ProfileDisplayShape is used for making different shapes for AwesomeProfileImage.

ProfileDisplayShape.circle
ProfileDisplayShape.square
ProfileDisplayShape.squareround

Profile Display Size

ProfileDisplaySize is used for making different size for AwesomeProfileImage.

ProfileDisplaySize.mini
ProfileDisplaySize.small
ProfileDisplaySize.medium
ProfileDisplaySize.large

User Status

UserStatus is used for adding different status to AwesomeProfilePicture.

UserStatus.online
UserStatus.offline
UserStatus.away
UserStatus.busy
UserStatus.dnd
UserStatus.inactive

Usage

display

AwesomeProfileImage.withStatusDot(
    profileDisplaySize: ProfileDisplaySize.medium,
    borderWidth: 2,
    borderColor: Colors.black,
    profileDisplayShape: ProfileDisplayShape.square,
    placeholderAssets: "assets/images/umar.jpg",
    showStatus: showStatus,
    userStatus: userStatus
    imageUrl: "https://i.imgur.com/HEXRUsu.jpeg",
    showStatus: true, 
    userStatus: UserStatus.online,
)

displayLive

Note: displayLive Does not support ProfileDisplaySize.medium

AwesomeProfileImage.withLiveEffects(
    profileDisplaySize:ProfileDisplaySize.medium,
    borderWidth: 4,
    profileDisplayShape: ProfileDisplayShape.square,
    placeholderAssets: "assets/images/umar.jpg",
    backgoundColor: Colors.white,
    showStatus: showStatus,
    userStatus: userStatus,
    badgeColor: Colors.red,
    ripplesColor: Colors.red.shade500,
    imageUrl: "https://i.imgur.com/HEXRUsu.jpeg",
),

displayWithTextStatus

AwesomeProfileImage.withStatusText
    profileDisplaySize: ProfileDisplaySize.medium,
    borderWidth: 2,
    borderColor: Colors.black,
    profileDisplayShape: ProfileDisplayShape.square,
    placeholderAssets: "assets/images/umar.jpg",
    showStatus: showStatus,
    userStatus: userStatus
    imageUrl: "https://i.imgur.com/HEXRUsu.jpeg",
    showStatus: true, 
    userStatus: UserStatus.online,
)

displayWithIcon

AwesomeProfileImage.withIcon(
    profileDisplaySize: profileDisplaySize,
    borderWidth: (showBorder) ? 2 : 0,
    borderColor: Colors.black,
    profileDisplayShape: profileDisplayShape,
    imageUrl: "https://i.imgur.com/HEXRUsu.jpeg",
    onImageClicked: () {
       // On Image clicked
    },
    iconBackgroundColor: Colors.white,
    iconBorderWidth: 2,
    iconBorderColor: Colors.black,
    iconColor: Colors.black,
    icon: Icons.mic,
    onIconClicked: () {
        // On icon clicked
    }
),

AwesomeTextBoxed

AwesomeTextBoxed is a awesome boxed text with icon which can be used as warning, info, error or success indicator.

Demo

Text Boxed Type

TextBoxType is used for getting different types of AwesomeTextBoxed as shown in demo.

TextBoxType.info
TextBoxType.error
TextBoxType.warning
TextBoxType.success
TextBoxType.custom

Border Shape

BorderShape is used for making different shapes for AwesomeTextBoxed

BorderShape.circle
BorderShape.rounded
BorderShape.flat

Usage

AwesomeTextBoxed(
    "Operation sucessfull",
    textBoxType: TextBoxType.info,
    maxLines: 3,
    borderShape: BorderShape.rounded,
    margin: const EdgeInsets.only(bottom: 20,top: 5,),
)

// TextBoxType.custom
// TextBoxType.custom require all the custom params custombackgroundColor customTextColor & customIcon
AwesomeTextBoxed(
    "Operation sucessfull",
    textBoxType: TextBoxType.custom,
    customIcon: Icons.favorite,
    width: 150,
    custombackgroundColor: Colors.pink.shade100,
    customTextColor: Colors.pink,
    borderShape: BorderShape.circle,
    margin: const EdgeInsets.only(bottom: 20, top: 5,),
)

AwesomeSnackbar

AwesomeSnackbar is powered by wonderfull AwesomeTextBoxed to add some kick to native snackbar

Demo

Usage

AwesomeSnackbar(
    "Some Error Occoured",
    textBoxType: TextBoxType.error,
    duration: 500,
    borderShape: BorderShape.rounded,
    context: context,
 ).show()

If You Liked My Work

License

MIT - License