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.

The LinearGradient changes color linearly

In order to add a gradient background, we need to use LinearGradient.

  1. Setting gradients in the LinearGradient requires more than two colors to be effective;
  2. Set multiple colors. If no other Settings are set, the ratio of each color is 1:1:… : 1;
  3. Small dishes try if set the proportion, you can set several same color value, but this way is not very reasonable;
  4. You can adjust the position of gradient by setting begin and end.
  5. TileMode includes three states: Clamp is the default mode, automatic extension; Repeated results are recommended to be used together with begin and end. Mirror mirror effect, that is, symmetry effect.
  6. BoxDecoration cannot be used in the same process as the background color.

Widget _decorationWid() {return ListView(children: <Widget>[_childChangeWid(' color = 2 ', BoxDecoration(gradient: const LinearGradient( colors: [Color(0xFFFFC125), Color(0xFFFF7F24)]))), _childChangeWid(' Color = red ', BoxDecoration(gradient: const LinearGradient(colors: [Color(0xFFFFC125), Color(0xFFFF7F24), Color(0xFFFF4040)]))), _childChangeWid(' two colors 1:3', BoxDecoration(gradient: const LinearGradient(colors: [Color(0xFFFFC125), Color(0xFFFF7F24), Color(0xFFFF7F24)]))), BoxDecoration( gradient: const LinearGradient( begin: Alignment.topRight, colors: [Color(0xFFFFC125), Color(0xFFFF7F24)])), _childChangeWid, BoxDecoration(gradient: Const LinearGradient(begin: Alignment(-1.0, 0.0), end: Alignment(0.0, 0.0), tileMode: tileMode. Clamp, colors: [Color(0xFFFFC125), Color(0xFFFF7F24)]))), _childChangeWid(' double Color ', BoxDecoration(gradient: LinearGradient(begin: Alignment(-1.0, 0.0), end: Alignment(0.0, 0.0), tileMode: tileMode. Repeated, colors: [Color(0xFFFFC125), Color(0xFFFF7F24)])), _childChangeWid, BoxDecoration(gradient: Const LinearGradient(begin: Alignment(-1.0, 0.0), end: Alignment(0.0, 0.0), tileMode: tileMode. Mirror, colors: [Color(0xFFFFC125), Color(0xFFFF7F24)])), _childChangeWid(' start and end ', BoxDecoration(gradient: Const LinearGradient(begin: Alignment. TopLeft, end: Alignment(0.5, 0.0), tileMode: Alignment. Repeated, colors: [Color(0xFFFFC125), Color(0xFFFF7F24)])))] ); } Widget _childChangeWid(var des, Decoration childDec) {return Container(height: 60.0, alignment: Align.center, child: Text(des, style: TextStyle(color: colors.white, fontSize: 16.0)), margin: Const EdgeInsets. FromLTRB (8.0, 3.0, 8.0, 3.0), decoration: childDec); }Copy the code

2. PreferdSize Indicates the preferbar

Flutter provides AppBar by default, which gives us a lot of convenience. However, it is easy to adjust the height of the AppBar. The height of the AppBar can be set by nesting a PreferdSize layer.

AppBar: appBar (title: Row(children: <Widget>[Text(' titlebar height test - default '), Expanded(Flex: 1, Child: Icon(icons.add))])),Copy the code

AppBar: PreferredSize(child: appBar (title: Row(children: <Widget>[Text(' appBar height test-80.0 ')), Expanded(Flex: 1, child: Icon (the Icons. Add)))), preferredSize: Size. FromHeight (80.0)),Copy the code

3. Check whether SafeArea is in the immersive status bar

Xiaokai has dealt with the immersive status bar before and the effect is good, but sometimes you need to protect the status bar, so you need SafeArea to cooperate. Determine whether to protect the status bar by adjusting the bool attribute of SafeArea’s top. The bottom attribute can be tried on a test machine with a virtual return status bar.

Widget _childTopImgWid() {
  return new SafeArea(
      top: false,
      child: Scaffold(
          body: Container(
              color: Colors.blue, child: Image.asset('images/icon_top_bg.png'))));
}
Copy the code

Widget _childTopImgWid() {
  return new SafeArea(
      top: true,
      child: Scaffold(
          body: Container(
              color: Colors.blue, child: Image.asset('images/icon_top_bg.png'))));
}
Copy the code

4. CheckBox selection box

Use Checkbox for small dishes.

  1. By default, the Checkbox has only two states: “True” and “false”.
  2. Use activeColor to adjust the Checkbox selection color
  3. With tristate set to true, there can be three states: [checked true] [unchecked false] [value null]; If tristate is false, there can only be two states: “True” and “false”;
  4. The materialTapTargetSize is the target size and the layout size. By default, the materialTapTargetSize is padded and shrinkWrap. Note that Padded is recommended for Google’s design size of 48px by 48px, and shrinkWrap aims to shrink to the minimum size provided by Google’s design, but there is little difference in actual effect.

Checkbox is slightly different from Android in that the status box has no text content.

Checkbox(
    value: select,
    tristate: true,
    activeColor: Colors.pink,
    materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
    onChanged: (bool cb) {
      setState(() {
        select = cb;
      });
    })
Copy the code

5. BlendMode Image blending mode

Xiao CAI found an interesting attribute colorBlendMode when learning pictures. It can be used together with color when using Image to create many special effects, including chroma and tone, etc. There are many attributes, so it is recommended to try them more.

Widget _mixImgWid() { return Row(children: <Widget>[ Image.asset('images/icon_launcher.png', color: Color. RedAccent, width: 80.0, colorBlendMode: blendmode.modulate), Image. Asset ('images/icon_launcher. PNG ', color: Colors. RedAccent, width: 80.0, colorBlendMode: blendmode.colorburn), image. asset('images/icon_launcher. Colors. RedAccent, width: 80.0, colorBlendMode: blendmode. colorDodge), image. asset('images/icon_launcher. Colors. RedAccent, width: 80.0, colorBlendMode: BlendMode. Difference)]); }! [25-01.jpeg](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/735209ff92644d97a438dc239c312bda~tplv-k3u1fbpfcp-watermar k.image?) *** &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; If there is something wrong, I hope to point it out. > < p style = "max-width: 100%; clear: bothCopy the code