【Flutter 實戰】簡約而不簡單的計算器
阿新 • • 發佈：2020-07-01
> 老孟導讀：這是 【Flutter 實戰】元件系列文章的最後一篇，其他元件地址：[http://laomengit.com/guide/widgets/Text.html](http://laomengit.com/guide/widgets/Text.html)，接下來將會講解動畫系列，關注老孟，精彩不斷。
先看一下效果：
大家學習UI程式語言時喜歡用哪個 App 當作第一個練手的專案呢？，我喜歡使用 **計算器** ，可能是習慣了吧，學習 Android 和 React Native 都用此 App 當作練手的專案。
下面我會一步一步的教大家如何實現此專案。
整個專案的 UI 分為兩大部分，一部分是頂部顯示數字和計算結果，另一部分是底部的輸入按鈕。
所以整體佈局使用 **Column**，在不同解析度的手機上，規定底部固定大小，剩餘空間都由頂部元件填充，所以頂部元件使用 **Expanded** 擴充，程式碼如下：
```dart
Container(
padding: EdgeInsets.symmetric(horizontal: 18),
child: Column(
children: