Flutter icon implementation

Flutter icon implementation

Posted on by Toma Velev

You can have an implementation of an icon like a profile photo with a number (a profile photo with a small circular badge overlay in the bottom-right) in Flutter by using a Stack with a Positioned widget. Here’s a complete example 👇:

✅ Flutter Implementation Example

import 'package:flutter/material.dart';

class ProfileWithAlertIcon extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Stack(
        clipBehavior: Clip.none,
        children: [
          // Profile image
          CircleAvatar(
            radius: 40,
            backgroundImage: AssetImage('assets/profile.jpg'), // your image
          ),

          // Positioned alert badge
          Positioned(
            bottom: -2,
            right: -2,
            child: Container(
              padding: EdgeInsets.all(6),
              decoration: BoxDecoration(
                color: Colors.red.shade600,
                shape: BoxShape.circle,
              ),
              child: Icon(
                Icons.error_outline,
                color: Colors.white,
                size: 20,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

📌 Explanation

  • Stack allows you to place widgets on top of each other.
  • CircleAvatar is used for the profile image.
  • Positioned places the badge icon relative to the avatar.
  • Container with BoxDecoration gives you the red circular background.

💡 Bonus: Using a Network Image

If your image comes from the internet:

CircleAvatar(
  radius: 40,
  backgroundImage: NetworkImage('https://example.com/user.jpg'),
),