Squircle

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

✨ Features

• 🟣 Squircle Shape: Continuous rectangle / superellipse smooth corner geometry.
• 🔤 Initials Fallback: Automatic font scaling and formatting for user initials.
• 🖼️ Image Support: Compatible with NetworkImage, AssetImage, MemoryImage, etc.
• 🟢 Status Indicator / Badge: Built-in online/offline badge with customizable size, colors, borders, and positions.
• 🎨 Gradients & Shadows: Rich styling options including borders, box shadows, and linear gradients.
• 👆 Interactive: Tap (onTap) and long-press (onLongPress) gesture callbacks built-in.
• 📦 SquircleContainer: Reusable container widget with squircle clipping and decorations.

---

📦 Installation

Add squircle_avatar to your pubspec.yaml dependencies:

dependencies:
  squircle_avatar: ^1.0.0

Or run:

flutter pub add squircle_avatar

Import it in your Dart code:

import 'package:squircle_avatar/squircle_avatar.dart';

---

🚀 Usage

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://example.com/avatar.png'),
  showBadge: true,
  badgeColor: Colors.green,
  badgeBorderColor: Colors.white,
)

3. Gradient Avatar

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).withOpacity(0.3),
      blurRadius: 8,
      offset: const Offset(0, 4),
    ),
  ],
)

4. Squircle Container Card

SquircleContainer(
  padding: const EdgeInsets.all(16),
  color: Colors.white,
  boxShadow: [
    BoxShadow(
      color: Colors.black.withOpacity(0.06),
      blurRadius: 10,
      offset: const Offset(0, 4),
    ),
  ],
  child: const Text('Hello Squircle!'),
)

---

⚙️ Properties

SquircleAvatar

Property	Type	Default	Description
size	double	40.0	Width and height of the avatar.
borderRadius	BorderRadius?	BorderRadius.circular(size * 0.7)	Squircle corner curve radius.
image	ImageProvider?	null	Avatar image to display.
initials	String?	null	Fallback text/initials if no image is given.
textStyle	TextStyle?	null	Style for the initials text.
backgroundColor	Color?	Theme primaryColor	Background fill color.
gradient	Gradient?	null	Background gradient.
border	BorderSide?	null	Border around the avatar.
boxShadow	List<BoxShadow>?	null	Shadows cast by the avatar.
showBadge	bool	false	Whether to display the status badge.
badgeColor	Color	Color(0xFF4CAF50)	Badge indicator background color.
badgeSize	double	12.0	Diameter of the badge indicator.
badgeBorderColor	Color	Colors.white	Border color around the badge.
badgeBorderWidth	double	2.0	Border width around the badge.
badgeAlignment	Alignment	Alignment.topRight	Position of the badge.
onTap	VoidCallback?	null	Tap event callback.

---

📄 License

MIT License. See LICENSE for details.