HydroLoader

Posted 11/06/2025 by Tim Northrop

I'm working on a Flutter app and needed better liquid progress bars/loaders than what's available on pub.dev, so yesterday, I wrote a Flutter package called hydro_loader in the time I had between a midterm and applying for jobs.

I am definitely not a UX designer; in fact, I could be considered the opposite with a concentration in systems, but I enjoy building things to use in my larger projects. Stay tuned for more info on what I've been working on.

Dart and Flutter make it extremely easy to publish your own packages on pub.dev. To get a verified publisher page, too, all I had to do was verify ownership of my domain, timnorthrop.com.

Below is a video of a brief demonstration. The source code for the demo app shown can be found on GitHub. The package repository can be found here, and the package page/documentation can be found on pub.dev here.

HydroLoader is highly customizable to fit your app's look: the available arguments can be seen here:

HydroLoader(
  progress: 0.5,
  max: 1.0,
  numWaves: 3, // optional
  waveSpeed: 100.0, // optional
  waveMagnitude: 50.0, // optional
  wavePeriod: 100.0, // optional
  waveHeightOffset: 20.0, // optional
  waveMagnitudeOffset: 8.0, // optional
  wavePeriodOffset: 20.0, // optional
  opacity: 240, // optional
  fillDirection: 'right', // optional
  backgroundColor: theme.colorScheme.primaryContainer, // optional
  waveColor: theme.colorSchem.onPrimaryContainer, // optional
  waveColorTintOffset: 25.0, // optional
  borderColor: Colors.transparent, // optional
  borderWidth: 2.0, // optional
  borderRadius: 32.0, // optional
),

Now, Flutter developers can execute the command:

and then use the following import statement to use the HydroLoader widget in their code:

Keep checking back at Switchboard for more open source contributions more closely linked to my areas of expertise.

- Tim