Kindly look this app you will get to know the error
I saw your sample project and what I saw on the phone screen is perfectly logical.
When you use an option to align the components in the screen in a certain way in relation to the size or place of other components just remember that the runtime engine will try to compute the sizes and positions of every component in your app. This type of computation will depend on the fact that it can give a definite size for the container (in this case the screen).
You have asked the runtime engine to place the components in space-around fashion but in the same time you made your screen scrollable which prevents the runtime to know the screen size in the device running the app. So, if will use the default layout programmed in the runtime engine when such condition takes place.
You will notice when you turn scrollable off, the components will align properly in the screen.
The same concept holds true when you want to have scrollable rows and columns. The row or column becomes the container of the components and has to be of a known size so that the runtime engine can decide to show the scroll bar.