universal_widget 1.2.5

A universal widget that can be placed anywhere in your widget tree, with full support of animation & accessibility.

The Mighty UniversalWidget

I'm just so excited to introduce to you my superhero widget: UniversalWidget

You can find the package at: https://pub.dartlang.org/packages/universal_widget

• Changelog: https://github.com/mrgoonie/flutter_universal_widget/blob/master/CHANGELOG.md

Why?

With UniversalWidget, you will have full control with it in the widget tree.

I made this login animation with UniversalWidget in only 8 lines of code. If you want to know how to do it with Flutter, see this cool tutorial: https://blog.geekyants.com/flutter-login-animation-ab3e6ed4bd19

Write less, do more.

For example, instead of:

Positioned(
  top: 10,
  left: 20,
  child: Container(
    height: 50,
    padding: EdgeInsets.all(20),
    decoration: BoxDecoration(
      color: Colors.blueAccent,
      borderRadius: BorderRadius.circular(10)
    ),
    transform: Matrix4()..identity()
      ..translate(20, 40)
      ..rotation(45 * math.pi),
    child: Text("Hello World")
  )
)

copied to clipboard

You can write:

UniversalWidget(
  x: 20,
  y: 40,
  rotation: 45, // degrees
  top: 10,
  left: 20,
  height: 50,
  padding: EdgeInsets.all(20)
  color: Colors.blueAccent,
  borderRadius: BorderRadius.circular(10),
  child: Text("Hello World")
)

copied to clipboard

Much shorter, right? Not stop from that, it's more helpful than you think. Please continue reading the next paragraph.

Flexibility

Let's say I have a widget in red:

UniversalWidget myWidget = UniversalWidget(
  color: Colors.red
);

copied to clipboard

What if I want to change its color into BLUE when I pressed a button? Easy as pie:

RaisedButton(
  child: Text("Change Me!"),
  onPressed: (){
    myWidget.update(
      color: Colors.blue
    )
  }
);

copied to clipboard

Think about how you will do this with StatefulWidget, I bet it would cost you at least 20 lines of code. Now looks back...

There are a lot more features that can unlock the true power of UniversalWidget. Such as:

To manage the UniversalWidget's visibility:

myWidget.update(visible: false);
// turns its visibility on by: myWidget.update(visible: true);

copied to clipboard

You can even change the child widget of UniversalWidget:

myWidget.update(
  child: Text("Holy Shiettttt!")
);

copied to clipboard

Masking (clipping) the child widget of UniversalWidget by setting mask flag:

myWidget.update(
  mask: true,
  child: Text("Holy Shiettttt!")
);

copied to clipboard

Animation

I admit that AnimatedContainer does a good job. But UniversalWidget can do animation much better:

UniversalWidget myWidget = UniversalWidget(
  color: Colors.red,
  height: 50
);
// let animate it:
myWidget.update(
  duration: 0.5 // seconds
  color: Colors.blue
);

copied to clipboard

It's just simple like that!

Advanced Animation

Apply easing type to the animation, listen to the widget to see when the animation is finished, see the progress of the animation, or make the animation repeated. Here you go:

myWidget.update(
  duration: 0.5, // in seconds
  delay: 2, // in seconds - wait 2 seconds then play the animation
  height: 100,
  ease: Curve.elasticEaseOut, // or your can use Ease.elasticEaseOut, it's the same
  onComplete: (widget){
    print("I finished changing my height!");
  },
  onUpdate: (progress){
    print("Animation progress is $progress");
  }
);

copied to clipboard

If you want to repeat the animation 5 times:

myWidget.update(
  ...
  repeat: 5,
  ...
);

copied to clipboard

If you want the animation to play in reverse after it's finish: (like the way playing Yoyo in real life)

myWidget.update(
  ...
  yoyo: true,
  ...
);

copied to clipboard

If you want to repeat the animation forever:

myWidget.update(
  ...
  repeat: -1,
  ...
);

copied to clipboard

Combining "repeat" and "yoyo", you will have the animation go forward & backward forever:

myWidget.update(
  ...
  repeat: -1,
  yoyo: true,
  ...
);

copied to clipboard

To stop the widget from animation:

myWidget.killAllTweens();

copied to clipboard

Additional Animation Easing Types

Yes, UniversalWidget has more easing type than Flutter framework, it supports:

• Ease.backIn
• Ease.backOut
• Ease.backInOut
• Ease.slowMo
• Ease.sineIn
• Ease.sineOut
• Ease.sineInOut

Let play with it yourself! ;)

Accessibility

Let's take full control of your UniversalWidget, you can access to it everywhere, EVERYWHERE. (as long as it's still on your screen)

By give it a name:

UniversalWidget(
  name: "TheMightyWidgetEver",
  width: 100.0, height: 50.0
);

copied to clipboard

Now what if you want this widget to animate the height to zero when pressing on the button?

RaisedButton(
  child: Text("Collapse Me!"),
  onPressed: (){
    UniversalWidget.find("TheMightyWidgetEver").update(
      duration: 0.8,
      height: 0.0
    )
  }
);

copied to clipboard

Or just want to check for its properties:

UniversalWidget widget = UniversalWidget.find("TheMightyWidgetEver");
print(widget.get().width); // 100.0

copied to clipboard

Notes that the given name should be unique, if you have many UniversalWidget with the same name, only the latest one in the widget tree can be accessible by a name, the others won't. So please name it wisely.

Wait, there's more. If you want to check for the size of the widget, do this:

UniversalWidget(
  child: Text("Hello World!"),
  // because the widget size can only be calculated after the widget are build, you need to listen on this event:
  onWidgetBuilt: (context){
    print("My size is ${context.size}");
  }
);

copied to clipboard

Check whether the widget located on the screen:

UniversalWidget widget = UniversalWidget.find("TheMightyWidgetEver");
//...
print(widget.globalPosition);

copied to clipboard

Summary

Phewwww... that's it for now. Now you guys might understand why I called it "The Mighty Widget", not too brag, eh? Hopefully it will save you a bunch of time, as it's saving me right now.

If you have any feedback, or meet any troubles while using this widget, please feel free to reach me via this Github repo.

Happy Coding with Flutter guys! I'll be back.