Skip to content

Commit 0e89f76

Browse files
willlarchewilllarche
committed
[103] Completed code.
1 parent 635c42b commit 0e89f76

File tree

6 files changed

+133
-91
lines changed

6 files changed

+133
-91
lines changed

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ Codelabs MDC-101 through MDC-104 will guide you through building and integrating
1111
The starter and completed code is in the various branches of this repo.
1212

1313
## Getting Started
14-
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.
14+
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.
1515

1616
## Support
1717

‎mdc_100_series/lib/app.dart

Lines changed: 52 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,10 @@
1414

1515
import 'package:flutter/material.dart';
1616

17+
import 'colors.dart';
1718
import 'home.dart';
1819
import 'login.dart';
20+
import 'supplemental/cut_corners_border.dart';
1921

2022
// TODO: Convert ShrineApp to stateful widget (104)
2123
class ShrineApp extends StatelessWidget {
@@ -31,7 +33,7 @@ class ShrineApp extends StatelessWidget {
3133
// TODO: Change backLayer field value to CategoryMenuPage (104)
3234
initialRoute: '/login',
3335
onGenerateRoute: _getRoute,
34-
// TODO: Add a theme (103)
36+
theme: _kShrineTheme,
3537
);
3638
}
3739

@@ -48,5 +50,52 @@ class ShrineApp extends StatelessWidget {
4850
}
4951
}
5052

51-
// TODO: Build a Shrine Theme (103)
52-
// TODO: Build a Shrine Text Theme (103)
53+
final ThemeData _kShrineTheme = _buildShrineTheme();
54+
55+
ThemeData _buildShrineTheme() {
56+
final ThemeData base = ThemeData.light();
57+
return base.copyWith(
58+
accentColor: kShrineBrown900,
59+
primaryColor: kShrinePink100,
60+
buttonColor: kShrinePink100,
61+
scaffoldBackgroundColor: kShrineBackgroundWhite,
62+
cardColor: kShrineBackgroundWhite,
63+
textSelectionColor: kShrinePink100,
64+
errorColor: kShrineErrorRed,
65+
buttonTheme: ButtonThemeData(
66+
textTheme: ButtonTextTheme.accent,
67+
),
68+
primaryIconTheme: base.iconTheme.copyWith(
69+
color: kShrineBrown900
70+
),
71+
inputDecorationTheme: InputDecorationTheme(
72+
border: CutCornersBorder(),
73+
),
74+
textTheme: _buildShrineTextTheme(base.textTheme),
75+
primaryTextTheme: _buildShrineTextTheme(base.primaryTextTheme),
76+
accentTextTheme: _buildShrineTextTheme(base.accentTextTheme),
77+
);
78+
}
79+
80+
TextTheme _buildShrineTextTheme(TextTheme base) {
81+
return base.copyWith(
82+
headline: base.headline.copyWith(
83+
fontWeight: FontWeight.w500,
84+
),
85+
title: base.title.copyWith(
86+
fontSize: 18.0
87+
),
88+
caption: base.caption.copyWith(
89+
fontWeight: FontWeight.w400,
90+
fontSize: 14.0,
91+
),
92+
body2: base.body2.copyWith(
93+
fontWeight: FontWeight.w500,
94+
fontSize: 16.0,
95+
),
96+
).apply(
97+
fontFamily: 'Rubik',
98+
displayColor: kShrineBrown900,
99+
bodyColor: kShrineBrown900,
100+
);
101+
}

