Add demo code (flutter#71)

* add code snippets from screencasts

* Adds Cupertino/Material demo

* add copyright headers

* add colors demo

* add colors demo

* add demo code

* Remove extra newline

* add orientation code

* clean up code

* 2 spaces

course/01_hello_rectangle/solution_01_hello_rectangle/lib/main.dart

@@ -4,43 +4,35 @@
 
 import 'package:flutter/material.dart';
 
-const _padding = const EdgeInsets.all(16.0);
-
 void main() {
-  runApp(new MaterialApp(
-    title: 'Hello Rectangle App Title',
-    home: new Scaffold(
-      appBar: new AppBar(
-        title: const Text('Hello Rectangle App Bar Title'),
+  runApp(
+    MaterialApp(
+      home: Scaffold(
+        appBar: AppBar(
+          title: Text('Hello Rectangle'),
+        ),
+        body: HelloRectangle(),
       ),
-      body: new Rectangle(),
     ),
-  ));
+  );
 }
 
-/// Widget that shows a colored, rectangular container, with centered text
-class Rectangle extends StatelessWidget {
+class HelloRectangle extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
-    return new Padding(
-      padding: _padding,
-      child: new Align(
-        alignment: Alignment.topCenter,
-        child: new Container(
-          color: Colors.greenAccent,
-          height: 200.0,
-          width: 300.0,
-          child: new Center(
-            child: new Padding(
-              padding: _padding,
-              child: const Text(
-                'Hello',
-                textAlign: TextAlign.center,
-              ),
-            ),
+    return Center(
+      child: Container(
+        color: Colors.greenAccent,
+        height: 400.0,
+        width: 300.0,
+        child: Center(
+          child: Text(
+            'Hello!',
+            style: TextStyle(fontSize: 40.0),
+            textAlign: TextAlign.center,
           ),
         ),
       ),
     );
   }
-}
+}

course/code-snippets/lesson_1_09_demo.dart

@@ -0,0 +1,43 @@
+// Copyright 2018 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:flutter/material.dart';
+
+void main() {
+  runApp(MaterialApp(
+    debugShowCheckedModeBanner: false,
+    title: 'Hello Rectangle',
+    home: Scaffold(
+      body: HelloRectangle(),
+    ),
+  ));
+}
+
+class HelloRectangle extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    var container = Container(
+      color: Colors.purple,
+    );
+    return Container(
+      padding: EdgeInsets.only(
+        top: 64.0,
+        left: 32.0,
+        bottom: 32.0,
+        right: 32.0,
+      ),
+      child: container,
+    );
+  }
+}
+
+/// Example of a widget with the `children` property.
+var container = Column(
+  children: <Widget>[
+    Text('Hello!'),
+    Text('Hello!'),
+    Text('Hello!'),
+    Text('Hello!'),
+  ],
+);

course/code-snippets/lesson_1_12_demo.dart

@@ -0,0 +1,82 @@
+// Copyright 2018 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// To keep your imports tidy, follow the ordering guidelines at
+// https://www.dartlang.org/guides/language/effective-dart/style#ordering
+import 'package:flutter/material.dart';
+
+import 'package:unit_converter/converter_route.dart';
+import 'package:unit_converter/unit.dart';
+
+// We use an underscore to indicate that these variables are private.
+// See https://www.dartlang.org/guides/language/effective-dart/design#libraries
+final _rowHeight = 100.0;
+final _borderRadius = BorderRadius.circular(_rowHeight / 2);
+
+/// A [Category] for a list of [Unit]s.
+class Category extends StatelessWidget {
+  final String name;
+  final List<Unit> units;
+  final ColorSwatch color;
+  final String iconLocation;
+
+  /// Constructor.
+  const Category({
+    Key key,
+    this.name,
+    this.units,
+    this.color,
+    this.iconLocation,
+  }) : super(key: key);
+
+  /// Navigates to the [ConverterRoute].
+  void _navigateToConverter(BuildContext context) {
+    if (Navigator.of(context).canPop()) {
+      Navigator.of(context).pop();
+    }
+    Navigator.of(context).push(MaterialPageRoute<Null>(
+      builder: (BuildContext context) {
+        return Scaffold(
+          appBar: AppBar(
+            elevation: 1.0,
+            title: Text(
+              name,
+              style: Theme.of(context).textTheme.display1,
+            ),
+            centerTitle: true,
+            backgroundColor: color[100],
+          ),
+          body: ConverterRoute(
+            name: name,
+            units: units,
+            color: color,
+          ),
+          // This prevents the onscreen keyboard from affecting the size of the
+          // screen, and the space given to widgets.
+          // See https://docs.flutter.io/flutter/material/Scaffold/resizeToAvoidBottomPadding.html
+          resizeToAvoidBottomPadding: false,
+        );
+      },
+    ));
+  }
+
+  /// Builds a widget that shows [Category] information, using [ListTile]
+  Widget build(BuildContext context) {
+    assert(debugCheckHasMaterial(context));
+    return Material(
+      color: Colors.green[100],
+      child: ListTile(
+        leading: iconLocation != null ? Image.asset(iconLocation) : null,
+        title: Text(
+          name,
+          style: Theme.of(context).textTheme.display1.copyWith(
+                color: Colors.black,
+                fontSize: 24.0,
+              ),
+        ),
+        onTap: () => _navigateToConverter(context),
+      ),
+    );
+  }
+}

course/code-snippets/lesson_1_20_demo.dart

@@ -0,0 +1,63 @@
+// Copyright 2018 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'dart:math';
+
+import 'package:flutter/material.dart';
+
+void main() {
+  runApp(
+    MaterialApp(
+      home: Scaffold(
+        appBar: AppBar(
+          title: Text('Hello Rainbow Rectangle'),
+        ),
+        body: HelloRectangle(text: 'Hello from instantiation!'),
+      ),
+    ),
+  );
+}
+
+class HelloRectangle extends StatefulWidget {
+  final String text;
+
+  HelloRectangle({
+    this.text,
+  });
+
+  @override
+  createState() => _HelloRectangleState();
+}
+
+class _HelloRectangleState extends State<HelloRectangle> {
+  Color _color = Colors.greenAccent;
+
+  void _generateRandomColor() {
+    var random = Random();
+    setState(() {
+      _color = Color.fromARGB(
+        255,
+        random.nextInt(255),
+        random.nextInt(255),
+        random.nextInt(255),
+      );
+    });
+  }
+
+  Widget build(BuildContext context) {
+    return Center(
+      child: FlatButton(
+        onPressed: _generateRandomColor,
+        color: _color,
+        child: Center(
+          child: Text(
+            widget.text,
+            style: TextStyle(fontSize: 40.0),
+            textAlign: TextAlign.center,
+          ),
+        ),
+      ),
+    );
+  }
+}

course/code-snippets/lesson_2_02_demo.dart

@@ -0,0 +1,46 @@
+// Copyright 2018 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:flutter/material.dart';
+import 'package:flutter/cupertino.dart';
+
+void main() {
+  runApp(
+    MaterialApp(
+      debugShowCheckedModeBanner: false,
+      home: Scaffold(
+        appBar: AppBar(
+          title: Text('Hello Switch'),
+        ),
+        body: HelloSwitch(),
+      ),
+    ),
+  );
+}
+
+class HelloSwitch extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Center(
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: <Widget>[
+          Text(
+            'Hello!',
+            style: TextStyle(fontSize: 36.0),
+          ),
+          Theme.of(context).platform == TargetPlatform.iOS
+              ? CupertinoSwitch(
+                  value: true,
+                  onChanged: (bool toggled) {},
+                )
+              : Switch(
+                  value: true,
+                  onChanged: (bool toggled) {},
+                ),
+        ],
+      ),
+    );
+  }
+}

