The Third Row
We have one more Row, which might sound strange until you look back at the structure of the app in the figure here. That row will have two children:
- On the left, the numbers and the dot and equals buttons.
- On the right, the operator buttons.
Add the Number Buttons
The number buttons will be spread out across four rows:
- The first will contain the numbers 7, 8, and 9.
- The second will contain the numbers 4, 5, and 6.
- The third will contain the numbers 1, 2, and 3.
- The fourth will contain the number 0, the dot, and the button to calculate the result.
This means that, inside this Row we’ll need another Column with four Rows as its children just to display the number buttons. The buttons will have white text on an intense blue background, except for the = button, which will have black text on a very light blue background. So, as the first child of the third Row of our app, we’ll have the following:
| | Column( |
| | crossAxisAlignment: CrossAxisAlignment.stretch, |
| | children: <Widget>[ |
| | Row( |
| | crossAxisAlignment: CrossAxisAlignment.stretch, |
| | children: <Widget>[ |
| | FlatButton( |
| | child: Text( |
| | '7', |
| | style: TextStyle(color: Colors.white), |
| | ), |
| | onPressed: () {add('7');}, |
| | color: Colors.blueAccent, |
| | ), |
| | FlatButton( |
| | child: Text( |
| | '8', |
| | style: TextStyle(color: Colors.white), |
| | ), |
| | onPressed: () {add('8');}, |
| | color: Colors.blueAccent, |
| | ), |
| | FlatButton( |
| | child: Text( |
| | '9', |
| | style: TextStyle(color: Colors.white), |
| | ), |
| | onPressed: () {add('9');}, |
| | color: Colors.blueAccent, |
| | ), |
| | ], |
| | ), |
| | Row( |
| | crossAxisAlignment: CrossAxisAlignment.stretch, |
| | children:<Widget>[ |
| | FlatButton( |
| | child: Text( |
| | '4', |
| | style: TextStyle(color: Colors.white), |
| | ), |
| | onPressed: () {add('4');}, |
| | color: Colors.blueAccent, |
| | ), |
| | FlatButton( |
| | child: Text( |
| | '5', |
| | style: TextStyle(color: Colors.white), |
| | ), |
| | onPressed: () {add('5');}, |
| | color: Colors.blueAccent, |
| | ), |
| | FlatButton( |
| | child: Text( |
| | '6', |
| | style: TextStyle(color: Colors.white), |
| | ), |
| | onPressed: () {add('6');}, |
| | color: Colors.blueAccent, |
| | ), |
| | ], |
| | ), |
| | Row( |
| | crossAxisAlignment: CrossAxisAlignment.stretch, |
| | children: <Widget>[ |
| | FlatButton( |
| | child: Text( |
| | '1', |
| | style: TextStyle(color: Colors.white), |
| | ), |
| | onPressed: () {add('1');}, |
| | color: Colors.blueAccent, |
| | ), |
| | FlatButton( |
| | child: Text( |
| | '2', |
| | style: TextStyle(color: Colors.white), |
| | ), |
| | onPressed: () {add('2');}, |
| | color: Colors.blueAccent, |
| | ), |
| | FlatButton( |
| | child: Text( |
| | '3', |
| | style: TextStyle(color: Colors.white) |
| | ), |
| | onPressed: () {add('3');}, |
| | color: Colors.blueAccent, |
| | ), |
| | ], |
| | ), |
| | Row( |
| | crossAxisAlignment: CrossAxisAlignment.stretch, |
| | children: <Widget>[ |
| | FlatButton( |
| | child: Text( |
| | '0', |
| | style: TextStyle(color: Colors.white), |
| | ), |
| | onPressed: () {add('0');}, |
| | color: Colors.blueAccent, |
| | ), |
| | FlatButton( |
| | child: Text( |
| | '.', |
| | style: TextStyle(color: Colors.white), |
| | ), |
| | onPressed: () {add('.');}, |
| | color: Colors.blueAccent, |
| | ), |
| | FlatButton( |
| | child: Text('='), |
| | onPressed: () { |
| | getResult(); |
| | }, |
| | color: Colors.blue[50], |
| | ), |
| | ], |
| | ), |
| | ], |
| | ), |
As you can see, = calls getResult and the numbers call the add(number) method.
Add the Operators
To the right of the numbers, we’ll add the operator buttons.
As an example, we’ll implement the divide button as a FlatButton with an image from the assets on it.
To start, create a directory in the root of your project called icons.
Inside it, create or copy a file called divide.png, which will be the icon used for the divide button. You can find a divide.png icon suitable for this in the book’s source code or on my website.[26]
After you’ve done that, edit pubspec.yaml and add the following at the bottom of it:
| | flutter: |
| | assets: |
| | - icons/ |
Now we can use that image in our code.
To use it, we need to use Image.asset as explained in Displaying Images from the Assets.
More specifically for this example, the divide button will be implemented as follows:
| | FlatButton( |
| | child: Image.asset( |
| | "icons/divide.png", |
| | width: 10.0, |
| | height: 10.0, |
| | ), |
| | onPressed: () {add('÷');}, |
| | color: Colors.blue[50], |
| | ), |
The entire Column of operator buttons (with the other ones being normal Text-based buttons) will therefore be:
| | Column( |
| | crossAxisAlignment: CrossAxisAlignment.stretch, |
| | children: <Widget>[ |
| | FlatButton( |
| | child: Image.asset( |
| | "icons/divide.png", |
| | width: 10.0, |
| | height: 10.0, |
| | ), |
| | onPressed: () {add('÷');}, |
| | color: Colors.blue[50], |
| | ), |
| | FlatButton( |
| | child: Text('x'), |
| | onPressed: () {add('x');}, |
| | color: Colors.blue[50], |
| | ), |
| | FlatButton( |
| | child: Text('-'), |
| | onPressed: () {add('-');}, |
| | color: Colors.blue[50], |
| | ), |
| | FlatButton( |
| | child: Text('+'), |
| | onPressed: () {add('+');}, |
| | color: Colors.blue[50], |
| | ), |
| | ], |
| | ), |
The buttons are of the same color as the = button (a very light blue).