helpers

Description:

helpers

helpers #
My other APIs #

Scroll Navigation
Video Viewer
Video Editor


Features #

Better readability in code.
More intuitive statements.
Faster when declaring.
Shorten long and tedious statements.


Table of Contents #

BuildContext Extension FAVORITE Plus
Console Color Log FAVORITE
Build Classes

BuildMedia
BuildColor


Misc Classes

Misc FAVORITE
SystemOverlay
SystemOrientation


Size Classes

Margin FAVORITE
EdgeRadius


Text Helpers

TextDesigned
Themed Text FAVORITE


Transition Helpers

BooleanTween FAVORITE
OpacityTransition
SwipeTransition
TurnTransition


Widgets Helpers

SlidingBottomSheet FAVORITE
SlidingBottomSheetContainer
RemoveScrollGlow
DismissKeyboard
SizeBuilder
ExpandedAlign
SplashTap
SplashButton
TileDesinged
ExpandedSpacer
ExpandedTap
SafeAreaColor
AnimatedInteractiveViewer




Preview #
Color log example

Widgets example


Documentation #
BuildContext Extension #
It is a simplification of Theme.of(context), MediaQuery.of(context) and Navigator.

@override
Widget build(BuildContext context) {
final BuildColor color = context.color; //DOES THIS: BuildColor(context)
final BuildMedia media = context.media; //DOES THIS: BuildMedia(context)

return Container(
color: color.primary, //DOES THIS: Theme.of(context).primaryColor
width: media.width / 2, //DOES THIS: MediaQuery.of(context).size.width / 2
height: media.height / 2 //DOES THIS: MediaQuery.of(context).size.height / 2
);
}


context.theme //DOES THIS: Theme.of(context)
context.textTheme //DOES THIS: Theme.of(context).textTheme

context.goBack(); //DOES THIS: Navigator.pop(context);
context.to(page); //DOES THIS: Navigator.push(context, MaterialPageRoute(builder: (_) => page));
... //+5 Navigator Locations

copied to clipboard


Console Color Log #
It is a personalization for console log.

printPink("I'm an error 凸-_-凸", true);
printYellow("I'm an alert (¯―¯٥)");
printCyan("I'm an info (✿◠‿◠)");
printColor(
"I'm a weird boy ¯\\(°_o)/¯",
PrintColorStyle(
prefix: "Hola baby!",
foreground: Colors.green,
background: Colors.black,
underline: true,
bold: true,
italic: true,
),
);
printColor(
"Controller disposed!",
PrintColorStyle(
bold: true,
prefix: "HELPERS",
foreground: Colors.orangeAccent,
),
);
copied to clipboard


Misc Helpers #


Misc Class: #
It is a simplification of many instructions.

double milliseconds = 200;


//CALLBACKS
Misc.onLayoutRendered(() {}); //Helper
WidgetsBinding.instance.addPostFrameCallback((_) {});


//TIMER-ASYNC
Misc.delayed(milliseconds, () {}); //Helper
Future.delayed(Duration(milliseconds: milliseconds), () {});

Misc.timer(milliseconds, () {}); //Helper
Timer(Duration(milliseconds: milliseconds), () {});

Misc.periodic(milliseconds, () {}); //Helper
Timer.periodic(Duration(milliseconds: milliseconds), () {});

await Misc.wait(milliseconds); //Helper
await Future.delayed(Duration(milliseconds: milliseconds), () {});


//TEXT
Text(Misc.loremIpsum());
Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit, " +
"sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.");

Text(Misc.extendedLoremIpsum());
Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit, " +
"sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." +
"Ut enim ad minim veniam, quis nostrud exercitation " +
"ullamco laboris nisi ut aliquip ex ea commodo consequat.");


//SYSTEM (NOTE: SystemChrome NEED IMPORT FLUTTER SERVICES)
Misc.setSystemOverlayStyle(...); //Helper
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(...));

Misc.setSystemOverlay(SystemOverlay.portraitUp); //Helper
SystemChrome.setSystemUIOverlay([SystemUiOverlay.portraitUp]);

Misc.setSystemOrientation(SystemOrientation.values); //Helper
SystemChrome.setPreferredOrientations(DeviceOrientation.values)

copied to clipboard



