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

Small dishes continue to organize some personal attention but very useful small function points, may also be familiar to everyone, just for the future use of easy to find.

Opacity: 1

In the past, Xiao CAI used to set the width and height of the Widget to 0 when dealing with Opacity of the Widget, which was not a good way. By chance, I learned that Opacity of the Widget can be handled by handling transparency.

Opacity can be set between 0.0 and 1.0 to make the child controls transparent. For 0.0 child controls it is almost never drawn, and for 1.0 it is drawn immediately without an intermediate buffer. This approach is more efficient than adding and removing child controls directly from widgets.

Opacity must be between 0.0 and 1.0, similar to Visible and inVisible on Android.

Widget childOpacityWid(BuildContext Context) {return new Column(children: <Widget>[new Opacity(Opacity: 1.0, child: New Container(height: 80.0, color: Colors. Blue, child: new Center(child: New Text(' current opacity = 1.0')))), new opacity (opacity: 0.0, child: new Container(height: 80.0, color: Colors. Green, child: new Center(child: new Text(' current opacity = 0.0')))), new opacity (opacity: 0.5, child: New Container(height: 80.0, color: Colors. RedAccent, child: new Center(child: new Text(' current opacity = 0.5'))))]); }Copy the code

2. The Chip label

Xiaokai used to customize the tags using Row in combination with other widgets, but learned that Chip not only saves a lot of time, but also works well. A Wrap streaming layout solves many problems.

