Skip to content

Commit 912f385

Browse files
willlarchetianlunlee
willlarche
authored and
tianlunlee
committed
[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 (material-components#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. (material-components#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. (material-components#44) (material-components#45) [102] Complete code. [103] Starter code. [102] Correcting home being stateful. [103] Correcting order of fields. (material-components#10) [102] Removing unneeded value. [102] Dart 2. [102] Data correction. [103] README specificity. [META] Readme correction. [103] 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. (material-components#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. (material-components#44) (material-components#45) [102] Complete code. [103] Starter code. [102] Correcting home being stateful. [103] Correcting order of fields. (material-components#10) [102] Removing unneeded value. [102] Dart 2. [102] Data correction. [103] README specificity. [103] Completed code. [104] Starter code. [103] Removing unneeded directory. [103] Unused icons code. [103] Moving supplemental files. [103] Using recent changes. [103] Removing unused import. [103] Data correction. [103] Adding body2 styling. [103] Dart 2 [103] Color const correction. [104] README specificity. [104] Todos for 104 (material-components#51) [104] Update of 104 todos (material-components#58) Removed import todos and rearranged a todo to make more sense. [104] Todos for 104 (material-components#51) [104] Update of 104 todos (material-components#58) Removed import todos and rearranged a todo to make more sense. [104] Remove artifacts
1 parent 172d047 commit 912f385

File tree

7 files changed

+216
-25
lines changed

7 files changed

+216
-25
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-101-flutter](https://codelabs.developers.google.com/codelabs/mdc-101-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: 68 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -14,29 +14,90 @@
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

22+
// TODO: Convert ShrineApp to stateful widget (104)
2023
class ShrineApp extends StatelessWidget {
24+
// TODO: Add variable for selected Category (104)
25+
// TODO: Add a callback when a Category is tapped (104)
26+
2127
@override
2228
Widget build(BuildContext context) {
2329
return MaterialApp(
2430
title: 'Shrine',
31+
// TODO: Change home: to a Backdrop with a HomePage frontLayer (104)
2532
home: HomePage(),
33+
// TODO: Make currentCategory field take _currentCategory
34+
// TODO: Pass _currentCategory for frontLayer (104)
35+
// TODO: Change backLayer field value to CategoryMenuPage (104)
2636
initialRoute: '/login',
2737
onGenerateRoute: _getRoute,
38+
theme: _kShrineTheme,
2839
);
2940
}
3041

3142
Route<dynamic> _getRoute(RouteSettings settings) {
32-
if (settings.name != '/login') {
33-
return null;
43+
if (settings.name == '/login') {
44+
return MaterialPageRoute<void>(
45+
settings: settings,
46+
builder: (BuildContext context) => LoginPage(),
47+
fullscreenDialog: true,
48+
);
3449
}
3550

36-
return MaterialPageRoute<void>(
37-
settings: settings,
38-
builder: (BuildContext context) => LoginPage(),
39-
fullscreenDialog: true,
40-
);
51+
return null;
4152
}
4253
}
54+
55+
final ThemeData _kShrineTheme = _buildShrineTheme();
56+
57+
ThemeData _buildShrineTheme() {
58+
final ThemeData base = ThemeData.light();
59+
return base.copyWith(
60+
accentColor: kShrineBrown900,
61+
primaryColor: kShrinePink100,
62+
buttonColor: kShrinePink100,
63+
scaffoldBackgroundColor: kShrineBackgroundWhite,
64+
cardColor: kShrineBackgroundWhite,
65+
textSelectionColor: kShrinePink100,
66+
errorColor: kShrineErrorRed,
67+
buttonTheme: ButtonThemeData(
68+
textTheme: ButtonTextTheme.accent,
69+
),
70+
primaryIconTheme: base.iconTheme.copyWith(
71+
color: kShrineBrown900
72+
),
73+
inputDecorationTheme: InputDecorationTheme(
74+
border: CutCornersBorder(),
75+
),
76+
textTheme: _buildShrineTextTheme(base.textTheme),
77+
primaryTextTheme: _buildShrineTextTheme(base.primaryTextTheme),
78+
accentTextTheme: _buildShrineTextTheme(base.accentTextTheme),
79+
);
80+
}
81+
82+
TextTheme _buildShrineTextTheme(TextTheme base) {
83+
return base.copyWith(
84+
headline: base.headline.copyWith(
85+
fontWeight: FontWeight.w500,
86+
),
87+
title: base.title.copyWith(
88+
fontSize: 18.0
89+
),
90+
caption: base.caption.copyWith(
91+
fontWeight: FontWeight.w400,
92+
fontSize: 14.0,
93+
),
94+
body2: base.body2.copyWith(
95+
fontWeight: FontWeight.w500,
96+
fontSize: 16.0,
97+
),
98+
).apply(
99+
fontFamily: 'Rubik',
100+
displayColor: kShrineBrown900,
101+
bodyColor: kShrineBrown900,
102+
);
103+
}

‎mdc_100_series/lib/colors.dart

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
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+
21+
const kShrineBrown900 = const Color(0xFF442B2D);
22+
23+
const kShrineErrorRed = const Color(0xFFC5032B);
24+
25+
const kShrineSurfaceWhite = const Color(0xFFFFFBFA);
26+
const kShrineBackgroundWhite = Colors.white;

‎mdc_100_series/lib/home.dart

Lines changed: 32 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,43 @@
1414

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

17+
import 'model/data.dart';
18+
import 'model/product.dart';
19+
import 'supplemental/asymmetric_view.dart';
20+
1721
class HomePage extends StatelessWidget {
22+
// TODO: Add a variable for Category (104)
23+
1824
@override
1925
Widget build(BuildContext context) {
26+
// TODO: Return an AsymmetricView (104)
27+
// TODO: Pass Category variable to AsymmetricView (104)
2028
return Scaffold(
21-
body: Center(
22-
child: Text('You did it!'),
29+
appBar: AppBar(
30+
brightness: Brightness.light,
31+
leading: IconButton(
32+
icon: Icon(Icons.menu),
33+
onPressed: () {
34+
print('Menu button');
35+
},
36+
),
37+
title: Text('SHRINE'),
38+
actions: <Widget>[
39+
IconButton(
40+
icon: Icon(Icons.search),
41+
onPressed: () {
42+
print('Search button');
43+
},
44+
),
45+
IconButton(
46+
icon: Icon(Icons.tune),
47+
onPressed: () {
48+
print('Filter button');
49+
},
50+
),
51+
],
2352
),
53+
body: AsymmetricView(products: getProducts(Category.all)),
2454
);
2555
}
2656
}

‎mdc_100_series/lib/login.dart

Lines changed: 78 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -14,34 +14,98 @@
1414

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

17+
import 'colors.dart';
18+
1719
class LoginPage extends StatefulWidget {
1820
@override
19-
_LoginPageState createState() => new _LoginPageState();
21+
_LoginPageState createState() => _LoginPageState();
2022
}
2123

2224
class _LoginPageState extends State<LoginPage> {
23-
// TODO: Add text editing controllers (101)
25+
final _usernameController = TextEditingController();
26+
final _passwordController = TextEditingController();
27+
2428
@override
2529
Widget build(BuildContext context) {
26-
return new Scaffold(
27-
body: new SafeArea(
28-
child: new ListView(
29-
padding: const EdgeInsets.symmetric(horizontal: 24.0),
30+
return Scaffold(
31+
body: SafeArea(
32+
child: ListView(
33+
padding: EdgeInsets.symmetric(horizontal: 24.0),
3034
children: <Widget>[
31-
const SizedBox(height: 80.0),
32-
new Column(
35+
SizedBox(height: 80.0),
36+
Column(
37+
children: <Widget>[
38+
Image.asset('assets/diamond.png'),
39+
SizedBox(height: 16.0),
40+
Text(
41+
'SHRINE',
42+
style: Theme.of(context).textTheme.headline,
43+
),
44+
],
45+
),
46+
SizedBox(height: 120.0),
47+
PrimaryColorOverride(
48+
color: kShrineBrown900,
49+
child: TextField(
50+
controller: _usernameController,
51+
decoration: InputDecoration(
52+
labelText: 'Username',
53+
),
54+
),
55+
),
56+
const SizedBox(height: 12.0),
57+
new PrimaryColorOverride(
58+
color: kShrineBrown900,
59+
child: TextField(
60+
controller: _passwordController,
61+
decoration: InputDecoration(
62+
labelText: 'Password',
63+
),
64+
),
65+
),
66+
ButtonBar(
3367
children: <Widget>[
34-
new Image.asset('assets/diamond.png'),
35-
const SizedBox(height: 16.0),
36-
const Text('SHRINE'),
68+
FlatButton(
69+
child: Text('CANCEL'),
70+
shape: BeveledRectangleBorder(
71+
borderRadius: BorderRadius.all(Radius.circular(7.0)),
72+
),
73+
onPressed: () {
74+
_usernameController.clear();
75+
_passwordController.clear();
76+
},
77+
),
78+
RaisedButton(
79+
child: Text('NEXT'),
80+
elevation: 8.0,
81+
shape: BeveledRectangleBorder(
82+
borderRadius: BorderRadius.all(Radius.circular(7.0)),
83+
),
84+
onPressed: () {
85+
Navigator.pop(context);
86+
},
87+
),
3788
],
3889
),
39-
const SizedBox(height: 120.0),
40-
// TODO: Add TextField widgets (101)
41-
// TODO: Add button bar (101)
4290
],
4391
),
4492
),
4593
);
4694
}
4795
}
96+
97+
class PrimaryColorOverride extends StatelessWidget {
98+
const PrimaryColorOverride({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(primaryColor: color),
109+
);
110+
}
111+
}

‎mdc_100_series/lib/supplemental/product_columns.dart

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,8 +33,10 @@ class TwoProductCardColumn extends StatelessWidget {
3333

3434
double heightOfCards = (constraints.biggest.height - spacerHeight) / 2.0;
3535
double heightOfImages = heightOfCards - ProductCard.kTextBoxHeight;
36+
// TODO: Change imageAspectRatio calculation (104)
3637
double imageAspectRatio = constraints.biggest.width / heightOfImages;
3738

39+
// TODO: Replace Column with a ListView (104)
3840
return Column(
3941
mainAxisAlignment: MainAxisAlignment.center,
4042
crossAxisAlignment: CrossAxisAlignment.center,
@@ -71,6 +73,7 @@ class OneProductCardColumn extends StatelessWidget {
7173

7274
@override
7375
Widget build(BuildContext context) {
76+
// TODO: Replace Column with a ListView (104)
7477
return Column(
7578
mainAxisAlignment: MainAxisAlignment.end,
7679
children: <Widget>[

‎mdc_100_series/pubspec.yaml

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
name: Shrine
2-
description: Learn the basics of using Material Components by building a simple app with core components.
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,10 @@ flutter:
5555
- packages/shrine_images/35-0.jpg
5656
- packages/shrine_images/36-0.jpg
5757
- packages/shrine_images/37-0.jpg
58+
59+
fonts:
60+
- family: Rubik
61+
fonts:
62+
- asset: fonts/Rubik-Regular.ttf
63+
- asset: fonts/Rubik-Medium.ttf
64+
weight: 500

0 commit comments

Comments
 (0)