An overview of the

When you click on a component, it creates a ripple effect of water. Android has a similar effect in the MaterialButton, Image, InkSplash, InkRipple, InkResponse, InkDecoration, InkHighlight. Some of Flutter are components and some are effects. Some of them are attributes.

Ink

Ink is constructed as follows:

  Ink({
    Key? key,
    this.padding,
    Color? color,
    Decoration? decoration,
    this.width,
    this.height,
    this.child,
  }) 
Copy the code

The biggest difference between Ink and Container is that with InkWell, Ink can show the effect of clicking on water ripples, while Contaier has no clicking effect. Ink is similar to Container, but has fewer parameters than Container. If you do not specify the parameters, you are advised to use Container. Ink is usually used with InkWell, mainly to set the style of InkWell. The decoration is the same as the decoration in Container. Use the BoxDecoration. If the BoxDecoration is not clear, you can see the explanation of Flutter-Container.

The effect instructions
No decoration
Set rounded corners using decoration
The use of the Container

Looking at the renderings, you can’t really see how InkWell clicks with Containers. When using decoration to set rounded corners, although the shape of the button is rounded, the diffusion range of water ripples is still rectangular. The diffusion range of water ripples is rounded matrix. In InkWell, the arc of the rounded corners of the borderRadius is set to be consistent with that of the rounded corners in decoration. When setting the color in decoration, do not set the color in InkWell, otherwise an error will be reported.

InkWell, InkResponse

class InkWell extends InkResponse {... }Copy the code

InkWell completely inherits InkResponse, without any attributes of its own, but with fewer attributes than InkResponse. It is estimated that those attributes are not commonly used, so InkWell is relatively simple, which leads to more use of InkWell. InkResponse is used relatively sparingly. InkResponse is constructed as follows:

  const InkResponse({
    Key? key,
    this.child,
    this.onTap,
    this.onTapDown,
    this.onTapCancel,
    this.onDoubleTap,
    this.onLongPress,
    this.onHighlightChanged,
    this.onHover,
    this.mouseCursor,
    this.containedInkWell = false.this.highlightShape = BoxShape.circle,
    this.radius,
    this.borderRadius,
    this.customBorder,
    this.focusColor,
    this.hoverColor,
    this.highlightColor,
    this.overlayColor,
    this.splashColor,
    this.splashFactory,
    this.enableFeedback = true.this.excludeFromSemantics = false.this.focusNode,
    this.canRequestFocus = true.this.onFocusChange,
    this.autofocus = false,})
Copy the code

The following table describes the attributes:

attribute instructions
child Child components
onTap Click on the
onTapDown Press the
onTapCancel Click cancel
onDoubleTap Double click on the
onLongPress Long press
onHighlightChanged High brightness color changes
onHover Hover change
mouseCursor The cursor
containedInkWell Range of cutting
highlightShape High bright color shape
radius Water ripple radius
borderRadius Border radian
customBorder A border
focusColor Focus on the color
hoverColor Hover color
highlightColor High light
overlayColor Cover color
splashColor A scatter of color
splashFactory Splash shape
enableFeedback Whether feedback
excludeFromSemantics Delete semantics or not
focusNode The focus of nodes
canRequestFocus Whether focus can be requested
onFocusChange Changes in focus
autofocus Automatic focus capture

Many direct translation for these attributes is not smooth, it is not clear, there is no intuitive renderings, the following is the effect of some attributes

  • onTap

Click event. When the user clicks on this component, onTap is called, usually within onTap for click event processing.

  • onTapDown

To be precise, this method will be called when the user clicks and the mobile phone touches the screen. It is usually used to monitor the user’s actions to perform complex interactions, such as special effects, games, animation and calculation.

  • onTapCancel

Click Cancel, when the user clicks on the screen, the finger does not leave the screen, then regrets, do not want to carry out the current operation, slide the finger at will after release, this method will be called, indicating that the click is cancelled, invalid.

  • onDoubleTap

Double click, two consecutive clicks, as short as possible, at which point the method will be called.

  • onLongPress

The method is called when you hold down the finger and hold it on the screen for a while. -highlightColor, onHighlightChanged, highlightShape when setting a highlightColor, onHighlightChanged will be called when clicked.

When set in InkWell:

When set in InkResponse:

The comparison shows that when the consent property is set in different components, the effect is different. Rectangle = rectangle rectangle = rectangle rectangle = rectangle rectangle = rectangle rectangle = rectangle rectangle = rectangle rectangle = rectangle rectangle = rectangle rectangle

The effect is similar to That of InkWell, because InkWell’s highlightShape (which cannot be set in InkWell) is BoxShape.rectangle, whereas InkResponse’s highlightShape defaults to BoxShape.circle. The difference in effect is mainly the difference in BoxShape shape.

  • HoverColor, onHover

The hover state is initiated when the user pauses over an interactive element with the cursor. They can be applied to all interactive components and should be diluted to avoid distracting from the content. It can be applied to an entire component, an element within a component, or as a circular shape on a part of the component. The hover state can be inherited by buttons, toggle buttons, select controls, grid list items, list items, cards, chips, text fields, and ICONS. There is no obvious effect here so I can’t show it, so I need to study it carefully later.

  • mouseCursor

Cursor style, the functions that MaterialStateMouseCursor clickable, and of course MaterialStateMouseCursor. Textable choice, is primarily a click the cursor, one is the text cursor.

  • SplashColor, splashFactory

