The icon library of MaterialDesign

Material. IO/tools/ICONS…

Alibaba’s icon library

www.iconfont.cn/

IconData creates a specific font icon
const IconData( this.codePoint, // This. FontPackage,// this. MatchTextDirection = false,// Mirror enabled, left or right});Copy the code
Icons define a set of enumerated values of IconData that contain all the built-in Icons of Material Design
class Icons { Icons._(); static const IconData threesixty = IconData(0xe577, fontFamily: 'MaterialIcons'); static const IconData threed_rotation = IconData(0xe84d, fontFamily: 'MaterialIcons'); . }Copy the code
Font Icon
Const Icon (this Icon, / / IconData type, flutter, built a series of enumerated values using the Icons. XXX, or create IconData {Key Key, enclosing the size, / / the size of the Icon is displayed, fixed is square, Default 24, this.color,// icon color, if not set, default black icon this.semanticLabel,//? TextDirection,// the direction of the icon display, is left or right, IconData matchTextDirection is valid when true. MatchTextDirection defaults to false, so only setting textDirection is invalid})Copy the code

Example:

Icon(Icons. Accessible,),// Default is black Icon(Icons. Accessible,color: color.green,),// Set the Icons to green Icon(Icons. Accessible,color: Color.red,),// set the icon to redCopy the code

Icon(Icons. Accessible,color: Colors. Red,size: 10,),// Set the Icon size Icon(Icons. Color.red,),//size defaults to 24 Icon(Icons. Accessible,color: color.red,size: 30,),// Sets the Icon sizeCopy the code

Icon(IconData(0xe914, fontFamily: 'MaterialIcons',matchTextDirection: true),color: Colors.red,size: 30,textDirection: TextDirection.ltr,),
Icon(IconData(0xe914, fontFamily: 'MaterialIcons',matchTextDirection: true),color: Colors.red,size: 30,textDirection: TextDirection.rtl,),
Copy the code

ImageIcon

PNG images are displayed as ICONS, and the color can be changed

Const ImageIcon(this.image, //ImageProvider type used to load specific images {Key Key, This.size,// size this.color,// want to display the color this.semanticlabel,})Copy the code

ImageProvider is an abstract class whose subclasses include

  • AssetImage resource image
  • FileImage FileImage
  • NetworkImage NetworkImage
  • MemoryImage MemoryImage

Such as:

ImageIcon(AssetImage("images/img06.png"),size: 40,),// Displays AssetImage("images/img06.png"),color: Color.red,size: 40,),// Red ImageIcon(AssetImage("images/img06.png"),color: color.green,size: 40,),// greenCopy the code
IconButton IconButton
Button({Key Key, this.padding = const EdgeInsets. All (8.0), const IconButton({Key Key, this.padding = const EdgeInsets. this.alignment = Alignment.center, @required this.icon, this.color, This.highlightcolor,// Color this.splashColor when long pressed,// color this.disabledColor when not available @required This.onpressed,// this. TooltipCopy the code

Example:Flash color blue when clicked (ignore inner black circle, screenshot issue)The color after long press is greenLong press the prompt

IconButton(icon: icon (Icons. Accessible, color: color.green,), onPressed: () {},// Click to trigger method highlightColor: Color.green,// The color displayed when holding down the button splashColor: color.blue,// the color that blinks when clicking disabledColor: color.grey,// The color when not available tooltip: "SSS ",// long press prompt),Copy the code