Const Chip({Key Key, this.avatar, // left icon @required this.label, // Label content, This. LabelStyle, // tag style this.labelPadding, // tag margin this.deleteIcon, // deleteIcon, configure this. You must call delete icon. This will not be visible until deleteIconColor, / / delete icon color enclosing deleteButtonTooltipMessage, / / delete icon in the message. This shape, / / shape, mainly is the label style, Including this rounded corners. ClipBehavior = Clip. None, enclosing backgroundColor, / / background color. This padding, / / the whole label padding enclosing materialTapTargetSize, }) Widget childChipWid(var string, var state) {Widget childChip; If (state == 1) {childChip = Chip(label: Text(string, style: new TextStyle(fontSize: 16.0)), deleteIcon: Icon(Icons. Clear, color: color.black12), labelPadding: edgeinset.fromltrb (6.0, 0.0, 6.0, 0.0),); } else if (state == 2) {childChip = Chip(label: Text(string, style: new TextStyle(fontSize: Icons. Clear, color: color.black12), labelPadding: EdgeInsets. FromLTRB (2.0, 0.0, 2.0, 0.0), Shape: Round Border: Borderradius.circular (3.0)), onDeleted: () {},); } else {// Add front icon style childChip = Chip(label: Text(string, style: new TextStyle(fontSize: 16.0)), Avatar: Icon(Icons.search), deleteIcon: Icon(Icons.clear, color: Colors.black12), labelPadding: EdgeInsets. FromLTRB (10.0, 0.0, 10.0, 0.0), onDeleted: () {},); } return childChip; }Copy the code

Tips: If deletion ICONS are displayed, be sure to implement the onDeleted:(){} method, otherwise they are not displayed.

3. Color Color

Color is a property that every developer is familiar with, and that must be used by all developers. Flutter provides many ways to set colors.

Colors way

Flutter provides many convenient color values that can be used directly; Most color values are in increments of 100 from 100 to 900, with smaller numbers being lighter and larger numbers being darker. Key samples (e.g. RedAccent) only have values of 100/200/400/700.

Colors.redAccent,
Colors.red[200],
Colors.red,
Colors.red[800],
Copy the code

There is also a range of black and white with the usual opacity. For example: black54 is pure black with 54% opacity.

Colors.black54,
Colors.black87,
Copy the code
Color way

Android development uses hexadecimal values, which are also supported by Flutter. Take #EE5048 as an example:

  1. ARGB hexadecimal: 0x stands for hexadecimal and is split. The first parameter is transparency.
Color.fromARGB(0xFF, 0xEE, 0x50, 0x48)
Copy the code
  1. ARGB base 10: use the same as the hexadecimal system, but need to convert to base 10 numbers one by one;
Color.fromARGB(255, 240, 80, 72)
Copy the code
  1. RGBO hexadecimal mode: the last parameter is between 0.0 and 1.0 transparency;
Color. FromRGBO (x50 0 xee, 0, 0 x48, 1.0)Copy the code
  1. RGBO 10 base system: use the same as the upper 16 base system;
Color. FromRGBO (240, 80, 72, 1.0)Copy the code
  1. Use hexadecimal directly: simply add 0x to represent hexadecimal;
Color(0xFFEE5048)
Copy the code

Tips: After 0x, you need to set transparency FF (completely opaque) or some other transparency. If you do not set transparency, the default is full transparency.

4. Wrap Text

Text is an everyday Widget that can be used to create different styles depending on the properties. The side dish mainly tries the effect of line breaks.

  1. softWrap: false

When there is only one line of content and the width exceeds the maximum value, whether to automatically wrap a line. The value is true and the value is false. 2. Overflow: TextOverflow. When you do not wrap a line, the default truncation exceeds the content. 3. Overflow: TextOverflow. Fade has only one line of content. When multi-line display is set, the bottom of the last line is slightly transparent. 4. Overflow: TextOverflow. Ellipsis has only one line of content. Instead of; When more than one line is set, the final content begins with… Display. But at present in the small dish research, unable to set like Android… In the middle or running horselight effect, if there is a great god understand also please give more advice.

Widget childTextWid(BuildContext Context) {return ListView(children: <Widget>[Container(height: 50.0, color: Colors. Green, child: Padding(Padding: EdgeInsets. All (5.0), child: Text('Text test, over content wrap! Hello, How are you? Black54, child: Padding(Padding: EdgeInsets. All (5.0), child: color: color. Text('Text test, no line break over content! Default automatic truncation, Hello, How are you? Container(height: 50.0, color: Colors. Black38, child: Padding(Padding: EdgeInsets. All (5.0), child: Text('Text test, if the content is over, no line break! ', Windows: false, overflow: Textoverflow.clip), Container(height: 50.0, color: Colors. RedAccent, Child: Padding(Padding: EdgeInsets. All (5.0), the child: Text('Text test, over content without a line! Gradient hidden, Hello, How are you?Hello, How are you? Textoverflow.fade)), Container(height: 50.0, color: color.blue, child: Padding(Padding: EdgeInsets. All (5.0), child: Text('Text test, not newline over content! Ellipsis style, Hello, How are you?Hello, How are you? Textoverflow.ellipsis)), Container(color: color.blueGrey, child: Padding(Padding: EdgeInsets. All (5.0), child: Text('Text test, over content newline! Set the gradient hidden beyond the number of lines, Hello, How are you?Hello, How are you?Hello, How are you?Hello, How are you?Hello, How are you?Hello, How are you?', SoftWrap: true, maxLines: 2, Overflow: textoverflow.fade)), Container(color: color.brown, height: 50.0, child: The Padding Padding: EdgeInsets. All (5.0), the child: Text('Text test, over content newline! Set the gradient hidden beyond the number of lines, Hello, How are you?Hello, How are you?Hello, How are you?Hello, How are you?Hello, How are you?Hello, How are you?', softWrap: true, maxLines: 2, overflow: TextOverflow.ellipsis))), ], ); }Copy the code

5. BoxConstraints layout constraints

In order to make it easier to fit, crease uses Expanded equalized size instead of fixed size. In this case, crease wants to fill the middle part of the Image instead of stretching it. Image BoxFit doesn’t work very well. Padding is based on the maximum and minimum width and height of the parent layout.

Widget childBoxImgWid(BuildContext context) {
  return Column(
    children: <Widget>[
      Expanded(
          flex: 1,
          child: ConstrainedBox(
            child: Image.asset(
              'images/icon_hzw01.jpg', fit: BoxFit.cover,
            ),
            constraints: new BoxConstraints.expand(),
          )),
      Expanded(
          flex: 1,
          child: ConstrainedBox(
            child: Image.asset(
              'images/icon_hzw02.jpg', fit: BoxFit.cover,
            ),
            constraints: new BoxConstraints.expand(),
          )),
      Expanded(
          flex: 1,
          child: ConstrainedBox(
            child: Image.asset(
              'images/icon_hzw03.jpg', fit: BoxFit.cover
            ),
            constraints: new BoxConstraints.expand(),
          )),
    ],
  );
}
Copy the code

Widget childBoxImgWid(BuildContext context) {
  return Column(
    children: <Widget>[
      Expanded( flex: 1,
          child: Image.asset('images/icon_hzw01.jpg', fit: BoxFit.cover)),
      Expanded( flex: 1,
          child: Image.asset('images/icon_hzw02.jpg', fit: BoxFit.cover)),
      Expanded( flex: 1,
          child: Image.asset('images/icon_hzw03.jpg', fit: BoxFit.cover))
    ],
  );
}
Copy the code

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