Instagram Stories with Gradient Circle Image in Flutter

Instagram Stories have become a ubiquitous feature, allowing users to share fleeting moments and updates with their followers. In this tutorial, we’ll delve into the world of Flutter, exploring how to create Instagram Story-like widgets, starting with the basic avatar, then adding a border to indicate viewed stories, and finally, incorporating a gradient to signify active stories.

Step 1: Crafting the Basic Circle Avatar

Our journey begins with the fundamental building block — the circle avatar. Flutter provides the CircleAvatar widget, perfectly suited for displaying circular profile pictures. Let's get started:

CircleAvatar(
    radius: 50,
    backgroundImage: AssetImage(
        'assets/example-unsplash.jpg',
    ),
),

In this code snippet, we’ve provided a network image URL as the background image and set the radius to 50.0, feel free to customize these values to your liking.

Step 2: Adding the Unread Story Border

To differentiate unread stories, we’ll enclose the circle avatar within a container and add a border. Let’s modify our code:

Container(
  decoration: BoxDecoration(
    shape: BoxShape.circle,
    border: Border.all(
      width: 6,
      color: Colors.white.withOpacity(0.2),
    ),
  ),
  child: const CircleAvatar(
    radius: 50,
    backgroundImage: AssetImage(
      'assets/example-unsplash.jpg',
    ),
  ),
)

Here, we’ve wrapped the CircleAvatar in a Container and applied a Border decoration. The border color can be adjusted to a subtle gray tone to indicate viewed stories.

Step 3: Incorporating the Gradient for Active Stories

Finally, let’s add the signature gradient to indicate active stories. We’ll modify the container’s BoxDecoration and add padding instead of border width:

Container(
  padding: const EdgeInsets.all(6),
  decoration: const BoxDecoration(
    shape: BoxShape.circle,
    gradient: LinearGradient(
      begin: Alignment.topRight,
      end: Alignment.bottomLeft,
      colors: [
        Colors.purpleAccent,
        Colors.red,
        Colors.yellowAccent,
      ],
    ),
  ),
  child: const CircleAvatar(
    radius: 50,
    backgroundImage: AssetImage(
      'assets/example-unsplash.jpg',
    ),
  ),
)

We’ve introduced a LinearGradient with red and orange colors, simulating the Instagram story gradient. Adjust the colors and alignment to match your preferences.

Conclusion

With these steps, you’ve successfully replicated the essence of Instagram Stories in Flutter. Remember to customize colors, sizes, and gradients to align with your app’s design. If you have any questions or suggestions, feel free to leave a comment below. Let’s keep exploring the world of Flutter together, thank you!

Picking the Perfect Circular Images in Flutter