Shutter fittedbox component

Flutter FittedBox Components

sketch

When the aspect ratio of the child component is different from that of the parent component , Sure FittedBox Component operations child components stretch or fill the space of the parent component .

Basic attributes

fit： How child elements are filled .
	- fill： Populate parent component .
	- contain： Isometric stretching .
	- cover： The proportional stretch fills the parent component , As small as possible .
	- fitWidth： Isometric stretching , The width fills the parent component .
	- fitHeight： Isometric stretching , Highly filled with parent components .
	- none： The default subcomponent is centered , Don't deal with it .
	- scaleDown： Zoom to contain, Otherwise none equally .

Use

const Text(" Original picture "),
Container(
    width: 100,
    height: 100,
    color: Colors.red,
    child: const Image(image: AssetImage("images/bird.jpg")),
),
const Text("BoxFit.fill"),
Container(
    width: 100,
    height: 100,
    color: Colors.red,
    child: const FittedBox(
        fit: BoxFit.fill,
        child: Image(image: AssetImage("images/bird.jpg")),
    ),
),
const SizedBox(height: 20),
const Text("BoxFit.contain"),
Container(
    width: 100,
    height: 100,
    color: Colors.red,
    child: const FittedBox(
        fit: BoxFit.contain,
        child: Image(image: AssetImage("images/bird.jpg")),
    ),
),
const SizedBox(height: 20),
const Text("BoxFit.cover"),
Container(
    width: 100,
    height: 100,
    color: Colors.red,
    child: const FittedBox(
        fit: BoxFit.cover,
        child: Image(image: AssetImage("images/bird.jpg")),
    ),
),
const SizedBox(height: 20),
const Text("BoxFit.fitWidth"),
Container(
    width: 100,
    height: 100,
    color: Colors.red,
    child: const FittedBox(
        fit: BoxFit.fitWidth,
        child: Image(image: AssetImage("images/bird.jpg")),
    ),
),
const SizedBox(height: 20),
const Text("BoxFit.fitHeight"),
Container(
    width: 100,
    height: 100,
    color: Colors.red,
    child: const FittedBox(
        fit: BoxFit.fitHeight,
        child: Image(image: AssetImage("images/bird.jpg")),
    ),
),
const SizedBox(height: 20),
// const Text("BoxFit.none"),
// Container(
//   width: 100,
//   height: 100,
//   color: Colors.red,
//   child: const FittedBox(
//     fit: BoxFit.none,
//     child: Image(image: AssetImage("images/bird.jpg")),
//   ),
// ),
const SizedBox(height: 20),
const Text("BoxFit.scaleDown"),
Container(
    width: 100,
    height: 100,
    color: Colors.red,
    child: const FittedBox(
        fit: BoxFit.scaleDown,
        child: Image(image: AssetImage("images/bird.jpg")),
    ),
)