Fancy Progress Indicators in Flutter🎯 — without Custom Paint

Let’s Write some Code Now! 👩‍💻

Okay, so now that we know enough about masking we can write some code to get the basic structure of indicator working.

  1. shaderCallback
  2. child
  1. startAngle — Angle in Radians where the Gradient Should Start
  2. endAngle — Angle in Radians where the Gradient should End
  3. alignment
  4. colors — List of colors for Gradient from start to end angle.
  5. stops — List of stops for each color in the List of “colors”
Using Radial Scale Image
Using Circular dots Image

Voilà!!😎

We now have an Audio Waveform Progress Indicator which looks something like this….

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Paras Jain

Paras Jain

Mobile Application and Web Developer | @Youtube Content Creator | Worship #reactjs #flutter #java #dart | youtube.com/retroportalstudio