helpers 1.0.5 copy "helpers: ^1.0.5" to clipboard
helpers: ^1.0.5 copied to clipboard

Published 3 years ago • verified publisherfelipemurguia.comDart 3 incompatible• Latest: 1.2.3
outdated
→

Metadata

Helpers is a tool that allows you to convert repetitive and tedious statements into easy-to-read and intuitive statements.

More...

helpers #

My other APIs #


Features #

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

Table of Contents #





Documentation #

Misc Helpers #

  • Misc Class: #

    It is a simplification of many instructions.
    double milliseconds = 200;

    //THEME
    Misc.theme(context);          //Helper
    Theme.of(context);

    Misc.textTheme(context);      //Helper
    Theme.of(context).textTheme;


    //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)

  • 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]

  • 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]


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

  • 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

  • BuildKey Class: #

    It is a simplification of the GlobalKey() statement.
    final GlobalKey key = GlobalKey();
    final BuildKey data = BuildKey(key);

    data.width;   //Helper
    //key.currentContext.size.width;

    data.height;  //Helper
    //key.currentContext.size.height;

    data.size;    //Helper
    //key.currentContext.size;

    data.context; //Helper
    //key.currentContext;

    data.state;   //Helper
    //key.currentState;

  • BuildRoute Class: #

    It is a simplification of BuildContext and Navigator statement.
    final BuildContext context;
    final Widget page;

    //REPLACE THAT: Navigator.push(context, page);
    context.to(page); 
    context.goBack();
    context.toReplacement(page);
    context.toAndRemoveUntil(page);
    context.toTransparentPage(page);
    context.toNamedAndRemoveUntil("/");
    context.toReplacement("/");

    //If you will use BuildRoute, then need navigatorKey
    MaterialApp(
      navigatorKey: BuildRoute.key, 
      home: App(),
    );

    //REPLACE THAT: Navigator.push(context, page);
    BuildRoute.to(page); 
    BuildRoute.goBack(); 
    BuildRoute.toReplacement(page); 
    BuildRoute.toAndRemoveUntil(page); 
    BuildRoute.toTransparentPage(page); //NOTE: Push a Route with transparent background
    BuildRoute.toNamedAndRemoveUntil("/"); 
    BuildRoute.toNamed("/");

---

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(...);

  • 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));


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,
      ),
    );*/

  • 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);


Widgets Helpers #

  • SlidingPanelPage Widget: #

    Create a SlidingPanel like a AlertDialog. This widget is using the sliding_up_panel package.
    //EXAMPLE
    openSlidingPanelPage(
      context,
      SlidingPanelPage(builder: (_, __) => SlidingPanelContainer(height: 600)),
    );

  • SlidingPanelContainer Widget: #

    Useful for entering content to the SlidingPanelPage [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),
      ),
    );

  • 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(...),
    );

  • 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,
    );

  • 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,
      );
    });*/

  • 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());

  • 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,
      ),
    );*/

  • 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,
      ),
    );*/

  • 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,
        ),
      ),
    );

  • 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,
          ),
        ),
      ),
    );

  • 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
          ]),
        ),
      ),
    );

  • 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,
        ),
      ),
    );*/

  • 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"),
    ),


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(
      animate: animate,
      tween: ColorTween(begin: Colors.blue, end: Colors.red),
      builder: (dynamic color) {
        return Container(color: color);
      },
    );

  • OpacityTransition Widget: #

    Show or hide a Widget with an Fade Transition from a Boolean variable.
    //EXAMPLE
    bool visible = true;

    OpacityTransition(
      visible: visible,
      child: Container(),
    );

  • 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)),
    ),

  • TurnTransition Widget: #

    Turn a Widget with a Boolean variable.
    //EXAMPLE
    bool turn = true;

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

← Metadata

46
likes
0
pub points
91%
popularity

Publisher

verified publisherfelipemurguia.com

Metadata

Helpers is a tool that allows you to convert repetitive and tedious statements into easy-to-read and intuitive statements.

Repository (GitHub)
View/report issues

License

unknown (license)

Dependencies

flutter, sliding_up_panel

More

Packages that depend on helpers

Back