Update the flutter create template. (#6443)

This tries to capture some of the experience of usability study
participant P1.

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

@@ -9,29 +9,54 @@ void main() {
   // to test the app.
   enableFlutterDriverExtension();
 {{/withDriverTest}}
-  runApp(
-    new MaterialApp(
+  runApp(new MyApp());
+}
+
+class MyApp extends StatelessWidget {
+  // This widget is the root of your application.
+  // It is stateless, meaning that it always looks the same.
+  @override
+  Widget build(BuildContext context) {
+    return new MaterialApp(
       title: 'Flutter Demo',
       theme: new ThemeData(
+        // This is the theme of your application.
+        //
+        // Try running your application with "flutter run". You'll see
+        // the application has a blue toolbar. Then, without quitting
+        // the app, try changing the primarySwatch below to Colors.green
+        // and press "r" in the console where you ran "flutter run".
+        // We call this a "hot reload". Notice that the counter didn't
+        // reset back to zero -- the application is not restarted.
         primarySwatch: Colors.blue,
       ),
-      home: new FlutterDemo(),
-    ),
-  );
+      home: new MyHomePage(),
+    );
+  }
 }
 
-class FlutterDemo extends StatefulWidget {
-  FlutterDemo({Key key}) : super(key: key);
+class MyHomePage extends StatefulWidget {
+  MyHomePage({Key key}) : super(key: key);
+
+  // This widget is the home page of your application. It is stateful,
+  // meaning that it has a State object (defined below) that contains
+  // fields that affect how it looks.
 
   @override
-  _FlutterDemoState createState() => new _FlutterDemoState();
+  _MyHomePageState createState() => new _MyHomePageState();
 }
 
-class _FlutterDemoState extends State<FlutterDemo> {
+class _MyHomePageState extends State<MyHomePage> {
   int _counter = 0;
 
   void _incrementCounter() {
     setState(() {
+      // This call to setState tells the Flutter framework that
+      // something has changed in this State, which causes it to rerun
+      // the build method below so that the display can reflect the
+      // updated values. If we changed _counter without calling
+      // setState(), then the build method would not be called again,
+      // and so nothing would appear to happen.
       _counter++;
     });
   }
@@ -44,13 +69,15 @@ class _FlutterDemoState extends State<FlutterDemo> {
       ),
       body: new Center(
         child: new Text(
-            'Button tapped $_counter time${ _counter == 1 ? '' : 's' }.'),
+          'Button tapped $_counter time${ _counter == 1 ? '' : 's' }.',
+        ),
       ),
       floatingActionButton: new FloatingActionButton(
         onPressed: _incrementCounter,
         tooltip: 'Increment',
         child: new Icon(Icons.add),
-      ),
+      ), // This trailing comma tells the Dart formatter to use
+      // a style that looks nicer for build methods.
     );
   }
 }