This is the first day of my participation in the Gwen Challenge in November. Check out the details: the last Gwen Challenge in 2021

It has been said that everything about a Flutter is a Widget. Visible components of a Flutter are also very rich. This article introduces several of the little-mentioned but widely used controls that come with a Flutter.

SelectableText

SelectableTextCan achieve similar H5 in the long press to select text and copy the function of the component, with its own select copy function, and can specify whether to display the cursor and cursor color and other attributes.

Set cursor display and specify width, height, color, rounded corner style:

SelectableText(" small and useful components of Flutter ", showCursor: true, cursorColor: Colors. Green, cursorRadius: Radius.circular(5), cursorWidth: 5, cursorHeight: 30, style: TextStyle(fontSize: 22), )Copy the code

When text height can’t display, the default will be rolling effect, by setting the scrollPhysics: NeverScrollableScrollPhysics (), can also be banned them rolling effect.

SelectableText also comes with the onTap click event callback, which we can pass to get the click listen of the text. SelectableText also supports Rich Text, which works just like text.rich. This control is very useful in information and social applications.

ReorderableListView

The ReorderableListView can be used to implement drag-and-drop reordering of lists.

ReorderableListView( children: list.map((e) => Container( color: Colors.black12, padding: EdgeInsets.all(20), key: ValueKey(e), child: Text("$e",style: TextStyle(fontSize: 22)) )).toList(), onReorder: (oldIndex,newIndex){print(" $oldIndex to $newIndex "); },)Copy the code

The onReorder property is a drag-completed callback. The two parameters in the method are the position of the item before and after the drag. The other properties are basically the same as listView.

RotatedBox

RotatedBox is used to render the rotation of the control to the child component, where the quarterTurns property 1 means 1/4, and the quarterTurns property 2 means 2/4, meaning that Settings 1 and 5 have the same effect.

RotatedBox(quarterTurns:1,child: Text(" This is the effect with RotatedBox "),),Copy the code

The difference between RotatedBox and transform. rotate is that RotatedBox transforms during the drawing phase, which affects the size and position of the layout after component orientation changes. Here is the effect without setting the Angle:

This is the effect of rotating the text by 90 degrees at the same time. You can see that the width and height of the text with transform.rotate is unchanged, but the width and height of the text with RotatedBox is changed.

InteractiveViewer

The InteractiveViewer is a component that allows users to zoom in and out of an interface using gestures.

InteractiveViewer( child: Container( color: Colors.red, width: 300,height: 300, child: Font-size: 14px! Important! Important! Important! Important! Important! Important! Important! Important! Important! Important! Important! TextStyle(fontSize: 22),), ))Copy the code

Related attributes:

  • panEnabled: Whether to enable pan effect
  • scaleEnabled: Indicates whether to enable zoom
  • maxScale: Maximum zoom ratio, 2.5 by default
  • minScale: Minimum zoom ratio. Default: 0.8
  • alignPanAxis: Whether to pan only in the vertical or horizontal direction. If this parameter is set to true, it cannot pan along the diagonal direction.
  • onInteractionEnd: Callback at the end of panning or zooming gestures
  • onInteractionStart: a callback to the start of panning or zooming gestures
  • onInteractionUpdate: callback after panning gesture has started and gesture has been updated
  • transformationController: gesture zooming controller, usually needed to control panning zooming in code.

ShaderMask

ShaderMask can add a gradient effect to the control. The shaderCallback property can return either LinearGradient, RadialGradient, or SweepGradient.

ShaderMask(shaderCallback: (val){return RadialGradient(Center: Alignment. Center, radius: 1.0, colors: [Colors.blue,Colors.red],).createShader(val); }, blendMode: blendmode. srcATop, child: Text(" a small and useful component of Flutter ", style: TextStyle(fontSize: 32)),)Copy the code

ShaderMask(
  shaderCallback: (Rect bounds) {
    return LinearGradient(
      begin: Alignment.topCenter,
      end: Alignment.bottomCenter,
      colors: [Colors.blue,Colors.red],
    ).createShader(bounds);
  },
  blendMode: BlendMode.color,
  child: Image.asset(
    'assets/image/heart.png',
  ),
)
Copy the code