GitLocker: The Coding Marketplace

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