‎mdc_100_series/lib/colors.dart

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
// Copyright 2018-present the Flutter authors. All Rights Reserved.
2+
//
3+
// Licensed under the Apache License, Version 2.0 (the "License");
4+
// you may not use this file except in compliance with the License.
5+
// You may obtain a copy of the License at
6+
//
7+
// http://www.apache.org/licenses/LICENSE-2.0
8+
//
9+
// Unless required by applicable law or agreed to in writing, software
10+
// distributed under the License is distributed on an "AS IS" BASIS,
11+
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12+
// See the License for the specific language governing permissions and
13+
// limitations under the License.
14+
15+
import 'package:flutter/material.dart';
16+
17+
const kShrinePink50 = const Color(0xFFFEEAE6);
18+
const kShrinePink100 = const Color(0xFFFEDBD0);
19+
const kShrinePink300 = const Color(0xFFFBB8AC);
20+
const kShrinePink400 = const Color(0xFFEAA4A4);
21+
22+
const kShrineBrown900 = const Color(0xFF442B2D);
23+
24+
const kShrineErrorRed = const Color(0xFFC5032B);
25+
26+
const kShrineSurfaceWhite = const Color(0xFFFFFBFA);
27+
const kShrineBackgroundWhite = Colors.white;

‎mdc_100_series/lib/home.dart

Lines changed: 4 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -13,78 +13,21 @@
1313
// limitations under the License.
1414

1515
import 'package:flutter/material.dart';
16-
import 'package:intl/intl.dart';
1716

1817
import 'model/products_repository.dart';
1918
import 'model/product.dart';
19+
import 'supplemental/asymmetric_view.dart';
2020

