🙋‍♂️ I'm an IconToo!

An extended Icon "too" for those that are not actually square, plus 👥 shadows support.

WORK IN PROGRESS

+ 🗜️ extension IconUtils on Icon

Screenshot preview of Icon Example appScreenshot preview of Icon Example app

... because Flutter's native Icon "assumes that the rendered icon is squared" and that "non-squared icons may render incorrectly."

const IconToo(IconData icon, {Key? key, 🕳️, double? sizeX, double? sizeY,
    Color? color, List<Shadow>? shadows, AlignmentGeometry? alignment,
    String? semanticLabel, TextDirection? textDirection})

🕳️

Deprecated. Adopt doubles sizeX and sizeY.

Size? trueSize

Builds an Icon-akin widget set inside a SizedBox constrained by sizeX and sizeY with given icon data.

Customize with 🎨 color, which defaults to IconTheme.of, or optional 👥 shadows, a List<Shadow> like TextStyle.shadows.

The AlignmentGeometry and textDirection are handled, but may be overridden if necessary.

Replete with proper Semantics and debug Propertys.

NOTE: All the boxes are checked as far as the parameters for which a standard Icon looks and the accessibility & debug features they offer.

As a design choice, the super Icon receives this IconToo's initialized sizeX ?? sizeY, if any, as Icon.size.

  • This assignment behavior can be reversed to sizeY ?? sizeX by using the IconToo.tall constructor.

SEE ALSO: Icon, for a description on what an "Icon" is and some requirements to deploy that Widget or an 🙋‍♂️ IconToo.

IconToo as IconButton:

final wideButton = IconButton(
  icon: const IconToo(
    CustomIcons.non_square_icon,
    // IconToo passes `fontSize: min(trueSize.width, trueSize.height)`,
    // the shortest side (here: height), to glyph-rendering TextStyle:
    sizeX: 34.0 * 5.0, // Glyph is 5 times wider than tall
    sizeY: 34.0,
  ),
  // But the max(), or longest side, is needed to ensure an
  // IconButton has a diameter that encompasses the entire IconToo:
  iconSize: 34.0 * 5.0, // IconToo.asSize.longestSize
  onPressed: () {},
);

Example App

See some example usage of the icon package:

🗜️ Icon Utilities

Icon Example - Demo 3: 🗜️ Icon Operator Utilities: /example/lib/demo3.dart

  • 📋 copyWith optional replacement values
  • 👆 operator >(VoidCallback onTap)IconButton
  • operator +(inflate)size += inflation
  • operator -(deflate)size -= deflation
  • operator *(dynamic operation)
    • operation is Colorcolor = operation
    • operation is doublesize *= operation
  • 🧦 operator &(dynamic padding)
    • padding is numEdgeInsets.all(padding)
    • padding is List<num> (length==2) ➡ EdgeInsets.symmetric(horizontal: padding[0], vertical: padding[1])
    • padding is List<num> (length==4) ➡ EdgeInsets.fromLTRB(padding[0], padding[1],padding[2], padding[3])

🗜️ IconToo Utilities

Icon Example - Demo 3: 🗜️ Icon Operator Utilities: /example/lib/demo3.dart

  • 📋 copyWith optional replacement values
  • 👆 operator >(VoidCallback onTap)IconButton
  • operator +(inflate)sizeX += inflation & sizeY += inflation
    • inflation is num: adds to sizeX & sizeY the same
    • inflation is List<num> (length==2): ramps X += inflation[0] & Y += inflation[1]
  • operator -(deflate)sizeX -= deflation & sizeY -= deflation
    • deflation is num: subtracts from sizeX & sizeY the same
    • deflation is List<num> (length==2): ramps X -= deflation[0] & Y -= deflation[1]
  • operator *(dynamic operation)
    • operation is Colorcolor = operation
    • operation is num: multiplies sizeX & sizeY the same
    • operation is List<num> (length==2): ramps X *= operation[0] & Y *=operation[1]
  • 🧦 operator &(dynamic padding)
    • padding is numEdgeInsets.all(padding)
    • padding is List<num> (length==2) ➡ EdgeInsets.symmetric(horizontal: padding[0], vertical: padding[1])
    • padding is List<num> (length==4) ➡ EdgeInsets.fromLTRB(padding[0], padding[1],padding[2], padding[3])

Nearly every IconToo operator works the same in IconUtils as well. The only differences (currently) are IconToo.+, IconToo.-, IconToo.*, all of which additionally (over IconUtils) accept a List<num> of length==2 where the first value applies to IconToo.sizeX and the second value to IconToo.sizeY.

Libraries

icon
🙋‍♂️ I'm an Icon Too!