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

Xiaocai today built a very ugly [check-in] small page, the page is very simple, only a few controls, but xiaocai would like to learn the use of weight/proportion through this simple small page, by the way also learned how to draw circular effect.

Draw a circular

In order to make the page a little more beautiful, He decided to use circles instead of normal buttons. He found that Flutter offered a lot of convenient ways to draw circles, much more convenient than Android. The following two dishes were used in the side dish test:

ClipOval

ClipOval is a very powerful control for clipping children to oval or rounded corners; Child controls have no special restrictions. At the same time, several other cutting methods are derived:

  1. CustomClipper: You can create custom clipping methods.
  2. ClipRect: Can be tailored to different width/height ratios, processed by the heightFactor attribute;
  3. ClipRRect: Can set rounded rectangle or circle;
  4. ClipPath: can be any shape clipping mode;
New ClipOval(child: new SizedBox(width: 100.0, height: 100.0, // child control for network image child: new Image.network("https://... Pic.jpg ", fit: boxfit.fill,), // Child controls for Container // child: new Container(color: Colors. RedAccent,),),),), // borderRadius: Const BorderRadius. All (const Radius. Circular (30.0)), Child: new Container(width: 90.0, height: 90.0, color: Color.red,),),), // The heightFactor is the high/wide ratio new ClipRect(child: new Align(alignment: Child: Alignment. TopCenter, heightFactor: 1.0, the new Container (color: Colors, yellow, height: 90.0, width: 90.0,),),)Copy the code
CircleAvatar

Xiaolai thinks that the CircleAvatar is the most convenient way to draw perfect circles. The control that Flutter provides to draw circles can add background colors and images. In addition, when loading network pictures, only the background color is displayed when the network status is not good or the pictures have problems, which is more humanized.

// only the backgroundColor new CircleAvatar(backgroundColor: Colors. GreenAccent, radius: 90.0), // add the background image new Align(alignment: Alignment.center, child: new CircleAvatar( backgroundImage: new NetworkImage("https://... Pic.jpg "), backgroundColor: Colors. GreenAccent, radius: 90.0,),Copy the code

Weight/ratio

Xiaocai in the Android development process in order to adapt to different models, commonly used to weight Android :weight, so in the distribution of the layout plays an important role; Weight is not directly found in a Flutter. A Flutter uses Row and Column to set up its horizontal and vertical layout. The side dish found that the weight/ratio can be handled in the following way.

Flexible

Flexible defaults to allow child controls to fill the entire parent class layout. The flex property in Flexible can be adjusted. If two Flexible controls A and B are Flexible, set flex to 2 and Flex to 1. In the entire layout, A:B=2:1 occupies the entire layout.

New Row(children: <Widget>[new Flexible(child: new Container(color: Colors. RedAccent, height: 40.0,), Flex: 1,), New Flexible(Child: New Container(color: Colors. BlueAccent, height: 40.0,),],),Copy the code
Expanded

Expanded lets child controls fill the entire parent layout by default. The Flex property in Expanded is 1, and Expanded inherits Flexible. Expanded supports the same way of dividing layout weights, while Flexible, unlike Flexible, fills the layout with child controls by default.

New Row(children: <Widget>[new Expanded(child: new Container(color: Colors. RedAccent, height: 40.0,), Flex: 2,), New Expanded(Child: new Container(color: Colors. BlueAccent, height: 40.0,), flex: 1,),),Copy the code

Both Expanded and Flexible side dishes are recommended to rely on Row and Column. Small dish test, both use together will not be too big impact.

The main source

class ItemSignPage extends StatelessWidget { @override Widget build(BuildContext context) { return new Container( child: New Column(children: <Widget>[new Container(height: 10.0,), new Flexible(Child: new Container(child: New Row(children: <Widget>[new Flexible(Child: new Container(), Flex: 1,), new Container(width: 16.0, height: BlueAccent,), new Container(width: 1.0, color: Colors. Colors.blueAccent, ), new Flexible( child: new Container( child: BuildListData (context, color.fromargb (40, 50, 40, 80),), flex: 1,), new Flexible(Child: new Container( child: new Row(children: <Widget>[ new Flexible( child: new Container( child: BuildListData (context, colors.greenaccent,), flex: 1,), new Container(width: 16.0, height: 1.0, color: Colors. BlueAccent,), new Container(width: 1.0, color: Colors. BlueAccent,), new Container(width: 16.0, height: 1.0,), New Flexible(Child: new Container(), Flex: 1,),), New Container(height: 60.0, child: New Center(child: new Text(' please check in ', style: new TextStyle(color: color.blue, fontSize: 16.0),),),),); } Widget buildListData(BuildContext context, Color color, String text) { return new Center( child: New GestureDetector(Child: new CircleAvatar(backgroundColor: color, RADIUS: 72.0, Child: new Text(Text, style: New TextStyle(color: color.blue, fontSize: 18.0),), onTap: () {showDialog(context: context, builder: (BuildContext context) {return new AlertDialog(title: new Text(' warm prompt ', style: new TextStyle(color: BuildContext); Black54, fontSize: 18.0,),), content: new Text(' you click on the item content: $Text '),); }); },),); }}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