SystemOverlay Class: #
This is a simplification of the List type: SystemUiOverlay statement. It is used for the Misc.setSystemOverlayStyle() statement.
IMPROVEMENT: By using the SystemOverlay you will not need to import SystemChrome, DeviceOrientation from the flutter services.


SystemOverlay.values; //Helper
SystemUiOverlay.values

SystemOverlay.top; //Helper
[SystemUiOverlay.top]

SystemOverlay.bottom; //Helper
[SystemUiOverlay.bottom]
copied to clipboard



SystemOrientation Class: #
This is a simplification of the List type: DeviceOrientation statement. It is used for the Misc.setSystemOrientation() statement.
IMPROVEMENT: By using the SystemOrientation you will not need to import SystemChrome, DeviceOrientation from the flutter services.


//INSTRUCTIONS
SystemOrientation.values; //Helper
DeviceOrientation.values;

SystemOrientation.portraitUp; //Helper
[DeviceOrientation.portraitUp];

SystemOrientation.portraitDown; //Helper
[DeviceOrientation.portraitDown];

SystemOrientation.landscapeLeft; //Helper
[DeviceOrientation.landscapeLeft];

SystemOrientation.landscapeRight; //Helper
[DeviceOrientation.landscapeRight]
copied to clipboard



Build Helpers #


BuildMedia Class: #
It is a simplification of the MediaQuery.of(context) statement.


final BuildMedia media = BuildMedia(context);
final MediaQueryData query = MediaQuery.of(context);

media.width; //Helper
//query.size.width;
media.height; //Helper
//query.size.height;
media.padding; //Helper
//query.padding;
media.size; //Helper
//query.size;

... //+10 MEDIAQUERIES
copied to clipboard



BuildColor Class: #


It is a simplification of the Theme.of(context) statement.
final BuildColor color = BuildColor(context);
final ThemeData theme = Theme.of(context);

color.primary; //Helper
//theme.primaryColor;
color.primaryLight; //Helper
//theme.primaryColorLight;
color.accent; //Helper
//theme.accentColor;
color.disabled; //Helper
//theme.disabledColor;
color.scaffold; //Helper
//theme.scaffoldBackgroundColor;

... //+20 COLORS
copied to clipboard


Size Helpers #


Margin Class: #
It is a simplification of the EdgeInsets statement.

double amount = 2.0;


Margin.zero; //Helper
//EdgeInsets.zero;
Margin.all(amount); //Helper
//EdgeInsets.all(amount);


//SYMETRIC
Margin.vertical(amount); //Helper
//EdgeInsets.symmetric(vertical: amount);
Margin.horizontal(amount); //Helper
//EdgeInsets.symmetric(horizontal: amount);
Margin.symmetric(...); //Helper
//EdgeInsets.symmetric(...);


//ONLY
Margin.top(amount); //Helper
//EdgeInsets.only(top: amount);
Margin.bottom(amount); //Helper
//EdgeInsets.only(bottom: amount);
Margin.left(amount); //Helper
//EdgeInsets.only(left: amount);
Margin.right(amount); //Helper
//EdgeInsets.only(right: amount);
Margin.only(...); //Helper
//EdgeInsets.only(...);
copied to clipboard



EdgeRadius Class: #
It is a simplification of the BorderRadius statement.

double amount = 2.0;


EdgeRadius.zero; //Helper
//BorderRadius.zero;
EdgeRadius.all(amount); //Helper
//BorderRadius.all(Radius.circular(amount));


//SYMETRIC
EdgeRadius.vertical(top: amount, bottom: amount); //Helper
//BorderRadius.vertical(
// top: Radius.circular(top),
// bottom: Radius.circular(bottom));
EdgeRadius.horizontal(left: amount, right: amount); //Helper
//BorderRadius.horizontal(
// left: Radius.circular(left),
// right: Radius.circular(right));


//ONLY
EdgeRadius.only( //Helper
topLeft: amount,
topRight: amount,
bottomLeft: amount,
bottomRight: amount);
//BorderRadius.only(
// topLeft: Radius.circular(topLeft),
// topRight: Radius.circular(topRight),
// bottomLeft: Radius.circular(bottomLeft),
// bottomRight: Radius.circular(bottomRight));
copied to clipboard



Text Helpers #


TextDesigned Widget: #
It is a Text Widget simplification.

