Squircle Avatar #

A modern, highly customizable Squircle Avatar and shape widget for Flutter with built-in status badges, smooth superellipse curves, initials formatting, image support, gradients, and shadow effects.

Explore on Pub.dev • GitHub Repository • Report Issue • API Documentation

✨ Features #

• 🟣 Squircle Shape: Continuous rectangle / superellipse smooth corner geometry (inspired by iOS & modern design systems).
• 🔤 Initials Fallback: Automatic font scaling and formatting for user initials (e.g., "A", "JD").
• 🖼️ Image Support: Compatible with NetworkImage, AssetImage, MemoryImage, etc.
• 🟢 Status Indicator / Badge: Built-in online, offline, or custom status badge with configurable size, colors, borders, and positions.
• 🎨 Gradients & Shadows: Rich styling options including borders, box shadows, and linear gradients.
• 👆 Interactivity: Built-in onTap and onLongPress gesture handlers.
• 📦 SquircleContainer: Reusable container widget with squircle clipping and decorations.

📦 Installation #

Add squircle_avatar to your pubspec.yaml dependencies:

dependencies:
  squircle_avatar: ^1.0.1

Or run:

flutter pub add squircle_avatar

Import it in your Dart code:

import 'package:squircle_avatar/squircle_avatar.dart';

🚀 Usage Examples #

1. Basic Squircle Avatar with Initials & Online Badge #

SquircleAvatar(
  size: 48,
  initials: 'A',
  backgroundColor: const Color(0xFF8B5CF6),
  showBadge: true,
  badgeColor: const Color(0xFF4CAF50),
  onTap: () {
    print('Avatar tapped!');
  },
)

2. Squircle Avatar with Image #

SquircleAvatar(
  size: 56,
  image: NetworkImage('https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=150'),
  showBadge: true,
  badgeColor: Colors.green,
  badgeBorderColor: Colors.white,
  badgeSize: 14,
)

3. Gradient Avatar with Box Shadow #

SquircleAvatar(
  size: 50,
  initials: 'JD',
  gradient: const LinearGradient(
    colors: [Color(0xFF8B5CF6), Color(0xFFEC4899)],
    begin: Alignment.topLeft,
    end: Alignment.bottomRight,
  ),
  boxShadow: [
    BoxShadow(
      color: const Color(0xFF8B5CF6).withValues(alpha: 0.3),
      blurRadius: 10,
      offset: const Offset(0, 4),
    ),
  ],
)

4. Squircle Container Card #

SquircleContainer(
  padding: const EdgeInsets.all(20),
  gradient: const LinearGradient(
    colors: [Color(0xFF8B5CF6), Color(0xFF6366F1)],
    begin: Alignment.topLeft,
    end: Alignment.bottomRight,
  ),
  boxShadow: [
    BoxShadow(
      color: const Color(0xFF8B5CF6).withValues(alpha: 0.3),
      blurRadius: 16,
      offset: const Offset(0, 8),
    ),
  ],
  child: const Text(
    'Premium Squircle Card',
    style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
  ),
)

⚙️ Properties Reference #

SquircleAvatar #

💖 Support & Contribute #

If you like this package, please consider giving it a 👍 Like on pub.flutter-io.cn and a ⭐ Star on GitHub!

Contributions, bug reports, and feature requests are welcome at GitHub Issues.

📄 License #

This project is licensed under the MIT License - see the LICENSE file for details.