Flutter's FittedBox control

Introduction

FittedBox is a control in Flutter that is used to resize its child controls to fit the available space. It will automatically scale or stretch according to the size of the child control and the size of the available space, so that the child control just fills the available space.

Attributes

Common properties of FittedBox include:

fit: An enumeration value specifying how the child control fits into the available space. Commonly used values ​​are:

BoxFit.contain: Scales or stretches the sub-control to the available space, maintaining the aspect ratio of the sub-control. If the child control size is smaller than the available space, it will be centered.
BoxFit.cover: Scales or stretches the sub-control to completely fill the available space, maintaining the aspect ratio of the sub-control. Child controls may be clipped.
BoxFit.fill: Stretches the child control to completely fill the available space, without maintaining the child control's aspect ratio.
BoxFit.fitWidth: Scales the child control to a width equal to the available space, maintaining the aspect ratio. Height may be less than available space.
BoxFit.fitHeight: Scale the sub-control to the height equal to the available space, maintaining the aspect ratio. Width may be smaller than available space.
alignment: used to control the alignment of child controls within the available space, usually an Alignment object.

Use the FittedBox control to easily adjust the size of sub-controls to fit the available space, and flexibly control the scaling, stretching and alignment of sub-controls. It is often used to process pictures, text or other controls that require adaptive size so that they can be displayed normally in parent containers of different sizes.

example

Widget build(BuildContext context) {
    debugPrint('Screen height: ${_videoPlayerController.value.size.height}');
    return Scaffold(
      backgroundColor: Colors.black,
      body: Stack(
        children: [
          Positioned(
            top: 0,
            left: 70*widget.horiRatio,
            child: Container(
              // height: MediaQuery.of(context).size.height,
              child: FittedBox(
                fit: BoxFit.none,
                child: SizedBox(
                  width: _videoPlayerController.value.size.width*widget.horiRatio,
                  height: _videoPlayerController.value.size.height*widget.verRatio,
                  child: Chewie(
                    controller: _chewieController,
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }