moye

Description:

moye

Moye #
A streamlined Flutter package designed to minimize the code required for creating stunning user interfaces.

Extensions #
Tired of wrapping your widgets inside a Expand widget to make them expanded? You can use the expanded widget to avoid wrapping multiple layers of widgets around your widget and make it more readable.
// Before
Expanded(child: YourCustomWidget())

// After
YourCustomWidget().expanded
copied to clipboard
Extensions don't end there. You can also recursively call extensions on extensions to achieve the UI you desire and make your code more readable. For example:
// Before
Column(
children: [
Expanded(
child: Padding(
padding: EdgeInsets.all(16),
child: Container(
child: Align(
alignment: Alignment.topCenter,
child: Text('Test'),
),
),
),
),
Expanded(
child: Padding(
padding: EdgeInsets.all(8),
child: Container(
child: Align(
alignment: Alignment.centerRight,
child: Text('Test'),
),
),
),
)
],
);
copied to clipboard
// After using extensions
Column(
children: [
Container(
child: Text('Test').alignTop,
).withPadding(s16Padding).expanded,
Container(
child: Text('Test').alignRight,
).withPadding(s8Padding).expanded,
],
);
copied to clipboard
As you saw from the code above, you can use the pre-defined constants in Moye for padding, dimensions, and spaces. Moye currently has lots of extensions to meet your demands, however, please open a new request if your use-case has not been covered yet.
Constants #
Pre-defined constants in Moye allow you to easily integrate them with your projects and keep it clean.
Padding Constants
High usage padding patterns has been covered in this package. You can see the difference between before and after here:
// Before

1. const EdgeInsets.all(8)
2. const EdgeInsets.symmetric(vertical: s8)
3. const EdgeInsets.symmetric(horizontal: s8)

// After

1. s8Padding
2. s8VerticalPadding
3. s8HorizontalPadding
copied to clipboard
Box constants
Boxes allow you to define spaces between different widgets.
// Before

1. SizedBox()
2. SizedBox(width: 8)
3. SizedBox(height: 8)

// After

1. empty
2. s8WidthBox
3. s8HeightBox
copied to clipboard
Gradient Overlay #
Add gradient overlays on top of your widgets to make them unique. You can apply these shaders on top of Text, Image, and any widget that you currently have. Gradient overlay also has an extension which can easily be invoked on any widget!

Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Text('Gradient Overlay', style: context.textTheme.headlineLarge.bold),
s8HeightBox,
Text('Here is how gradient overlay looks' * 5)
],
).withGradientOverlay(
gradient: LinearGradient(
colors: [
context.colorScheme.primary,
context.colorScheme.tertiary,
context.colorScheme.primary,
],
),
)
copied to clipboard
Glow Container #
Add a backdrop glow to any widget of your choice. Enhances your UI/UX and makes it more futurisic! You can customize the color, blur radius, and spared radius, and it comes with its own extension!

YourWidget().withGlowContainer(blurRadius: 10)
copied to clipboard
Linear Gradient Progress Bar #
Make your linear progress bars support both gradient colors and a back glow!

LinearGradientProgressBar(
value: 0.3,
borderRadius: BorderRadius.circular(56),
gradient: LinearGradient(
colors: [
context.colorScheme.primary,
context.colorScheme.tertiary,
],
),
)
copied to clipboard
Progress Button #
Show a feedback to your user while performing an action and debounce any incoming presses onto the button for that duration.

ProgressButton(
onPressed: () async {
await Future.delayed(const Duration(seconds: 1));
},
child: const Text('Progress button - inside loading'),
icon: Icon(Icons.send),
)
copied to clipboard
BottomSheet Utils #
Easily show 3 different types of bottom sheets: default, wrap, and scrollable.

BottomSheetUtils.showBottomSheet(
context: context,
borderRadius: BorderRadius.circular(16),
config: WrapBottomSheetConfig(
builder: (context, controller) {
return buildBottomSheetContent(context, 'Wrap',
'This type of bottom sheet wraps its content');
},
),
);
copied to clipboard
Back Blur Image #
Blur any image and put it behind any widget to enhance your UI/UX.

Container(
width: 100,
height: 100,
).withBackBlurImage(
imageProvider: NetworkImage(
'https://i.natgeofe.com/n/b103fff5-6a84-4d19-b65e-5856998816c3/PIA19952.jpg?w=1440&h=1440')),
)
copied to clipboard