quickui

Description:

quickui

Welcome to quickui #
As the name suggests it's a quickie for UI development.
It will be easy, fast and you will enjoy it!
It simplifies the most commonly used widgets, methods, and use cases to build UI.
This package includes:
Modified standard widgets of flutter

Container widget
Animated Container widget
Padding widget

Custom widgets commonly used

Image widget

Utility methods and extensions for

Text style
System bar
On click

Container_ Widget #


Paddings and Margins:


No need to use Edge Insets, resulting in more readable and concise code.
Container_(
topPadding: 10, // leftPadding: 10, rightPadding: 10, bottomPadding: 10,
verticalPadding: 20, // horizontalPadding: 10,
allPadding: 30,
allMargin: 40, // Fields named with same pattern for padding
color: Colors.blueAccent,
child: const Text(
'Custom container',
),
);
copied to clipboard


Mix logic of values, Priority of values will be taken as most specified > horizontal or vertical > all
Ex: Below container will have all sides 40 padding but the top padding will be 10.
Container_(
topPadding: 10,
allPadding: 40,
color: Colors.blueAccent,
child: const Text(
'Custom container',
),
);
copied to clipboard




Rounded Corners:


Direclty give corner radius and mix it up by common and specified values as above.


Ex: Below container will have all corner radius of 20  but the top left corner radius will be 5.
Container_(
topLeftRadius: 5, // topRightRadius, bottomLeftRadius, bottomRightRadius
allCornerRadius: 20,
color: Colors.blueAccent,
child: const Text(
'Custom container',
),
);
copied to clipboard




Borders:


Give border gradient, colour and width directly with an option to make borders outside.
Container_(
borderGradient: const LinearGradient(
colors: [
Colors.blueAccent,
Colors.redAccent,
],
),
// borderColor: Colors.blue,
shouldMakeBorderOutside: true,
borderWidth: 1,
child: const Text(
'Border container',
),
);
copied to clipboard




Styling:


Give gradient, shadows and make container circle shaped directly .


You need to give height or width for circle radius.
Container_(
gradient: const LinearGradient(
colors: [
Colors.blueAccent,
Colors.redAccent,
],
),
boxShadowList: [
BoxShadow(
color: Colors.black.withOpacity(0.2),
spreadRadius: 5,
blurRadius: 7,
offset: const Offset(0, 3),
),
],
shouldMakeCircle: true,
height: 200,
child: const Center(
child: Text(
'Styling container',
),
),
);
copied to clipboard




BG Image:


Directly add image as background in container with options to give alignment and fit.
Container_(
backgroundImageAssetName: 'asset/img_bg_auth_universal.png',
backgroundImageAlignment: Alignment.topCenter,
backgroundImageFit: BoxFit.cover,
verticalPadding: 20,
child: const Text(
'Image container',
),
);
copied to clipboard

License

For personal and professional use. You cannot resell or redistribute these repositories in their original state.

Share

• Share on Facebook
• Share on Twitter