unit_converter/unit_converter/lib/category_route.dart

@@ -19,8 +19,7 @@ const apiCategory = {
   'route': 'currency',
 };
 
-// TODO change this color
-const _appBarColor = Colors.green;
+final _backgroundColor = Colors.green[100];
 
 /// Category Route (page).
 ///
@@ -169,14 +168,14 @@ class _CategoryRouteState extends State<CategoryRoute> {
   ///
   /// For portrait, we use a [ListView]
   /// For landscape, we use a [GridView]
-  Widget _buildCategoryWidgets(bool portrait) {
+  Widget _buildCategoryWidgets(Orientation deviceOrientation) {
     // Why do we pass in `_categories.toList()` instead of just `_categories`?
     // Widgets are supposed to be deeply immutable objects. We're passing in
     // _categories to this GridView, which changes as we load in each
     // [Category]. So, each time _categories changes, we need to pass in a new
     // list. The .toList() function does this.
     // For more details, see https://github.com/dart-lang/sdk/issues/27755
-    if (portrait) {
+    if (deviceOrientation == Orientation.portrait) {
       return ListView.builder(
         itemBuilder: (BuildContext context, int index) => _categories[index],
         itemCount: _categories.length,
@@ -203,11 +202,12 @@ class _CategoryRouteState extends State<CategoryRoute> {
     }
 
     // Based on the device size, figure out how to best lay out the list
-    final deviceSize = MediaQuery.of(context).size;
+    // You can also use MediaQuery.of(context).size to check orientation
+    assert(debugCheckHasMediaQuery(context));
     final listView = Container(
-      color: Colors.green[100],
+      color: _backgroundColor,
       padding: EdgeInsets.symmetric(horizontal: 8.0),
-      child: _buildCategoryWidgets(deviceSize.height > deviceSize.width),
+      child: _buildCategoryWidgets(MediaQuery.of(context).orientation),
     );
 
     if (widget.footer) {
@@ -222,7 +222,7 @@ class _CategoryRouteState extends State<CategoryRoute> {
               color: Colors.grey[800],
             ),
       ),
-      backgroundColor: _appBarColor[100],
+      backgroundColor: _backgroundColor,
       leading: Icon(
         Icons.clear,
         color: Colors.grey[800],