Add a Column to the template to address some of what we learnt from usability studies. (#10473)

packages/flutter_tools/templates/create/lib/main.dart.tmpl

@@ -29,9 +29,9 @@ class MyApp extends StatelessWidget {
         // the application has a blue toolbar. Then, without quitting
         // the app, try changing the primarySwatch below to Colors.green
         // and then invoke "hot reload" (press "r" in the console where
-        // you ran "flutter run", or press Run > Hot Reload App in IntelliJ).
-        // Notice that the counter didn't reset back to zero -- the application
-        // is not restarted.
+        // you ran "flutter run", or press Run > Hot Reload App in
+        // IntelliJ). Notice that the counter didn't reset back to zero;
+        // the application is not restarted.
         primarySwatch: Colors.blue,
       ),
       home: new MyHomePage(title: 'Flutter Demo Home Page'),
@@ -89,8 +89,34 @@ class _MyHomePageState extends State<MyHomePage> {
         title: new Text(widget.title),
       ),
       body: new Center(
-        child: new Text(
-          'Button tapped $_counter time${ _counter == 1 ? '' : 's' }.',
+        // Center is a layout widget. It takes a single child and
+        // positions it in the middle of the parent.
+        child: new Column(
+          // Column is also layout widget. It takes a list of children
+          // and arranges them vertically. By default, it sizes itself
+          // to fit its children horizontally, and tries to be as tall
+          // as its parent.
+          //
+          // Invoke "debug paint" (press "p" in the console where you
+          // ran "flutter run", or select "Toggle Debug Paint" from the
+          // Flutter tool window in IntelliJ) to see the wireframe for
+          // each widget.
+          //
+          // Column has various properties to control how it sizes
+          // itself and how it positions its children. Here we use
+          // mainAxisAlignment to center the children vertically; the
+          // main axis here is the vertical axis because Columns are
+          // vertical (the cross axis would be horizontal).
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: <Widget>[
+            new Text(
+              'You have pushed the button this many times:',
+            ),
+            new Text(
+              '${_counter}',
+              style: Theme.of(context).textTheme.display1,
+            ),
+          ],
         ),
       ),
       floatingActionButton: new FloatingActionButton(
@@ -119,7 +145,7 @@ class _MyHomePageState extends State<MyHomePage> {
     try {
       platformVersion = await {{pluginDartClass}}.platformVersion;
     } on PlatformException {
-      platformVersion = "Failed to get platform version";
+      platformVersion = 'Failed to get platform version.';
     }
 
     // If the widget was removed from the tree while the asynchronous platform