flutter_next 0.1.1

A flutter package for faster UI developement and provide responsiveness for flutter web applications and has multiple extensions.

Flutter Next

Now build flutter apps with ease and responsive.

An advanced flutter package to build responsive application accross all platform with ease and has an handful of different types of extension.

Features

• Develop Responsive Ui
• Add animations with single line
• Handful of extension

Usage/Examples

🔗 One Page

Appendix

• Widgets

  • Avatar
  • Hover Widget
  • BreadCumb
  • Alerts
  • Grid System
  • Next Grid
  • Container
  • Accordion
  • Button

• Animations

• Extensions

  • Widget Extensions
  • Context
  • Padding
  • String
  • Bool

• Shadows

Widgets

Avatar

  Text(
    "Avatar Group",
    style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
  ),
  SizedBox(
    height: 15,
  ),
  NextAvatarGroup(
      backgroundColor: Colors.orange,
      imagesList: List.generate(
          6,
          (index) => NetworkImage(
              "https://images.ctfassets.net/hrltx12pl8hq/qGOnNvgfJIe2MytFdIcTQ/429dd7e2cb176f93bf9b21a8f89edc77/Images.jpg?fit=fill&w=175&h=175&fm=webp"))),
  Text(
    "Custom Avatar Group",
    style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
  ),
  SizedBox(
    height: 15,
  ),
  NextAvatarGroup(
    backgroundColor: Colors.orange,
    itemCount: 6,
    widthFactor: 0.8,
    imagesList: List.generate(
        10,
        (index) => NetworkImage(
            "https://images.ctfassets.net/hrltx12pl8hq/qGOnNvgfJIe2MytFdIcTQ/429dd7e2cb176f93bf9b21a8f89edc77/Images.jpg?fit=fill&w=175&h=175&fm=webp")),
    itemBuilder: (context, index, image) => Stack(
      children: [
        Container(
          width: 50,
          height: 50,
          decoration: BoxDecoration(
              image: DecorationImage(image: image),
              border: Border.all(color: Colors.orange, width: 1.5),
              color: Colors.red,
              borderRadius: BorderRadius.circular(10)),
        ),
        if (index % 3 == 0)
          Positioned(
            bottom: 0,
            left: 0,
            child: CircleAvatar(
              backgroundColor: Colors.green,
              radius: 5,
            ),
          )
      ],
    ),
  ),
      Text(
        "Avatar Group Limit count",
        style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
      ),
      SizedBox(
        height: 15,
      ),
      NextAvatarGroup(
        backgroundColor: Colors.orange,
        limitTo: 5,
        imagesList: List.generate(
            10,
            (index) => NetworkImage(
                "https://images.ctfassets.net/hrltx12pl8hq/qGOnNvgfJIe2MytFdIcTQ/429dd7e2cb176f93bf9b21a8f89edc77/Images.jpg?fit=fill&w=175&h=175&fm=webp")),
        widthFactor: 0.5,
      )

copied to clipboard

Hover Widget

Using this you can know whether widget is hovered or not. Even it works for mobile and every device.

Hover Duration - Duration for returning from hover to normal state

  HoverWidget(
    builder:(context,isHovered)=>Container(child:....)
  )

copied to clipboard

BreadCumb

   NextBreadCumb(
      childrens: ["Home", "Dashboard", "Payment", "Checkout"]
          .map((e) => NextBreadCumbItem(child: (isHovered) => Text(e)))
          .toList()),
    SizedBox(height: 20),
    Text("With Custom Separator"),
    SizedBox(height: 10),
    NextBreadCumb(
        seperator: Text("---"),
        childrens: ["A", "B", "C", "D", "E", "F", "G", "H"]
            .map(
              (e) => NextBreadCumbItem(child: (isHovered) => Text(e)),
            )
            .toList()),

copied to clipboard

Additionally you can provide variant

• Wrap (If exceeds more than width then it will move to next line)
• Scroll (It will scroll horizontally)

Alerts

Define an alert by:

  NextAlert(
    child: Text("Yo, this is primary alert"),
    onClosedIconPressed: () {},
    margin: EdgeInsets.only(bottom: 15),
  ),

copied to clipboard

You can use multiple variant of alerts

  NextAlert(
    variant: NextVariant.secondary,
    child: Text("Yo, this is primary alert"),
    onClosedIconPressed: () {},
    margin: EdgeInsets.only(bottom: 15),
  ),

copied to clipboard

