[103] 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 [101] Included lines to ignore .iml files and files in idea/ (#67) [101] Remove 104 comments [All] Icons for Android and iOS. (#69) [101] Add .vscode/ to gitignore, stop tracking ignored files (#71) Removes files that should not be tracked because they've been ignored by gitignore rules (but have yet to be removed from the repository itself). Also adds the .vscode folder to gitignore, for users who might use VSCode as their development environment. [101] Removed legacy 'new' and 'const' from 101 starter codelab (#72) [101] Restore legacy to data.dart and product.dart (#75) [101] Update import for app.dart to stop type errors in future codelabs (#83) Replace data.dart (#99) [All] Adding back in filter functionality. (#112) [106] Update TODO from "PrimaryColorOverride" to "AccentColorOverride" (#115) * [106] Update TODO from "PrimaryColorOverride" to "AccentColorOverride" * [106] Update TODO from "PrimaryColorOverride" to "AccentColorOverride" [101] Completed code. [102] Completed code. [103] Completed code. 104 starter (#136) * Fix default BorderSide in CutCornersBorder constructor issue #134 * Miscellaneous fixes - Fix login button color (issue #133) - Restore obscureText on password field (issue #127) - Fix AccentColorOverride (issue #128, #132) [103] Button theme fix. [104] Updating pubspec [103] Completed code.
material-components · Mar 25, 2019 · c834bd6 · c834bd6
1 parent 90ea85c
commit c834bd6
Show file tree

Hide file tree

Showing 6 changed files with 138 additions and 93 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-103-flutter](https://codelabs.developers.google.com/codelabs/mdc-103-flutter), to follow along the guided steps.
+Visit the [Google codelabs site](https://codelabs.developers.google.com/), or [codelabs.developers.google.com/codelabs/mdc-104-flutter](https://codelabs.developers.google.com/codelabs/mdc-104-flutter), to follow along the guided steps.
 
 ## Support
 

diff --git a/mdc_100_series/lib/app.dart b/mdc_100_series/lib/app.dart
@@ -14,8 +14,10 @@
 
 import 'package:flutter/material.dart';
 
+import 'colors.dart';
 import 'home.dart';
 import 'login.dart';
+import 'supplemental/cut_corners_border.dart';
 
 // TODO: Convert ShrineApp to stateful widget (104)
 class ShrineApp extends StatelessWidget {
@@ -31,7 +33,7 @@ class ShrineApp extends StatelessWidget {
       // TODO: Change backLayer field value to CategoryMenuPage (104)
       initialRoute: '/login',
       onGenerateRoute: _getRoute,
-      // TODO: Add a theme (103)
+      theme: _kShrineTheme,
     );
   }
 
@@ -48,5 +50,53 @@ class ShrineApp extends StatelessWidget {
   }
 }
 
-// TODO: Build a Shrine Theme (103)
-// TODO: Build a Shrine Text Theme (103)
+final ThemeData _kShrineTheme = _buildShrineTheme();
+
+ThemeData _buildShrineTheme() {
+  final ThemeData base = ThemeData.light();
+  return base.copyWith(
+    accentColor: kShrineBrown900,
+    primaryColor: kShrinePink100,
+    buttonColor: kShrinePink100,
+    scaffoldBackgroundColor: kShrineBackgroundWhite,
+    cardColor: kShrineBackgroundWhite,
+    textSelectionColor: kShrinePink100,
+    errorColor: kShrineErrorRed,
+    buttonTheme: base.buttonTheme.copyWith(
+      buttonColor: kShrinePink100,
+      textTheme: ButtonTextTheme.normal,
+    ),
+    primaryIconTheme: base.iconTheme.copyWith(
+        color: kShrineBrown900
+    ),
+    inputDecorationTheme: InputDecorationTheme(
+      border: CutCornersBorder(),
+    ),
+    textTheme: _buildShrineTextTheme(base.textTheme),
+    primaryTextTheme: _buildShrineTextTheme(base.primaryTextTheme),
+    accentTextTheme: _buildShrineTextTheme(base.accentTextTheme),
+  );
+}
+
+TextTheme _buildShrineTextTheme(TextTheme base) {
+  return base.copyWith(
+    headline: base.headline.copyWith(
+      fontWeight: FontWeight.w500,
+    ),
+    title: base.title.copyWith(
+        fontSize: 18.0
+    ),
+    caption: base.caption.copyWith(
+      fontWeight: FontWeight.w400,
+      fontSize: 14.0,
+    ),
+    body2: base.body2.copyWith(
+      fontWeight: FontWeight.w500,
+      fontSize: 16.0,
+    ),
+  ).apply(
+    fontFamily: 'Rubik',
+    displayColor: kShrineBrown900,
+    bodyColor: kShrineBrown900,
+  );
+}
diff --git a/mdc_100_series/lib/colors.dart b/mdc_100_series/lib/colors.dart
@@ -0,0 +1,27 @@
+// Copyright 2018-present the Flutter authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import 'package:flutter/material.dart';
+
+const kShrinePink50 = const Color(0xFFFEEAE6);
+const kShrinePink100 = const Color(0xFFFEDBD0);
+const kShrinePink300 = const Color(0xFFFBB8AC);
+const kShrinePink400 = const Color(0xFFEAA4A4);
+
+const kShrineBrown900 = const Color(0xFF442B2D);
+
+const kShrineErrorRed = const Color(0xFFC5032B);
+
+const kShrineSurfaceWhite = const Color(0xFFFFFBFA);
+const kShrineBackgroundWhite = Colors.white;
diff --git a/mdc_100_series/lib/home.dart b/mdc_100_series/lib/home.dart
@@ -13,79 +13,21 @@
 // limitations under the License.
 
 import 'package:flutter/material.dart';
-import 'package:intl/intl.dart';
 
 import 'model/products_repository.dart';
 import 'model/product.dart';
+import 'supplemental/asymmetric_view.dart';
 
 class HomePage extends StatelessWidget {
   // TODO: Add a variable for Category (104)
 
-  List<Card> _buildGridCards(BuildContext context) {
-    List<Product> products = ProductsRepository.loadProducts(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(
-        clipBehavior: Clip.antiAlias,
-        // 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: Handle overflowing labels (103)
-                    // 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(
       appBar: AppBar(
+        brightness: Brightness.light,
         leading: IconButton(
           icon: Icon(
             Icons.menu,
@@ -117,15 +59,8 @@ class HomePage extends StatelessWidget {
           ),
         ],
       ),
-      body: Center(
-        child: GridView.count(
-          crossAxisCount: 2,
-          padding: EdgeInsets.all(16.0),
-          childAspectRatio: 8.0 / 9.0,
-          children: _buildGridCards(context),
-        ),
-      ),
+      body: AsymmetricView(
+          products: ProductsRepository.loadProducts(Category.all)),
     );
   }
 }
-
diff --git a/mdc_100_series/lib/login.dart b/mdc_100_series/lib/login.dart
@@ -14,6 +14,8 @@
 
 import 'package:flutter/material.dart';
 
+import 'colors.dart';
+
 class LoginPage extends StatefulWidget {
   @override
   _LoginPageState createState() => _LoginPageState();
@@ -35,43 +37,51 @@ class _LoginPageState extends State<LoginPage> {
               children: <Widget>[
                 Image.asset('assets/diamond.png'),
                 SizedBox(height: 16.0),
-                Text('SHRINE'),
+                Text(
+                  'SHRINE',
+                  style: Theme.of(context).textTheme.headline,
+                ),
               ],
             ),
             SizedBox(height: 120.0),
-            // TODO: Wrap Username with AccentColorOverride (103)
-            // TODO: Remove filled: true values (103)
-            TextField(
-              controller: _usernameController,
-              decoration: InputDecoration(
-                filled: true,
-                labelText: 'Username',
+            AccentColorOverride(
+              color: kShrineBrown900,
+              child: TextField(
+                controller: _usernameController,
+                decoration: InputDecoration(
+                  labelText: 'Username',
+                ),
               ),
             ),
             SizedBox(height: 12.0),
-            // TODO: Wrap Password with AccentColorOverride (103)
-            TextField(
-              controller: _passwordController,
-              decoration: InputDecoration(
-                filled: true,
-                labelText: 'Password',
+            AccentColorOverride(
+              color: kShrineBrown900,
+              child: TextField(
+                controller: _passwordController,
+                decoration: InputDecoration(
+                  labelText: 'Password',
+                ),
+                obscureText: true,
               ),
-              obscureText: true,
             ),
             ButtonBar(
               children: <Widget>[
-                // TODO: Add a beveled rectangular border to CANCEL (103)
                 FlatButton(
                   child: Text('CANCEL'),
+                  shape: BeveledRectangleBorder(
+                    borderRadius: BorderRadius.all(Radius.circular(7.0)),
+                  ),
                   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'),
+                  elevation: 8.0,
+                  shape: BeveledRectangleBorder(
+                    borderRadius: BorderRadius.all(Radius.circular(7.0)),
+                  ),
                   onPressed: () {
                     Navigator.pop(context);
                   },
@@ -85,4 +95,21 @@ class _LoginPageState extends State<LoginPage> {
   }
 }
 
-// TODO: Add AccentColorOverride (103)
+class AccentColorOverride extends StatelessWidget {
+  const AccentColorOverride({Key key, this.color, this.child})
+      : super(key: key);
+
+  final Color color;
+  final Widget child;
+
+  @override
+  Widget build(BuildContext context) {
+    return Theme(
+      child: child,
+      data: Theme.of(context).copyWith(
+        accentColor: color,
+        brightness: Brightness.dark,
+      ),
+    );
+  }
+}
diff --git a/mdc_100_series/pubspec.yaml b/mdc_100_series/pubspec.yaml
@@ -1,5 +1,5 @@
 name: Shrine
-description: Learn how to use Material for structure and layout.
+description: Discover how Material Components for Flutter make it easy to differentiate your product and express your brand through design.
 
 dependencies:
   flutter:
@@ -55,3 +55,9 @@ flutter:
     - packages/shrine_images/35-0.jpg
     - packages/shrine_images/36-0.jpg
     - packages/shrine_images/37-0.jpg
+  fonts:
+    - family: Rubik
+      fonts:
+        - asset: fonts/Rubik-Regular.ttf
+        - asset: fonts/Rubik-Medium.ttf
+          weight: 500