在以下屏幕截图中，您可以看到我们将在第一部分中构建的布局。 为了使您更容易理解该布局需要做什么，我添加了边框，以显示小部件将如何放置在屏幕上：
https://embed.notionlytics.com/wt/ZXlKd1lXZGxTV1FpT2lJNFl6aG1NbVV3Tm1ZeE1XWTBPR0ZrWWpVd1ltUTRZMkl6T0dKbE5UQm1NU0lzSW5kdmNtdHpjR0ZqWlZSeVlXTnJaWEpKWkNJNklsZHNTR2hsVEZSUFdXeHpaVmRhUW1ZNU1YQmxJbjA9
我相信构建此布局的最简单方法是结合使用列和行小部件。 此屏幕中的主容器窗口小部件将是一列，将空间分成三部分，如下所示：
在您最喜欢的编辑器中，创建一个新应用。
将新应用命名为production_timer
在main.dart文件中，删除示例代码。
输入以下代码：
这段代码创建了一个基本的脚手架，这是我们大多数屏幕的基本布局，并在AppBar（我的工作计时器）中放置了一个标题，并在主体的中央放置了一个文本（同样是My Work Timer）。 结果应类似于以下屏幕截图：
接下来，让我们在main.dart文件底部为屏幕布局创建一个类，而不仅仅是返回Text。 我们将其称为TimerHomePage（）。 如果您使用的是VS Code，Android Studio或IntelliJ IDEA，则还可以使用stless快捷方式使框架编写代码的一部分。 MyApp类结束后，只需键入stless。
至于类名，让我们选择TimerHomePage。 最终结果应如下：
在build（）方法中，不返回容器，而是从MyApp类中移动Scaffold：在appBar中，我们将显示应用程序的标题，在主体中将显示包含Column的Center小部件。 在TimerHomePage类中添加以下代码：
我们可以通过调用刚刚创建的新类来简化MyApp类的build（）方法上的代码，如下所示：
如果您立即尝试使用该应用程序，则应该仍然像以前一样看到一个空白屏幕，显示“我的工作计时器”应用程序栏标题。
现在，我们准备开始在屏幕上放置小部件。 由于我们需要构建五个具有非常相似功能的按钮小部件，因此最好为这些小部件创建一个新类，以保持其余代码的简洁性并节省一些键入操作。
让我们在应用程序的lib文件夹中创建一个名为widgets.dart的新文件，如下所示：
在这里，我们将创建一个名为ProductivityButton的新无状态小部件。 这将显示四个字段：颜色，文本，大小和Callback方法，以及用于设置值的构造函数。 小部件的代码如下：