Flutter is a simple component, including SizeBox and FittedBox

SizeBox introduction

SizeBox is a box of specified size. It is used to limit the size of child controls. It can force child controls to have a specific width and height.

The sample code

Many of the effects in this article are not screenshots. Download the source code to run the project source code address, or view the video tutorial address through the video tutorial

When is SizeBox used?

We know that we can’t specify the width and height of a button, so if we want to customize the width and height of a button, we can use SizeBox to limit it.

SizeBox property and description

The SizeBox property is used in detail

1, width, height

Width specifies the box width, height specifies the box height

The complete code

import 'package:flutter/material.dart';

class SizeBoxExample extends StatefulWidget {
  @override
  _SizeBoxExampleState createState() => _SizeBoxExampleState();
}

class _SizeBoxExampleState extends State<SizeBoxExample> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("SizeBoxExample"),
      ),
      body: Container(
        child: SizedBox(
          width: 200.0,
          height: 300.0,
          child: Card(child: Text('Hello World! '))))); }}Copy the code

SzieBox method and description

1, expand ()

Create a box as large as possible

const SizedBox.expand({ Key? key, Widget? child })
  : width = double.infinity,
    height = double.infinity,
    super(key: key, child: child);
Copy the code

2, the shrink ()

Create an empty box

const SizedBox.shrink({ Key? key, Widget? child })
  : width = 0.0,
    height = 0.0.super(key: key, child: child);
Copy the code

3, fromSize ()

Creates a box of the specified size

SizedBox.fromSize({ Key? key, Widget? child, Size? size })
  : width = size?.width,
    height = size?.height,
    super(key: key, child: child);
Copy the code

FittedBox introduction

The FittedBox component is used to scale and align the child component when the content of the child component exceeds the size of the parent component.

FittedBox properties and description

The FittedBox property is used in detail

1, fit,

It is mainly used to adjust the scaling position of child components. There are altogether 7 kinds of position adjustment, namely, fill contain cover fitWidth fitHeight None scaleDown. Next, we will talk about what effect these seven attributes represent respectively.

1.1, the fill

The image fills the entire control with unequal scaling

1.2, contain

Scale to equal proportions until the height or width of the image fills the control

1.3, cover

Zoom in and out of the control until the width and height of the image fill the entire control, but this will result in an incomplete display.

1.4, fitWidth

Equal scale scale, full width

1.5, fitHeight

Equal scale scaling, full height

1.6, none

Zoom in unevenly, keep the original image size and center it

1.7, scaleDown

Contain layout if the size of the image is larger than the control, and None if the width and height of the image is smaller than the control

2, alignment,

Alignments are mainly used to set the alignment of subcomponents, which are described in more detail in the Flutter Depth and Simplicity sections Align and AnimatedAlign

3, clipBehavior

Clipping sub-component content, there are altogether four kinds of clipping content, namely None hardEdge antiAlias antiAlias withSavelayer. This attribute is mainly used in combination with Bezier curve. In the later drawing, to focus on the key point, here is a brief overview of the functions of the four attributes.

3.1, none

No pattern clipping, normal effect

3.2, hardEdge

Do not use anti-aliasing for editing

3.3, antiAlias

Use anti-aliasing for editing

3.4, antiAliasWithSaveLayer

Clip with anti-aliasing and save the layer immediately after the clip

conclusion

SizeBox is used to limit the size of child controls, such as the width and height of a button.

FittedBox is mainly used for zooming, alignment, and clipping of child controls.