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

I have encountered many interesting little knowledge points during the learning of Flutter. I may not pay attention to some simple and direct small function points at ordinary times. I plan to compile a series of them for future reference and use.

1. InkWell water ripple effect

A lot of Android projects require a water ripple effect. Flutter also provides a similar effect. In addition to the FlatButton series, Flutter also provides an InkWell water ripple effect. For example, the overall effect is much better when used in the ListView item.

new Container( child: new InkWell( // highlightColor: Colors.red, splashColor: Colors.greenAccent, onTap: () { Scaffold.of(context).showSnackBar(new SnackBar( content: new Text('Tap'), )); }, child: Container(width: 120.0, height: 40.0, child: new Center),Copy the code
Matters needing attention:
  1. InkWell does not recommend adding background color to the inner and outer layers. InkWell’s default water ripple color is very light, and the background color will block the ripple effect.
  2. By changing splashColor: colors. greenAccent, you can dynamically change the color of the water ripple, but if you change highlightColor, you change the background color.
  3. Be sure to add InWell gesture trigger events such as onTap.

2. Stack Stack positions

Flutter does not provide the same rich layout styles as Android, and can only use Row/Column/Stack. However, Ai finds a useful attribute alignment when using Stack stacks. The default alignment is in the middle of the layout. The whole layout divides the 2d coordinate system of x/y axis with the central point. The horizontal axis increases from left to right/the vertical axis increases from top to bottom/the overall range is [-1,1]. Different points can be set to set the position of the control.

child: new ListView( children: <Widget>[ new Stack( alignment: AlignmentDirectional.topCenter, children: <Widget>[Container(height: 200.0, color: Colors. BlueGrey), the new Text (" AlignmentDirectional. TopCenter (0.0, 1.0) ", style: new TextStyle (color: Colors.white), ) ], ), new Stack( alignment: AlignmentDirectional.center, children: <Widget>[ Container( height: 200.0, the color: Colors. BlueAccent), the new Text (" AlignmentDirectional. Center (0.0, 0.0) ", style: new TextStyle (color: Colors.white), ) ], ), new Stack( alignment: AlignmentDirectional.bottomEnd, children: <Widget>[ Container( height: 200.0, the color: Colors. GreenAccent), the new Text (" AlignmentDirectional. BottomEnd (1.0, 1.0) ", style: New TextStyle(color: color.white),),), new Stack(alignment: alignment (-0.5, -0.5), children: <Widget>[Container(height: 200.0, color: color.redaccent,), new Text("AlignmentDirectional (-0.5, -0.5)", style: new TextStyle(color: Colors.white), ) ], ), ], ),Copy the code

3. IndexedStack effect

IndexedStack is a series of Stack arrays, with an index used to display the hierarchy. Xiao CAI feels that it will play a great role in dealing with explicit and implicit aspects.

Widget childIndexedStack(BuildContext Context) {return new IndexedStack(index: 1, // stand for children: <Widget>[ new Column( children: <Widget>[ new Icon(Icons.looks_one, color: Colors. BlueAccent), new Text(" first page ")],), new Column(children: <Widget>[new Icon(Icons. Looks_two, color: Colors. GreenAccent), new Text(" page 2 ")],), new Column(children: <Widget>[new Icon(Icons. Looks_3, color: Colors. RedAccent), new Text(" δΈ‰ι‘΅")],), new Column(children: <Widget>[new Icon(Icons. Looks_4, color: Colors. YellowAccent), new Text(" page 4 ")],)], alignment: align.center,); }Copy the code
Matters needing attention:
  1. Index defaults to 0, that is, the first Stack is displayed by default if the index attribute is not processed.
  2. Index starts from 0 and the number of layers increases. If the number of layers exceeds the maximum value or is negative, no display is displayed.

4. Table Layout

The usage of Table layout is basically the same as that of Android. Set TableRow for each line and add corresponding item. It is very convenient to add border border and set the basic style of border.

Widget childTableWid(BuildContext Context) { return new Table( border: new TableBorder.all( color: Colors. BlueAccent, Width: 1.0, style: BorderStyle. Solid), children: <TableRow>[New TableRow(children: <Widget>[new Text(" name ", textAlign: textalign.center, style: new TextStyle(fontSize: 18.0)), new Text(" address ", textAlign: Textalign.center, style: new TextStyle(fontSize: 18.0)]), new TableRow(children: <Widget> Textalign.center), new Text(" δΈ­ ε›½ 地 址 ", TextAlign: Textalign.center)]), New TableRow(children: <Widget>[new Text(" sun Wuhong ", textAlign: Textalign.center), new Text(" Beijing District ", textAlign: Textalign.center), new TableRow(children: <Widget> Textalign.center), New Text(" TextAlign: Textalign.center "), New TableRow(children: <Widget>[new Text(" shazeng ", textAlign: textalign.center), new Text(" Beijing Dongcheng-Beijing Dongcheng-Beijing Dongcheng-Beijing dongcheng-Beijing dongcheng-Beijing dongcheng-Beijing ", textAlign: TextAlign.center) ]) ], ); }Copy the code
Matters needing attention:

By default, each TableRow item must have the same number of neutrons in the Table; otherwise, an exception will be reported. If the cells need to be merged, the cells need to be customized.

5. Wrap

A small thing is that you need to customize the number of displays in a Row layout based on the length of the text content. Using Row and Column alone cannot achieve good results. In this case, we found that Flutter provides a powerful Wrap streaming layout that automatically sets the width of the display according to the required content, greatly reducing the development cost. It’s convenient and quick for everyday needs.

Widget childWrapWid(BuildContext Context) {return new Wrap(spacing: 10.0, direction: Axis. Horizontal, alignment: Wrapalign. start, children: <Widget>[new Text(" today hot button ", style: new TextStyle(fontSize: 16.0)), new Text(" news ", style: new TextStyle(fontSize: 16.0)), new Text(" politics ", style: new TextStyle(fontSize: 16.0)), new Text(" politics ", style: new TextStyle: 16.0)), the new Text (" I love Beijing, "style: new TextStyle (fontSize: 16.0)), the new Text (" praise", style: new TextStyle (fontSize: 16.0)), new Text(" topic +", style: new TextStyle(fontSize: 16.0)), new Text(" chat ", style: new TextStyle(fontSize: 16.0)), new Text(" chat ", style: new TextStyle(fontSize: 16.0)), new Text(" chat ", style: new TextStyle(fontSize: 16.0)), the new Text (" life little common sense, "style: new TextStyle (fontSize: 16.0)), the new Text (" joke", style: new TextStyle (fontSize: 16.0)), new Text(" weather forecast ", style: new TextStyle(fontSize: 16.0)), new Text(" major points ", style: new TextStyle(fontSize: 16.0)), new Text(" major points ", style: new TextStyle(fontSize: 16.0)), new Text(" major points ", style: new TextStyle(fontSize: 16.0)), new Text("ζ–° 小 δΊ‹ ", style: new TextStyle(fontSize: 16.0)),],); }Copy the code
Matters needing attention:
  1. Wrap content is horizontal by default. Change direction: Axis. Horizontal.
  2. When aligned horizontally, spacing is 10.0 and the attribute is horizontal item spacing; RunSpacing: 20.0, which is the spacing between each row; The opposite is true when it is arranged vertically.

Xiao CAI has not been in touch with Flutter for a long time, and there are still many unclear and ununderstood aspects. I hope to point out more if there are wrong aspects.

Source: Little Monk A Ce