Hydra Logo


Build responsive widgets with ease. Define up to four different looks for the same widget. Every hydra can have different breakpoints which determines when an alternative should appear.


Achieving responsiveness can be a tedious task because of multiple factors like orientation, screen width and so on. Without a clear definition it's difficult to scale apps which heavily rely on responsiveness.

What does Hydra do?

  • Decides which widget it should show depending on your breakpoints
  • Automatically show the next matching widget, if there's no suitable alternative for the current breakpoint
  • Apply your ruleset (=behaviour) about switching widgets

What doesn't Hydra do?

  • Any "magical" scaling in the background (like font sizes)
  • Calculating different sizes/ constraints for your widget

How to use HydraWidget

BehaviourDefining breakpoints for switching between widgets. Awareness of orientation. Preferness when to use either smaller or bigger alternative, when no alternative fits between current breakpoints.
miniThe smallest widget. Size is relative depending on breakpoints.
smallBigger than mini. Size is relative depending on breakpoints.
mediumBigger than small. Size is relative depending on breakpoints.
largeBigger than medium. Size is relative depending on breakpoints.


Flutter widget which helps building responsive widgets