让Flutter的Stack布局更加灵活

在使用Flutter进行UI设计时，Stack布局是非常常见的一种布局方式，它允许我们将多个组件堆叠在一起，形成复杂的视觉效果。然而，当我们想让其中一个图标充满整个Stack空间，而保持另一个图标不变大小的时候，可能会遇到一些挑战。今天，我们将探讨如何通过SizedBox.expand和FittedBox来实现这种效果。

背景介绍

首先，让我们回顾一下Stack布局的工作原理。Stack的子组件会按照它们在列表中的顺序进行堆叠，后面的组件会覆盖前面的组件。如果不加以控制，所有的子组件都会按照它们自身的大小显示。

问题描述

假设我们有一个Stack，其中包含两个图标：

1. Icons.abc- 我们希望这个图标能够填满Stack的所有可用空间。
2. Icons.access_alarm- 这个图标应该保持其原始大小。

如果我们直接用FittedBox包裹整个Stack，那么两个图标都会被拉伸到最大可用空间，这显然不是我们想要的。

解决方案

为了实现我们想要的效果，我们需要将第一个图标Icons.abc进行特别处理：

import