Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

Continue to sort out the daily tips of Flutter.

1. CachedNetworkImage Caches images

For loading network pictures, adding a loading animation or adding a wrong picture when network pictures are abnormal will give users a good experience. At this time, CachedNetworkImage can help us solve this problem. CachedNetworkImage is a tripartite PUB library.

There are two properties in CachedNetworkImage that are important:

  1. Placeholder is the caching process while loading images, which can be dynamic loading or widgets or whatever;
  2. ErrorWidget is used to display network picture loading exceptions. You can customize the errorWidget.

Tips: When loading loading or default images, it is recommended to limit the size of loading and default images, so that the default image will not be larger than the loading network image.

Widget _cachedNetImgWid() { return Container( color: Colors.grey, child: Center( child: CachedNetworkImage( height: 300.0, the placeholder: Container (width: 50.0, height: 50.0, child: CircularProgressIndicator ()), errorWidget: Container(height: 300.0, child: image. asset('images/icon_wrong.jpg')), imageUrl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1544938569112&di=feeab11968f3870520482630563c4f54&i mgtype=0&src=http%3A%2F%2Fi1.hdslb.com%2Fbfs%2Farchive%2Fac5c906111130579c6909aae47f6656e20d0906b.jpg', ))); }Copy the code

2. TextInputAction Button at the bottom of the keyboard

Xiao CAI will operate the keyboard when using the TextField text box, for a good user experience. There will be different button styles in the lower right corner of the keyboard. For example, it is more convenient to display the search button after entering the search information on the search page. Consider the TextInputAction property to customize the display. Flutter provides 13 states, but it is important to note that some of them differentiate Between Android and iOS. Use Flutter with caution.

Widget _textFiledWid() {return Padding(Padding: EdgeInsets. All (10.0),child:ListView(children: <Widget>[Padding(Padding: EdgeInsets. All (8.0),child:Text(' done')), TextField(textInputAction: Textinputaction.done), paddING-right (padding-right: EdgeInsets. All (8.0),child:Text(' go'), TextField(TextInputAction: Textinputaction.go), Padding(Padding: EdgeInsets. All (8.0), Child :Text(' bottom right button -newline'), TextField(TextInputAction: Newline), Padding(Padding: EdgeInsets. All (8.0), Child :Text(' next'), TextField(TextInputAction: Next), PADDING-right (padding-right: EdgeInsets. All (8.0),child:Text(' search'), TextField(TextInputAction: Textinputaction.search), PADDING-right (PADDing-right: edgeinsets.all (8.0),child:Text(' send'), TextField(TextInputAction: Textinputaction.send), PADDING-back (PADDing-back: EdgeInsets. All (8.0),child:Text(' bottom right button-join '), TextField(TextInputAction: TextInputAction.join), ])); }Copy the code

3. DefaultTextStyle DefaultTextStyle

In the course of learning, Xiao CAI found a very convenient DefaultTextStyle, which is used to handle the unified text style of the current page. This is similar to customizing the style of text in Android.

DefaultTextStyle is the DefaultTextStyle used in the current page. If you need to adjust part of the style, you can directly set TextStyle. If you do not want to reuse the style, you can simply set inherit: False, but textAlign is not included in the effect.

Widget _childDefaultTextWid() { return new SafeArea( top: false, child: Scaffold( appBar: new AppBar( title: Text('DefaultTextStyle Demo'), ), body: DefaultTextStyle( style: TextStyle( color: Colors.blueGrey, wordSpacing: Center, child: Container(Child: ListView(children: <Widget>[Text("Ha Ha Ha! Default Text style "), Text("Ha Ha Ha! Default Text style "), style: TextStyle(color: RGB (51, 51, 51)) Colors.redAccent), textAlign: TextAlign.left), Text("Ha ha ha!", style: TextStyle(inherit: False), Text(" inherit ", style: TextStyle(inherit: false, color: color.grey))),))); }Copy the code

Eg. ExpansionTile

“ExpansionTile” is a Widget that expands further, as shown in the illustration.

Const ExpansionTile({Key Key, this.leading, // / / background color including extended space overall background color enclosing onExpansionChanged, / / extending listening state this. The children = const < widgets > [], / / extension space enclosing the trailing, InitiallyExpanded = false, // Expand when initializing}) : Assert (initiallyExpanded! = null), super(key: key);Copy the code

While ExpansionTile is convenient and fruitful, however, there are some limitations as follows:

  1. By default, the right arrow icon is fixed, including the animation rotation Angle, which cannot be directly adjusted and needs to be customized.
  2. Click to expand the area does not disappear, needs to be customized.

Widget _childExpanTileWid() {return new SafeArea(Child: Scaffold(appBar: appBar (title: Text(' extended Tile')), body: Container(Child: ExpansionTile(title: Text(' Icons '), leading: Icon(Icons. Adjust), backgroundColor: Colors.grey, onExpansionChanged: (bool) { _exState = bool; }, children: <Widget>[Container(decoration: BoxDecoration(borderRadius: borderRadius. Circular (3.0), color: Color.white), margin: EdgeInsets. All (5.0), Child: Column(children: <Widget>[Row(children: <Widget>[Padding(Padding: EdgeInsets. FromLTRB (10.0, 8.0, 0.0, 8.0), child: Text('1, 2, 3 ', style: TextStyle(color: color.blue, fontSize: Children: <Widget>[Padding(Padding: EdgeInsets. FromLTRB (10.0, 8.0, 0.0, 8.0), child: (color: color.blue, fontSize: 16.0))])])))); }Copy the code

5. Spacer placeholders

Spacer is a very powerful Widget that Xiaokai accidentally learned about. Spacer xiaokai’s understanding is that it is a placeholder component, so it is more intuitive to look directly at the renderings. Spacer creates an adjustable Spacer that can be used to adjust the spacing between widgets in Flex containers, such as rows or columns; Default Flex: 1.

Widget _childSpacerWid() {
  return new SafeArea(
      top: false,
      child: Scaffold(
          appBar: new AppBar(
            title: Text('Spacer Demo'),
          ),
          body: Column(children: <Widget>[
            Row(children: <Widget>[
              Text('Begin', style: TextStyle(color: Colors.redAccent)),
              Spacer(),
              Text('Middle', style: TextStyle(color: Colors.greenAccent)),
              Spacer(flex: 2),
              Text('End', style: TextStyle(color: Colors.blue))
            ]),
            Row(children: <Widget>[
              Text('Begin', style: TextStyle(color: Colors.redAccent)),
              Spacer(),
              Text('Middle', style: TextStyle(color: Colors.greenAccent)),
              Text('End', style: TextStyle(color: Colors.blue))
            ]),
            Row(children: <Widget>[
              Text('Begin', style: TextStyle(color: Colors.redAccent)),
              Text('Middle', style: TextStyle(color: Colors.greenAccent)),
              Spacer(flex: 2),
              Text('End', style: TextStyle(color: Colors.blue))
            ])
          ])));
}
Copy the code

If there is something wrong, I hope to point it out.

Source: Little Monk A Ce