flutter_awesome_ui_kit

Description:

flutter awesome ui kit

FLUTTER AWESOME UI KIT(BETA) #


Installing #
with Dart
$ dart pub add flutter_awesome_ui_kit
copied to clipboard
with Flutter
$ dart pub add flutter_awesome_ui_kit
copied to clipboard
Import it
Now in your Dart code, you can use:
import 'package:flutter_awesome_ui_kit/flutter_awesome_ui_kit.dart';
copied to clipboard
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()
copied to clipboard


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
copied to clipboard
Profile Display Size #
ProfileDisplaySize is used for making different size for AwesomeProfileImage.
ProfileDisplaySize.mini
ProfileDisplaySize.small
ProfileDisplaySize.medium
ProfileDisplaySize.large
copied to clipboard
User Status #
UserStatus is used for adding different status to AwesomeProfilePicture.
UserStatus.online
UserStatus.offline
UserStatus.away
UserStatus.busy
UserStatus.dnd
UserStatus.inactive
copied to clipboard
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,
)
copied to clipboard
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",
),
copied to clipboard
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,
)
copied to clipboard
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
}
),
copied to clipboard


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
copied to clipboard
Border Shape #
BorderShape is used for making different shapes for AwesomeTextBoxed
BorderShape.circle
BorderShape.rounded
BorderShape.flat
copied to clipboard
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,),
)
copied to clipboard


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()
copied to clipboard
If You Liked My Work


License #
MIT - License