When you set the splashColor to Colors. Red in InkWell, the splashFactory will have different effects:

attribute The effect
InkSplash.splashFactory
InkRipple.splashFactory

The difference between InkSplash. SplashFactory and InkRipple. SplashFactory may lie in how the water ripples start and end.

  • containedInkWell

This property cannot be set in InkWill, but is set to true when inheriting InkResponse, which defaults to false:

attribute The effect
true
false

When containedInkWell is set to true, water ripples outside the container are clipped; when false, they are not clipped.

  • The radius, borderRadius

Radius indicates the radius of water ripples. BorderRadius is the InkWell or InkResponse border rounded corner. When set, the water ripple spreads to the corner and is cut into a radian instead of a right Angle:

attribute The effect
The radius: 22.0
The radius: 66.0
BorderRadius: borderRadius circular (16.0), the radius: 66.0

The radius of water ripples varies with radius values. BorderRadius needs to watch the second and third images carefully to see if the four corners show up with a gray, right-angled background when clicked. If so, it’s not set. If not, it’s set.

  • customBorder

A border.

  • overlayColor

Overlay color. Overlay is the translucent overlay on an element that shows its status. Overlay provides a systematic way to visualize state using opacity. An overlay can be applied to the entire element or in a circular shape. The overlay color matches the color of the text or icon on the element to which it is applied. If the text or icon changes color during a state change, the overlay should match the color of the end state. Apply only one state layer at a time. For example, if an element is first focused and then hovered, the hover state layer will only show that the hover is complete, then return to the focus state layer if the element is still in focus. The details are not available yet.

  • enableFeedback

Default is false, there is no feedback, sometimes clicking the button requires the phone to vibrate, that’s what it means.

  • FocusNode, canRequestFocus, onFocusChange, Autofocus

These are literal meanings that require no explanation.

InkFeature, ink. image, InkSplash, InkRipple, InkDecoration, InkHighlight

  • InkDecoration inherits InkFeature and is decorated in Ink.
    if (_ink == null) { _ink = InkDecoration( decoration: widget.decoration, configuration: createLocalImageConfiguration(context), controller: Material.of(context)! , referenceBox: context.findRenderObject()! as RenderBox, onRemoved: _handleRemoved, ); }else{ _ink! .decoration = widget.decoration; _ink! .configuration = createLocalImageConfiguration(context); }Copy the code

InkDecoration directly package the decoration set in Ink and add some configurations.

  • Ink.image

Ink.image is a configuration in decoraton that decorates images for inks.

  Ink.image({
    Key? key,
    this.padding,
    required ImageProvider image,
    ImageErrorListener? onImageError,
    ColorFilter? colorFilter,
    BoxFit? fit,
    AlignmentGeometry alignment = Alignment.center,
    Rect? centerSlice,
    ImageRepeat repeat = ImageRepeat.noRepeat,
    bool matchTextDirection = false.this.width,
    this.height,
    this.child,
  })
Copy the code

Note that the DecorationImage specified by ink. image and the image in BoxDecoration are exactly the same, and the usage is the same. If you are not sure, refer to Flutter-Container for details.

  • InkSplash, InkRipple, InkHighlight

InkSplash, InkRipple, and InkHighlight all inherit from InteractiveInkFeature, while InteractiveInkFeature inherits from InkFeature. Therefore, InkSplash, InkRipple and InkDecoration all belong to Ink decoration. With InkRipple splashFactory as an example

class _InkRippleFactory extends InteractiveInkFeatureFactory {
  const _InkRippleFactory(a);
  
  @override
  InteractiveInkFeature create({
    required MaterialInkController controller,
    required RenderBox referenceBox,
    required Offset position,
    required Color color,
    required TextDirection textDirection,
    bool containedInkWell = false,
    RectCallback? rectCallback,
    BorderRadius? borderRadius,
    ShapeBorder? customBorder,
    double? radius,
    VoidCallback? onRemoved,
  }) {
    returnInkRipple( controller: controller, referenceBox: referenceBox, position: position, color: color, containedInkWell: containedInkWell, rectCallback: rectCallback, borderRadius: borderRadius, customBorder: customBorder, radius: radius, onRemoved: onRemoved, textDirection: textDirection, ); }}.../// Used to specify this type of ink splash for an [InkWell], [InkResponse]
  /// or material [Theme].
  static constInteractiveInkFeatureFactory splashFactory = _InkRippleFactory(); .Copy the code

Therefore, InkSplash and InkRipple are the concrete implementations of InkSplash. SplashFactory and InkRipple. SplashFactory mentioned above. The factory pattern is one of the most common design patterns in Java, which defines an interface to create an object and lets its subclasses decide which factory class to instantiate. The factory pattern delays the creation process to subclasses and mainly solves the problem of interface selection. The factory method pattern can be used anywhere complex objects need to be generated. Complex objects are suitable for using the factory pattern, whereas simple objects can be created simply by constructing objects without using the factory pattern. If you use the factory pattern, you need to introduce a factory class, which adds complexity to the system.

note

IButton, BottomNavigationBar, CalendarDatePicker, DataTable, NavigationRail, Stepperden, etc. used InkResponse or InkWell in Flutter. So many components also have a water ripple effect.

There are some mistakes, omissions and inaccuracies in this article. Criticism and correction are welcome.