feat(example): add labels to Selector view

example/edit_icon/lib/main.dart

@@ -45,11 +45,10 @@ class MyData extends ElementSelectorData {
   MyData(
       {Widget? Function(BuildContext)? builder,
       Key? key,
-      this.name,
+      String? name,
       required this.delegate})
-      : super(builder: builder, key: key);
+      : super(builder: builder, key: key, name: name);
 
-  final String? name;
   TrayIconImageDelegate delegate;
 }
 
@@ -101,6 +100,8 @@ class _HomeScreenState extends State<HomeScreen> {
         _setTrayIcon(element);
       },
       addTooltip: "Add new Image",
+      dimension: 150,
+      gap: 24,
       delegate: _delegate,
       onAddPressed: () async {
         FilePickerResult? result = await FilePicker.platform.pickFiles(

example/edit_icon/lib/view/element_selector/data.dart

@@ -1,11 +1,13 @@
 import 'package:flutter/widgets.dart';
 
 class ElementSelectorData {
-  ElementSelectorData({Widget? Function(BuildContext)? builder, Key? key}) {
+  ElementSelectorData(
+      {Widget? Function(BuildContext)? builder, Key? key, this.name}) {
     this.key = key ?? GlobalKey();
     this.builder = builder ?? (BuildContext context) => null;
   }
 
   late final Widget? Function(BuildContext) builder;
   late final Key key;
+  final String? name;
 }

example/edit_icon/lib/view/element_selector/selectable.dart

@@ -5,21 +5,23 @@ import 'package:flutter/material.dart';
 class Selectable extends StatefulWidget {
   const Selectable(
       {Key? key,
+      this.axis = Axis.vertical,
       this.isSelected = false,
       required this.dimension,
       this.gap = 8.0,
-      this.axis = Axis.vertical,
-      this.onTap,
+      this.label,
       this.child,
+      this.onTap,
       this.onRemove,
       this.timeToRemove = const Duration(milliseconds: 200)})
       : super(key: key);
 
-  final bool isSelected;
   final Axis axis;
-  final Widget? child;
-  final double gap;
+  final bool isSelected;
   final double dimension;
+  final double gap;
+  final String? label;
+  final Widget? child;
   final void Function()? onTap;
   final void Function()? onRemove;
   final Duration timeToRemove;
@@ -96,12 +98,8 @@ class _SelectableState extends State<Selectable> {
           ),
           if (_isSelected && widget.onRemove != null)
             Positioned.fill(
-                left: (widget.dimension -
-                        (widget.axis == Axis.horizontal ? widget.gap * 2 : 0)) *
-                    iconInsetFactor,
-                bottom: (widget.dimension -
-                        (widget.axis == Axis.vertical ? widget.gap * 2 : 0)) *
-                    iconInsetFactor,
+                left: widget.dimension * iconInsetFactor,
+                bottom: widget.dimension * iconInsetFactor,
                 child: Transform.scale(
                   scale: .6,
                   child: FloatingActionButton(
@@ -128,6 +126,22 @@ class _SelectableState extends State<Selectable> {
                         )),
                   ),
                 )),
+          if (widget.label != null)
+            Transform.translate(
+                offset: Offset(
+                    0,
+                    widget.dimension / 2 +
+                        (theme.textTheme.caption?.fontSize ?? 14) / 2 +
+                        8),
+                child: AnimatedOpacity(
+                    duration: widget.timeToRemove,
+                    curve: Curves.easeOut,
+                    opacity: widget.isSelected ? 1 : .6,
+                    child: Text(
+                      widget.label!,
+                      style: theme.textTheme.caption,
+                      textScaleFactor: 1.5,
+                    )))
         ],
       ),
     );

example/edit_icon/lib/view/element_selector/selector.dart

@@ -13,6 +13,7 @@ class ElementSelector extends StatefulWidget {
   const ElementSelector(
       {Key? key,
       this.dimension = 150,
+      this.gap = 24,
       this.axis = Axis.vertical,
       this.onSelectionChanged,
       this.onAddPressed,
@@ -23,6 +24,8 @@ class ElementSelector extends StatefulWidget {
   /// Edge length of a selectable child.
   final double dimension;
 
+  final double gap;
+
   /// Direction in which the elements are laid out.
   final Axis axis;
 
@@ -121,9 +124,9 @@ class _ElementSelectorState extends State<ElementSelector>
   Widget build(BuildContext context) {
     _controller = PageController(
         initialPage: _currentPage,
-        viewportFraction: widget.dimension /
+        viewportFraction: (widget.dimension + widget.gap * 2) /
             (widget.axis == Axis.vertical
-                ? (MediaQuery.of(context).size.height)
+                ? MediaQuery.of(context).size.height
                 : MediaQuery.of(context).size.width));
     return PageView.builder(
       allowImplicitScrolling: true,
@@ -161,6 +164,8 @@ class _ElementSelectorState extends State<ElementSelector>
               key: item.key,
               dimension: widget.dimension,
               onTap: animateHere,
+              gap: widget.gap,
+              label: item.name,
               onRemove: () async => await widget.delegate.removeAt(index),
               isSelected: isSelected,
               child: Padding(