diff --git a/README.md b/README.md index 39716002ec..514bb2d760 100644 --- 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 index 0ddccc2026..1e3fbcf9af 100644 --- 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 _buildGridCards(BuildContext context) { + List products = getProducts(Category.all); + + if (products == null || products.isEmpty) { + return const []; + } + + 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: [ + 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: [ + // 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: [ + 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 index f02aabd980..50eb0471a7 100644 --- a/mdc_100_series/lib/login.dart +++ b/mdc_100_series/lib/login.dart @@ -60,6 +60,7 @@ class _LoginPageState extends State { ), ButtonBar( children: [ + // TODO: Add a beveled rectangular border to CANCEL (103) FlatButton( child: Text('CANCEL'), onPressed: () { @@ -67,6 +68,8 @@ class _LoginPageState extends State { _passwordController.clear(); }, ), + // TODO: Add an elevation to NEXT (103) + // TODO: Add a beveled rectangular border to NEXT (103) RaisedButton( child: Text('NEXT'), onPressed: () {