//HELPER
TextDesigned(
"Hello",
size: 20,
bold: true,
underline: true,
color: Colors.white,
);
/*
Text(
"Hello",
style: TextStyle(
fontSize: 20,
color: Colors.white,
fontWeight: FontWeight.bold,
decoration: TextDecoration.underline,
),
);*/
copied to clipboard



Themed Text Widgets: #
Text Widgets with the TextTheme Style.

//HEADLINES
Headline1("Hi");
//Text("Hi", style: Misc.textTheme(context).headline1);
Headline2("Hi");
//Text("Hi", style: Misc.textTheme(context).headline2);
Headline3("Hi");
//Text("Hi", style: Misc.textTheme(context).headline3);
Headline4("Hi");
//Text("Hi", style: Misc.textTheme(context).headline4);
Headline5("Hi");
//Text("Hi", style: Misc.textTheme(context).headline5);
Headline6("Hi");
//Text("Hi", style: Misc.textTheme(context).headline6);


//SUBTITLES
Subtitle1("Hi");
//Text("Hi", style: Misc.textTheme(context).subtitle1);
Subtitle2("Hi");
//Text("Hi", style: Misc.textTheme(context).subtitle2);


//BODYTEXTS
BodyText1("Hi");
//Text("Hi", style: Misc.textTheme(context).bodytext1);
BodyText2("Hi");
//Text("Hi", style: Misc.textTheme(context).bodytext2);


//OTHER
Overline//Text("Hi");
//Text("Hi", style: Misc.textTheme(context).overline);
Caption//Text("Hi");
//Text("Hi", style: Misc.textTheme(context).caption);
Button//Text("Hi");
//Text("Hi", style: Misc.textTheme(context).button);
copied to clipboard



Widgets Helpers #


SlidingBottomSheet Widget: #
Create a SlidingBottomSheet like a AlertDialog.
This widget is similar than sliding_up_panel package.

//EXAMPLE
conxtext.navigator.pushNoTransition(
SlidingBottomSheet(builder: (_, __) => SlidingBottomSheetContainer(height: 600)),
);
copied to clipboard



SlidingBottomSheetContainer Widget: #
Useful for entering content to the SlidingBottomSheetPage [builder]

//WIDGET RETURN THAT
return ClipRRect(
borderRadius: borderRadius,
child: Container(
height: height,
width: double.infinity,
child: child,
padding: padding,
decoration: BoxDecoration(boxShadow: boxShadow, color: color),
),
);
copied to clipboard



RemoveScrollGlow Widget: #
Eliminate the Splash Effect or Glow Effect when reaching the limit of a PageView, ScrollView, ListView, etc.

//WIDGET RETURN THAT
return NotificationListener<OverscrollIndicatorNotification>(
onNotification: (OverscrollIndicatorNotification overscroll) {
overscroll.disallowGlow();
return;
},
child: PageView(...),
);
copied to clipboard



DismissKeyboard Widget: #
Tapping on a Widget will apply the FocusScope to it and hide the keyboard.

//WIDGET RETURN THAT
return GestureDetector(
onTap: () {
FocusScopeNode focus = FocusScope.of(context);
if (!focus.hasPrimaryFocus) focus.requestFocus(FocusNode());
},
child: child,
);
copied to clipboard



SizeBuilder Widget: #
It works like the LayoutBuilder but only returns the maxWidth and maxHeight

//EXAMPLE
SizeBuilder(builder: (width, height) {
return Container(
width: width,
height: height,
color: Colors.red,
);
});

/*WIDGET RETURN THAT
return LayoutBuilder(builder: (context, constraints) {
return Container(
width: constraints.maxWidth,
height: constraints.maxHeight,
color: Colors.red,
);
});*/
copied to clipboard



ExpandedSpacer Widget: #
It is used as a spacer within a [Row] or [Column].

//EXAMPLE
Column(children: [
Expanded(child: Icon(Icons.chevron_left)),
ExpandedSpacer(),
ExpandedSpacer(),
Expanded(child: Icon(Icons.chevron_right)),
])

//WIDGET RETURN THAT
//return Expanded(child: SizedBox());
copied to clipboard



ExpandedAlign Widget: #
It is normally used for icons or texts within a [Row].

//EXAMPLE
Row(children: [
ExpandedTap(
onTap: () => print("CANCEL"),
child: Center(
child: TextDesigned(
"CANCEL",
color: Colors.white,
bold: true,
),
),
),
ExpandedTap(
onTap: () => print("OK"),
child: Center(
child: TextDesigned(
"OK",
color: Colors.white,
bold: true,
),
),
),
])

