Let’s Give the Calculator a Screen
Obviously the calculatorScreen at the top of the Column is just a placeholder; we need to replace it with a real, working screen that will be composed of the following: a wrapping and a Card and, inside it, a padded Text displaying a String, which represents the expression or result to be displayed.
But, before adding that, we need to declare that String inside the _CalculatorHomePageState declaration, above the @override keyword preceding the build method declaration:
| | String _str = "0"; |
After you’ve done that, replace calculatorScreen (from the code) with:
| | Card( |
| | color: Colors.lightGreen[50], |
| | child: Padding( |
| | padding: EdgeInsets.all(15.0), |
| | child: Text( |
| | _str, |
| | textScaleFactor: 2.0, |
| | ), |
| | ), |
| | ), |
Where Colors.lightGreen[50] is a very low intensity light green.
Color intensity (50, in this case) is specified on a scale where 500 is normal intensity (like using Colors.lightGreen) and higher numbers are higher intensity colors, usually used for accent color purposes.