And you can even define custom,variant should be custom

 NextAlert(
    variant: NextVariant.custom,
    customConfigs: NextAlertColorUtils(
      borderColor: Colors.black,
      backgroundColor: Colors.pink,
      color: Colors.deepOrange,
    ),
    child: Text("Yo, this is primary alert"),
    onClosedIconPressed: () {},
    margin: EdgeInsets.only(bottom: 15),
  ),

copied to clipboard

Grid System

	Extra small <576px	Small ≥576px	Medium ≥768px	Large ≥992px	Extra large ≥1200px
Max container width	None (auto)	540px	720px	960px	1140px
Class prefix	col-	col-sm-	col-md-	col-lg-	col-xl-

NextRow(
  verticalSpacing: 15,
  horizontalSpacing: 15,
  children: [
    "col-12 col-md-6 col-lg-4",
    "col-12 col-md-6 col-lg-4",
    "col-12 col-md-3 col-lg-4 col-sm-6 col-xs-6",
    "col-12 col-md-3 col-lg-4 col-sm-6 col-xs-6"
  ]
      .map((e) => NextCol(
          sizes: e,
          child: Container(
            height: 100,
            decoration: BoxDecoration(color: Colors.orange),
            child: Center(
              child: Text(
                e,
                textAlign: TextAlign.center,
                style: TextStyle(color: Colors.white),
              ),
            ),
            width: double.infinity,
          )))
      .toList())

copied to clipboard

Next Grid

 NextGridView(
  sizes: "col-6 col-md-3 col-lg-4 col-xl-3 col-xs-6",
  childrens: List.generate(
      12,
      (index) => NextGridItem(
          child: Text(
                  "$index ${NextUtils.getPrefixByWidth(context.width)}")
              .center()
              .sizedBox(width: double.infinity, height: 100)
              .addDecoration(BoxDecoration(
                  color: Colors.orange,
                  borderRadius: BorderRadius.circular(8))))))

copied to clipboard

• Additionaly you can even provide vertical spacing or horizontal spacing and for each children you can even define separate sizes

NextGridItem(
  sizes: "col-12 col-md-6 col-lg-6",
  ....
)

copied to clipboard

Container

	Extra small <576px	Small ≥576px	Medium ≥768px	Large ≥992px	X-Large ≥1200px	XX-Large ≥1400px
Next Container	100%	540px	720px	960px	1140px	1320px

• If you pass fluid as true then it will take whole width

Accordion

 NextAccordion(
    initiallyExpanded: true,
    backgroundColor: Colors.white,
    collapsedBackgroundColor: Colors.white,
    title: Text("Hey this it title which is initially Expanded"),
    children: [
      Padding(
        padding: EdgeInsets.symmetric(vertical: 20, horizontal: 10),
        child: NextAlert(
          child: Text("Yo this is child"),
        ),
      )
    ],
  ),

copied to clipboard

Button

You can customise button by using itemBuilder

   NextButton(
    onPressed: () {},
    style: TextStyle(color: Colors.white),
    child: Text(
      "Filled Button",
      style: TextStyle(color: Colors.white),
    ),
  ),
  SizedBox(height: 20),
  NextButton(
    onPressed: () {},
    variant: NextButtonVariant.outlined,
    child: Text("Outline Button"),
  ),
  NextButton(
    onPressed: () {},
    variant: NextButtonVariant.outlined,
    itemBuilder: (context, isHovered, color) =>
        Icon(Icons.headset_rounded, color: color)
            .paddingSymmetric(horizontal: 20, vertical: 10)
            .decoration(BoxDecoration(
              border:
                  Border.all(color: context.primaryColor, width: 1.5),
              color: !isHovered ? context.primaryColor : Colors.white,
              borderRadius: BorderRadius.circular(8),
            )),
  )

copied to clipboard

• the param color in itemBuilder is a color tween between color and outline color provided in button

Animations

Available Animations

• Slide Animation
  • SlideInLeft
  • SlideInRight
  • SlideInTop
  • SlideInBottom
• Zoom Animation
  • ZoomIn
  • ZoomOut
• Fade Animation
  • FadeInLeft
  • FadeInRight
  • FadeInTop
  • FadeInBottom
  • FadeOutLeft
  • FadeOutRight
  • FadeOutTop
  • FadeOutBottom
• Flip Animation
  • Flipx
  • FlipY
• Bounce Animation
  • BounceInLeft
  • BounceInRight
  • BounceInTop
  • BounceInBottom

 Text("Fade In Animations").customPadding(bottom: 20),
  Row(
    mainAxisAlignment: MainAxisAlignment.spaceAround,
    children: [
      ContainerThing().fadeIn(
          variant: NextFadeInVariant.fadeInLeft,
          duration: Duration(milliseconds: 600)),
      ContainerThing().fadeIn(
          variant: NextFadeInVariant.fadeInTop,
          duration: Duration(milliseconds: 600)),
      ContainerThing().fadeIn(
          variant: NextFadeInVariant.fadeInBottom,
          duration: Duration(milliseconds: 600)),
      ContainerThing().fadeIn(
          variant: NextFadeInVariant.fadeInRight,
          duration: Duration(milliseconds: 600)),
    ],
  ),
  SizedBox(height: 20),
  Text("Fade out Animations").customPadding(bottom: 20),
  Row(
    mainAxisAlignment: MainAxisAlignment.spaceAround,
    children: [
      ContainerThing(
        color: Colors.red,
      ).fadeOut(
          variant: NextFadeOutVariant.fadeOutLeft,
          duration: Duration(milliseconds: 600)),
      ContainerThing(
        color: Colors.red,
      ).fadeOut(
          variant: NextFadeOutVariant.fadeOutTop,
          duration: Duration(milliseconds: 600)),
      ContainerThing(
        color: Colors.red,
      ).fadeOut(
          variant: NextFadeOutVariant.fadeOutBottom,
          duration: Duration(milliseconds: 600)),
      ContainerThing(
        color: Colors.red,
      ).fadeOut(
          variant: NextFadeOutVariant.fadeOutRight,
          duration: Duration(milliseconds: 600)),
    ],
  ),
  SizedBox(height: 20),
  Text("Flip Animations").customPadding(bottom: 20),
  Row(
    mainAxisAlignment: MainAxisAlignment.spaceAround,
    children: [
      ContainerThing(
        color: Colors.yellow,
      ).flip(
          variant: NextFlipVariant.flipX,
          duration: Duration(milliseconds: 600)),
      ContainerThing(
        color: Colors.yellow,
      ).flip(
          variant: NextFlipVariant.flipY,
          duration: Duration(milliseconds: 600)),
    ],
  ),
  SizedBox(height: 20),
  Text("Zoom Animations").customPadding(bottom: 20),
  Row(
    mainAxisAlignment: MainAxisAlignment.spaceAround,
    children: [
      ContainerThing().zoom(variant: NextZoomVariant.zoomIn),
      ContainerThing().zoom(variant: NextZoomVariant.zoomOut),
    ],
  )

copied to clipboard

Extensions

Widget Extensions

• Now you can add onTap function easily

Widget().onTap((){
  ....
})

copied to clipboard

• Double Tap

Widget().onDoubleTap((){
  ....
})

copied to clipboard

• On Long press

Widget().onLongPress((){
  ....
})

copied to clipboard

• And center your widget easily

Widget(
  child:...
).center()

copied to clipboard

• And for column/row/stack

[Widget1(),Widget2(),Widget3()].column(
  // Additionally you can provide mainAxis and remaining params here
)

copied to clipboard

• For decoration

Widget().addDecoration(BoxDecoration(
  // Add params here
))

copied to clipboard

• you can even use clipRRect,clipper,safearea etc...

Context

Now access themedata and mediaquery data easily like

  context.themeData
  context.textTheme
  context.buttonTheme
  context.snackBarTheme

copied to clipboard

Or if you want to develop responsive views w.r.t height and width

  context.height
  context.width

copied to clipboard

And for colors

  context.primaryColor
  context.backgroundColor
  context.canvasColor
  context.dividerColor

copied to clipboard

Padding

Instead of

Padding(
  padding: const EdgeInsets.all(20)
  child:Widget(
    child...
  )
)

copied to clipboard

You can use

Widget(
  child:...
).pad(20)
// Or
Widget(
  child:...
).paddingSymmetric(horizontal:20,vertical:12)
//or
Widget(
  child:...
).customPadding(left:10,right:12)

copied to clipboard

String

• We provide handful of string extensions
  • "string".capitalize() // Output is: String
  • "45".toInt() // Output is: 45
  • "45.4".toDouble() // Output is: 45.4
  • "flutter".isInt() //Output is: False
  • "flutter".isDouble() //Output is: False
  • "flutter".toDouble() //Output is: null

Bool

• false.toggle() //Output is true

Shadows

  ContainerThing(
    shadows: NextShadow.shadow100()
  ),

copied to clipboard

• Additionally you can provide customshadow color

  ContainerThing(
    shadows: NextShadow.shadow100(color:Colors.red)
  ),

copied to clipboard

🔗 Links

Contributions

• Contributions are always welcome
• Follow the linting