/*WIDGET RETURN THAT
return Expanded(
child: GestureDetector(
onTap: onTap,
child: child,
),
);*/
copied to clipboard



ExpandedAlign Widget: #
It´s an [Align] wrapped inside an [Expanded].

//EXAMPLE
Row(children: [
ExpandedAlign(
alignment: Alignment.centerLeft,
child: TextDesigned(
"CANCEL",
color: Colors.white,
bold: true,
),
),
ExpandedAlign(
alignment: Alignment.centerRight,
child: TextDesigned(
"CANCEL",
color: Colors.white,
bold: true,
),
),
])

/*WIDGET RETURN THAT
return Expanded(
child: Align(
alignment: alignment,
child: child,
),
);*/
copied to clipboard



SplashTap Widget: #


//WIDGET RETURN THAT
return Material(
type: MaterialType.transparency,
child: Ink(
decoration: BoxDecoration(color: color, shape: shape),
child: InkWell(
child: child,
onTap: onTap,
customBorder: shape == BoxShape.circle ? CircleBorder() : null,
),
),
);
copied to clipboard



SplashButton Widget: #


//WIDGET RETURN THAT
return DecoratedBox(
decoration: BoxDecoration(
color: Colors.transparent,
shape: shape,
borderRadius: shape != BoxShape.circle ? borderRadius : null,
boxShadow: boxShadow,
),
child: ClipRRect(
borderRadius: borderRadius,
child: SplashTap(
onTap: onTap,
color: color,
shape: shape,
child: Padding(
padding: padding,
child: child,
),
),
),
);
copied to clipboard



TileDesigned Widget: #


//WIDGET RETURN THAT
return ClipRRect(
borderRadius: borderRadius,
child: SplashTap(
onTap: onTap,
color: background,
child: Container(
padding: padding,
child: Row(children: [
if (prefix != null) prefix,
if (child != null) child,
if (suffix != null) suffix
]),
),
),
);
copied to clipboard



SafeAreaColor Widget: #
Used to create your own AppBar

//EXAMPLE
Column(children: [
SafeAreaColor(
color: Colors.white,
height: 60,
child: Center(TextDesigned("APP BAR", bold: true)),
),
ExpandedSpacer(),
Container(
height: 60,
color: Colors.white,
width: double.infinity,
child: Center(TextDesigned("BOTTOM NAV", bold: true)),
),
])

/*WIDGET RETURN THAT
return Container(
color: color,
width: width,
child: SafeArea(
child: Container(
height: height,
child: child,
),
),
);*/
copied to clipboard


AnimatedInteractiveViewer Widget: #
It is an InteractiveViewer with enhanced double tap zooming.

//EXAMPLE
AnimatedInteractiveViewer(
child: Image.network(
"https://avatars0.githubusercontent.com/u/65832922?s=460&u=67f908b168ae2934f9e832af2180825c6b2f0e37&v=4"),
),
copied to clipboard



Transition Helpers #


BooleanTween Widget: #
It is an AnimatedBuilder. If it is TRUE, it will execute the Tween from begin to end (controller.forward()), if it is FALSE it will execute the Tween from end to begin (controller.reverse())
IT IS THE CORE OF ALL TRANSITIONS.


//EXAMPLE
bool animate = true;

BooleanTween<Color>(
animate: animate,
tween: ColorTween(begin: Colors.blue, end: Colors.red),
builder: (_, color, __) => Container(color: color),
);
copied to clipboard



OpacityTransition Widget: #
Show or hide a Widget with an Fade Transition from a Boolean variable.

//EXAMPLE
bool visible = true;

OpacityTransition(
visible: visible,
child: Container(),
);
copied to clipboard



SwipeTransition Widget: #
Show or hide a Widget with an Slide Transition from a Boolean variable.

//EXAMPLE
bool visible = true;

SwipeTransition(
visible: visible,
direction: SwipeDirection.fromTop,
child: Center(child: TextDesigned("Swipe Transition", bold: true)),
),
copied to clipboard



TurnTransition Widget: #
Turn a Widget with a Boolean variable.

//EXAMPLE
bool turn = true;

TurnTransition(
turn: turn,
child: Icon(Icons.chevron_left),
);
copied to clipboard