紧约束

ColoredBox是紧约束

使用屏幕尺寸

import 'package:flutter/material.dart';

void main() {
  runApp(
      // 紧约束，使用的屏幕尺寸
      const ColoredBox(color: Colors.blue)
  );
}

SizedBox也是紧约束

父级是紧约束的情况下，SizedBox 无法对子级的尺寸进行修改

import 'package:flutter/material.dart';

void main() {
  runApp(const SizedBox(
    width: 100,
    height: 100,
    child: ColoredBox(color: Colors.red),
  ));
}

解除约束

UnconstrainedBox

import 'package:flutter/material.dart';

void main() {
  runApp(const UnconstrainedBox(
    child: ColoredBox(color: Colors.green),
  ));
}

运行此代码，会发现整个面板都是黑色的

这时候，我们可以给SizedBox指定一个宽高

import 'package:flutter/material.dart';

void main() {
  runApp(const UnconstrainedBox(
    child: SizedBox(
      width: 100,
      height: 100,
      child: ColoredBox(color: Colors.purple),
    ),
  ));
}

运行代码，可以看到，在页面上显示一个紫色的正方形

一个组件打破原有紧约束的方式:
通过 UnconstrainedBox [解除约束]，让自身约束变为 [无约束]。

通过布局组件放松约束