2121
class HomePage extends StatelessWidget {
2222
// TODO: Add a variable for Category (104)
2323

24-
List<Card> _buildGridCards(BuildContext context) {
25-
List<Product> products = ProductsRepository.loadProducts(Category.all);
26-
27-
if (products == null || products.isEmpty) {
28-
return const <Card>[];
29-
}
30-
31-
final ThemeData theme = Theme.of(context);
32-
final NumberFormat formatter = NumberFormat.simpleCurrency(
33-
locale: Localizations.localeOf(context).toString());
34-
35-
return products.map((product) {
36-
return Card(
37-
// TODO: Adjust card heights (103)
38-
child: Column(
39-
// TODO: Center items on the card (103)
40-
crossAxisAlignment: CrossAxisAlignment.start,
41-
children: <Widget>[
42-
AspectRatio(
43-
aspectRatio: 18 / 11,
44-
child: Image.asset(
45-
product.assetName,
46-
package: product.assetPackage,
47-
fit: BoxFit.fitWidth,
48-
),
49-
),
50-
Expanded(
51-
child: Padding(
52-
padding: EdgeInsets.fromLTRB(16.0, 12.0, 16.0, 8.0),
53-
child: Column(
54-
// TODO: Align labels to the bottom and center (103)
55-
crossAxisAlignment: CrossAxisAlignment.start,
56-
// TODO: Change innermost Column (103)
57-
children: <Widget>[
58-
// TODO: Handle overflowing labels (103)
59-
// TODO(larche): Make headline6 when available
60-
Text(
61-
product.name,
62-
style: theme.textTheme.title,
63-
maxLines: 1,
64-
),
65-
SizedBox(height: 8.0),
66-
// TODO(larche): Make subtitle2 when available
67-
Text(
68-
formatter.format(product.price),
69-
style: theme.textTheme.body2,
70-
),
71-
],
72-
),
73-
),
74-
),
75-
],
76-
),
77-
);
78-
}).toList();
79-
}
80-
8124
@override
8225
Widget build(BuildContext context) {
8326
// TODO: Return an AsymmetricView (104)
8427
// TODO: Pass Category variable to AsymmetricView (104)
85-
8628
return Scaffold(
8729
appBar: AppBar(
30+
brightness: Brightness.light,
8831
leading: IconButton(
8932
icon: Icon(
9033
Icons.menu,
@@ -116,14 +59,8 @@ class HomePage extends StatelessWidget {
11659
),
11760
],
11861
),
119-
body: Center(
120-
child: GridView.count(
121-
crossAxisCount: 2,
122-
padding: EdgeInsets.all(16.0),
123-
childAspectRatio: 8.0 / 9.0,
124-
children: _buildGridCards(context),
125-
),
126-
),
62+
body: AsymmetricView(
63+
products: ProductsRepository.loadProducts(Category.all)),
12764
);
12865
}
12966
}

‎mdc_100_series/lib/login.dart

Lines changed: 42 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@
1414

1515
import 'package:flutter/material.dart';
1616

17+
import 'colors.dart';
18+
1719
class LoginPage extends StatefulWidget {
1820
@override
1921
_LoginPageState createState() => _LoginPageState();
@@ -35,43 +37,50 @@ class _LoginPageState extends State<LoginPage> {
3537
children: <Widget>[
3638
Image.asset('assets/diamond.png'),
3739
SizedBox(height: 16.0),
38-
Text('SHRINE'),
40+
Text(
41+
'SHRINE',
42+
style: Theme.of(context).textTheme.headline,
43+
),
3944
],
4045
),
4146
SizedBox(height: 120.0),
42-
// TODO: Wrap Username with AccentColorOverride (103)
43-
// TODO: Remove filled: true values (103)
44-
TextField(
45-
controller: _usernameController,
46-
decoration: InputDecoration(
47-
filled: true,
48-
labelText: 'Username',
47+
AccentColorOverride(
48+
color: kShrineBrown900,
49+
child: TextField(
50+
controller: _usernameController,
51+
decoration: InputDecoration(
52+
labelText: 'Username',
53+
),
4954
),
5055
),
5156
SizedBox(height: 12.0),
52-
// TODO: Wrap Password with AccentColorOverride (103)
53-
TextField(
54-
controller: _passwordController,
55-
decoration: InputDecoration(
56-
filled: true,
57-
labelText: 'Password',
57+
AccentColorOverride(
58+
color: kShrineBrown900,
59+
child: TextField(
60+
controller: _passwordController,
61+
decoration: InputDecoration(
62+
labelText: 'Password',
63+
),
5864
),
59-
obscureText: true,
6065
),
6166
ButtonBar(
6267
children: <Widget>[
63-
// TODO: Add a beveled rectangular border to CANCEL (103)
6468
FlatButton(
6569
child: Text('CANCEL'),
70+
shape: BeveledRectangleBorder(
71+
borderRadius: BorderRadius.all(Radius.circular(7.0)),
72+
),
6673
onPressed: () {
6774
_usernameController.clear();
6875
_passwordController.clear();
6976
},
7077
),
71-
// TODO: Add an elevation to NEXT (103)
72-
// TODO: Add a beveled rectangular border to NEXT (103)
7378
RaisedButton(
7479
child: Text('NEXT'),
80+
elevation: 8.0,
81+
shape: BeveledRectangleBorder(
82+
borderRadius: BorderRadius.all(Radius.circular(7.0)),
83+
),
7584
onPressed: () {
7685
Navigator.pop(context);
7786
},
@@ -85,4 +94,18 @@ class _LoginPageState extends State<LoginPage> {
8594
}
8695
}
8796

88-
// TODO: Add AccentColorOverride (103)
97+
class AccentColorOverride extends StatelessWidget {
98+
const AccentColorOverride({Key key, this.color, this.child})
99+
: super(key: key);
100+
101+
final Color color;
102+
final Widget child;
103+
104+
@override
105+
Widget build(BuildContext context) {
106+
return Theme(
107+
child: child,
108+
data: Theme.of(context).copyWith(accentColor: color),
109+
);
110+
}
111+
}

‎mdc_100_series/pubspec.yaml

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
name: Shrine
2-
description: Learn how to use Material for structure and layout.
2+
description: Take your design up a notch and learn to use our advanced component backdrop menu.
33

44
dependencies:
55
flutter:
@@ -55,3 +55,9 @@ flutter:
5555
- packages/shrine_images/35-0.jpg
5656
- packages/shrine_images/36-0.jpg
5757
- packages/shrine_images/37-0.jpg
58+
fonts:
59+
- family: Rubik
60+
fonts:
61+
- asset: fonts/Rubik-Regular.ttf
62+
- asset: fonts/Rubik-Medium.ttf
63+
weight: 500

0 commit comments

Comments
 (0)