[102] Completed code.

[101] Making AppBar something you add in 102. [Model] Adding model from the start. [103] Adding fonts. [103] Supplemental files. [101] Correcting supplemental files. [101] Copy correction. [101] Minor renaming. [101] Update for Dart 2. [101] Missing dependency. [101] Dart 2. [101] Dart 2. [101] Dart 2. [101] Dart 2. [101] Correcting model. [Meta] README file. [Meta] Clarification. [101] Copy correction. [104] Updating data. [101] Correcting widget class. (#23) Add link to actual codelab in the README [Meta] README correction. [101] README specificity. Add the slanted_menu.png to assets for 101 branch so its ready when needed. (#44) [101] TODOs for starter code (#50) [101] Added future TODOs to 101 starter [102] Completed code. [101] Starter code. [103] Supplemental files. [101] Correcting supplemental files. [101] Minor renaming. [101] Missing dependency. [101] Dart 2. [101] Dart 2. [101] Complete code. [102] Starter code. [102] Minor copy correction. [101] Update for Dart 2 [102] Rebase. [102] starter todos (#54) [102] Completed code. [101] Starter code. [103] Supplemental files. [101] Correcting supplemental files. [101] Minor renaming. [101] Missing dependency. [101] Dart 2. [101] Dart 2. [101] Complete code. [102] Starter code. [102] Minor copy correction. [101] Update for Dart 2 [102] Rebase. [102] starter todos (#54) [102] Completed code. [101] Starter code. [101] Making AppBar something you add in 102. [Model] Adding model from the start. [103] Adding fonts. [103] Supplemental files. [101] Correcting supplemental files. [101] Copy correction. [101] Minor renaming. [101] Update for Dart 2. [101] Missing dependency. [101] Dart 2. [101] Dart 2. [101] Dart 2. [101] Dart 2. [101] Correcting model. [Meta] README file. [Meta] Clarification. [101] Copy correction. [104] Updating data. [101] Correcting widget class. (#23) Add link to actual codelab in the README [Meta] README correction. [101] README specificity. [101] Complete code. [102] Starter code. [102] Minor copy correction. [101] Update for Dart 2 [102] Rebase. Add the slanted_menu.png to assets for 101 branch so its ready when needed. (#44) (#45) [102] Complete code. [103] Starter code. [102] Correcting home being stateful. [103] Correcting order of fields. (#10) [102] Removing unneeded value. [102] Dart 2. [102] Data correction. [103] README specificity. [META] Readme correction.
material-components · Jun 28, 2018 · 555a4f4 · 555a4f4
1 parent 65a3a04
commit 555a4f4
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 6 deletions.
diff --git a/README.md b/README.md
@@ -11,7 +11,7 @@ Codelabs MDC-101 through MDC-104 will guide you through building and integrating
 The starter and completed code is in the various branches of this repo.
 
 ## Getting Started
-Visit the [Google codelabs site](https://codelabs.developers.google.com/), or [codelabs.developers.google.com/codelabs/mdc-102-flutter](https://codelabs.developers.google.com/codelabs/mdc-102-flutter), to follow along the guided steps.
+Visit the [Google codelabs site](https://codelabs.developers.google.com/), or [codelabs.developers.google.com/codelabs/mdc-103-flutter](https://codelabs.developers.google.com/codelabs/mdc-103-flutter), to follow along the guided steps.
 
 ## Support
 

diff --git a/mdc_100_series/lib/home.dart b/mdc_100_series/lib/home.dart
@@ -13,22 +13,107 @@
 // limitations under the License.
 
 import 'package:flutter/material.dart';
+import 'package:intl/intl.dart';
+
+import 'model/data.dart';
+import 'model/product.dart';
 
 class HomePage extends StatelessWidget {
-  // TODO: Make a collection of cards (102)
   // TODO: Add a variable for Category (104)
 
+  List<Card> _buildGridCards(BuildContext context) {
+    List<Product> products = getProducts(Category.all);
+
+    if (products == null || products.isEmpty) {
+      return const <Card>[];
+    }
+
+    final ThemeData theme = Theme.of(context);
+    final NumberFormat formatter = NumberFormat.simpleCurrency(
+        locale: Localizations.localeOf(context).toString());
+
+    return products.map((product) {
+      return Card(
+        // TODO: Adjust card heights (103)
+        child: Column(
+          // TODO: Center items on the card (103)
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: <Widget>[
+            AspectRatio(
+              aspectRatio: 18 / 11,
+              child: Image.asset(
+                product.assetName,
+                package: product.assetPackage,
+                fit: BoxFit.fitWidth,
+              ),
+            ),
+            Expanded(
+              child: Padding(
+                padding: EdgeInsets.fromLTRB(16.0, 12.0, 16.0, 8.0),
+                child: Column(
+                  // TODO: Align labels to the bottom and center (103)
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  // TODO: Change innermost Column (103)
+                  children: <Widget>[
+                    // TODO(larche): Make headline6 when available
+                    Text(
+                      product.name,
+                      style: theme.textTheme.title,
+                      maxLines: 1,
+                    ),
+                    SizedBox(height: 8.0),
+                    // TODO(larche): Make subtitle2 when available
+                    Text(
+                      formatter.format(product.price),
+                      style: theme.textTheme.body2,
+                    ),
+                  ],
+                ),
+              ),
+            ),
+          ],
+        ),
+      );
+    }).toList();
+  }
+
   @override
   Widget build(BuildContext context) {
     // TODO: Return an AsymmetricView (104)
     // TODO: Pass Category variable to AsymmetricView (104)
+
     return Scaffold(
-      // TODO: Add app bar (102)
-      // TODO: Add a grid view (102)
+      appBar: AppBar(
+        leading: IconButton(
+          icon: Icon(Icons.menu),
+          onPressed: () {
+            print('Menu button');
+          },
+        ),
+        title: Text('SHRINE'),
+        actions: <Widget>[
+          IconButton(
+            icon: Icon(Icons.search),
+            onPressed: () {
+              print('Search button');
+            },
+          ),
+          IconButton(
+            icon: Icon(Icons.tune),
+            onPressed: () {
+              print('Filter button');
+            },
+          ),
+        ],
+      ),
       body: Center(
-        child: Text('You did it!'),
+        child: GridView.count(
+          crossAxisCount: 2,
+          padding: EdgeInsets.all(16.0),
+          childAspectRatio: 8.0 / 9.0,
+          children: _buildGridCards(context),
+        ),
       ),
     );
   }
 }
-
diff --git a/mdc_100_series/lib/login.dart b/mdc_100_series/lib/login.dart
@@ -60,13 +60,16 @@ class _LoginPageState extends State<LoginPage> {
             ),
             ButtonBar(
               children: <Widget>[
+                // TODO: Add a beveled rectangular border to CANCEL (103)
                 FlatButton(
                   child: Text('CANCEL'),
                   onPressed: () {
                     _usernameController.clear();
                     _passwordController.clear();
                   },
                 ),
+                // TODO: Add an elevation to NEXT (103)
+                // TODO: Add a beveled rectangular border to NEXT (103)
                 RaisedButton(
                   child: Text('NEXT'),
                   onPressed: () {