Twitter Spinner — Flutter

Welcome to this tutorial to create Twitter Spinner in Flutter

You can connect with me on Instagram

Let’s start by seeing our end goal-

Breaking down

Let’s break down the problem

• Draw a light blue bordered circle
• Draw a blue incomplete bordered circle
• Keep on rotating the incomplete bordered circle

Let’s solve problem 1

Problem 1: Draw a light blue bordered circle

Let’s check the output

What did we do?

• Created a CustomPaint widget
• Passed an implementation of CustomPainter to parameter painter
• Created a class named TwitterSpinnerPainter which inherits CustomPainter
• Use paint() method to draw the circle
• Use Paint object to define inner circle look
• Draw the inner circle on canvas
• Set shouldRepaint to false since there are no UI changes

Let’s solve problem 2

Problem 2: Draw a blue incomplete bordered circle

Let’s check the output

TwitterSpinnerPainter

What did we change?

• We added a constructor for TwitterSpinnerPainter and get the value of starting angle of incomplete circle
• Used Paint object to define outer incomplete circle look
• Initialized value of arcAngle, which defines how much of the circle is visible
• Draw the incomplete circle as an arc on canvas
• useCenter is set to false to avoid lines going to center
• shouldRepaint remains unchanged

Let’s solve problem 3

Problem 3: Keep on rotating the incomplete bordered circle

Let’s check the output

What did we change?

• Added a new TwitterSpinner widget(Stateful widget)
• Initialize AnimationController which controls the animation
• Add a Status listener, which restarts animation once it is completed
• Initialize startAngleAnimation with controller and a linear curve, which means the animation will be linear
• Starting the animation once all initializations are done
• Instead of passing a non-changing value of starting angle, we pass value from startAngleAnimation which increases linearly from 0 to 2 * pi
• 0 to 2 * pi will complete full rotation
• To make it efficient, we only repaint if the angle changes

Check the project here.

Thank you for staying till the end

More flutter spinner blogs-

Common bottom navigation bar made easy — Flutter

Flutter: Custom tab indicator for TabBar

Custom Spinner Tooltip — Flutter

Flutter — Custom Spinner Thumb

I will be posting more about flutter, so stay tuned :)

Gursheesh Singh - Chandigarh, Chandigarh, India | Professional Profile | LinkedIn

theboringdeveloper