feat: Make legend interactive by allowing drill-down on tap

Author: fabiocarneiro

README.md

@@ -22,7 +22,7 @@ A powerful, interactive, and highly customizable Circle Pack Chart (Circular Tre
   - **Anti-Scaled Consistency:** Labels maintain a constant visual size on screen regardless of the zoom level.
   - **Visibility Toggle:** Control whether values are shown inside circles using the `showValue` flag.
 - **✨ Dynamic Opacity:** Automatically scales child circle opacity based on their relative values, visually highlighting more important data points.
-- **📋 Dynamic Legend:** Includes a built-in vertical legend component that automatically updates to reflect labels and display values of the currently focused level.
+- **📋 Interactive Legend:** Includes a built-in vertical legend component that automatically updates to reflect labels and display values. Tapping a legend item triggers a drill-down into that category.
 
 ## 📦 Installation
 

example/pubspec.lock

@@ -108,7 +108,7 @@ packages:
       path: ".."
       relative: true
     source: path
-    version: "2.0.0"
+    version: "2.0.1"
   flutter_lints:
     dependency: "direct dev"
     description:

lib/flutter_circle_pack_chart_legend.dart

@@ -34,34 +34,48 @@ class FlutterCirclePackChartLegend extends StatelessWidget {
             ),
             ...children.map((node) {
               final Color color = node.color ?? parentColor;
-              return Padding(
-                padding: const EdgeInsets.symmetric(vertical: 4.0),
-                child: Row(
-                  mainAxisSize: MainAxisSize.min,
-                  children: [
-                    Container(
-                      width: 14,
-                      height: 12, // Slightly wider for a "pill" or just 12x12
-                      decoration: BoxDecoration(
-                        color: color.withValues(alpha: 0.8),
-                        borderRadius: BorderRadius.circular(4),
+              final bool canDrill = node.children.isNotEmpty;
+
+              return InkWell(
+                onTap: canDrill ? () => controller.drillDown(node) : null,
+                borderRadius: BorderRadius.circular(8),
+                child: Padding(
+                  padding: const EdgeInsets.symmetric(vertical: 6.0, horizontal: 8.0),
+                  child: Row(
+                    children: [
+                      Container(
+                        width: 14,
+                        height: 12,
+                        decoration: BoxDecoration(
+                          color: color.withValues(alpha: 0.8),
+                          borderRadius: BorderRadius.circular(4),
+                        ),
                       ),
-                    ),
-                    const SizedBox(width: 12),
-                    Text(
-                      node.label,
-                      style: Theme.of(context).textTheme.bodyMedium?.copyWith(
-                        fontWeight: FontWeight.w500,
+                      const SizedBox(width: 12),
+                      Expanded(
+                        child: Text(
+                          node.label,
+                          style: Theme.of(context).textTheme.bodyMedium?.copyWith(
+                                fontWeight: FontWeight.w500,
+                              ),
+                        ),
                       ),
-                    ),
-                    const Spacer(),
-                    Text(
-                      node.displayValue ?? node.value.toStringAsFixed(0),
-                      style: Theme.of(context).textTheme.bodySmall?.copyWith(
-                        color: Colors.grey,
+                      Text(
+                        node.displayValue ?? node.value.toStringAsFixed(0),
+                        style: Theme.of(context).textTheme.bodySmall?.copyWith(
+                              color: Colors.grey,
+                            ),
                       ),
-                    ),
-                  ],
+                      if (canDrill) ...[
+                        const SizedBox(width: 8),
+                        Icon(
+                          Icons.chevron_right,
+                          size: 14,
+                          color: Colors.grey.withValues(alpha: 0.5),
+                        ),
+                      ],
+                    ],
+                  ),
                 ),
               );
             }),