From e0a743effea3363b225b7a6f9989336945d196f8 Mon Sep 17 00:00:00 2001 From: haidar Date: Sat, 23 Mar 2019 08:46:07 +0500 Subject: [PATCH] code lab part 3 done. --- lib/app.dart | 44 ++++++++++++++++++++++++++++---------- lib/colors.dart | 5 ++++- lib/home.dart | 34 ++++++++++++++++++----------- lib/login.dart | 57 +++++++++++++++++++++++++++++++++++++------------ pubspec.yaml | 6 ++++++ 5 files changed, 108 insertions(+), 38 deletions(-) diff --git a/lib/app.dart b/lib/app.dart index b47e384..0cf6d63 100644 --- a/lib/app.dart +++ b/lib/app.dart @@ -17,6 +17,7 @@ import 'package:flutter/material.dart'; import 'home.dart'; import 'login.dart'; import 'colors.dart'; +import 'supplemental/cut_corners_border.dart'; // TODO: Convert ShrineApp to stateful widget (104) class ShrineApp extends StatelessWidget { @@ -31,7 +32,7 @@ class ShrineApp extends StatelessWidget { // TODO: Change backLayer field value to CategoryMenuPage (104) initialRoute: '/login', onGenerateRoute: _getRoute, - // TODO: Add a theme (103) + theme: _kShrineTheme, ); } @@ -51,22 +52,43 @@ class ShrineApp extends StatelessWidget { final ThemeData _kShrineTheme = _buildShrineTheme(); ThemeData _buildShrineTheme() { - final ThemeData base = ThemeData.light(); + final ThemeData base = ThemeData.dark(); return base.copyWith( - accentColor: kShrineBrown900, - primaryColor: kShrinePink100, + accentColor: kShrineAltDarkGrey, + primaryColor: kShrineAltDarkGrey, buttonTheme: base.buttonTheme.copyWith( - buttonColor: kShrinePink100, + buttonColor: kShrineAltYellow, textTheme: ButtonTextTheme.normal, ), - scaffoldBackgroundColor: kShrineBackgroundWhite, - cardColor: kShrineBackgroundWhite, + scaffoldBackgroundColor: kShrineAltDarkGrey, + cardColor: kShrineAltDarkGrey, textSelectionColor: kShrinePink100, errorColor: kShrineErrorRed, - // TODO: Add the text themes (103) - // TODO: Add the icon themes (103) - // TODO: Decorate the inputs (103) + textTheme: _buildShrineTextTheme(base.textTheme), + primaryTextTheme: _buildShrineTextTheme(base.primaryTextTheme), + accentTextTheme: _buildShrineTextTheme(base.accentTextTheme), + primaryIconTheme: base.iconTheme.copyWith(color: kShrineAltYellow), + inputDecorationTheme: InputDecorationTheme( + border: CutCornersBorder(), + ), ); } -// TODO: Build a Shrine Text Theme (103) +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, + ), + ) + .apply( + fontFamily: 'Rubik', + displayColor: kShrineSurfaceWhite, + bodyColor: kShrineSurfaceWhite, + ); +} diff --git a/lib/colors.dart b/lib/colors.dart index 352fb57..2952561 100644 --- a/lib/colors.dart +++ b/lib/colors.dart @@ -10,4 +10,7 @@ const kShrineBrown900 = const Color(0xFF442B2D); const kShrineErrorRed = const Color(0xFFC5032B); const kShrineSurfaceWhite = const Color(0xFFFFFBFA); -const kShrineBackgroundWhite = Colors.white; \ No newline at end of file +const kShrineBackgroundWhite = Colors.white; + +const kShrineAltDarkGrey = const Color(0xFF414149); +const kShrineAltYellow = const Color(0xFFFFCF44); \ No newline at end of file diff --git a/lib/home.dart b/lib/home.dart index 0c70d4b..27444bd 100644 --- a/lib/home.dart +++ b/lib/home.dart @@ -17,6 +17,7 @@ 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) @@ -26,6 +27,7 @@ class HomePage extends StatelessWidget { // TODO: Pass Category variable to AsymmetricView (104) return Scaffold( appBar: AppBar( + brightness: Brightness.dark, title: Text("Shrine"), leading: IconButton( icon: Icon( @@ -56,12 +58,16 @@ class HomePage extends StatelessWidget { ) ], ), - body: GridView.count( - crossAxisCount: 2, - padding: EdgeInsets.all(16.0), - childAspectRatio: 8.0 / 9.0, - children: _buildGridCards(context), - )); + body: AsymmetricView( + products: ProductsRepository.loadProducts(Category.all), + ) +// body: GridView.count( +// crossAxisCount: 2, +// padding: EdgeInsets.all(16.0), +// childAspectRatio: 8.0 / 9.0, +// children: _buildGridCards(context), +// ) + ); } /* List _buildGridCards(int count) { @@ -105,9 +111,10 @@ class HomePage extends StatelessWidget { return product.map((product) { return Card( + elevation: 0.0, clipBehavior: Clip.antiAlias, child: Column( - crossAxisAlignment: CrossAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.center, children: [ AspectRatio( aspectRatio: 18 / 11, @@ -121,17 +128,20 @@ class HomePage extends StatelessWidget { child: Padding( padding: EdgeInsets.fromLTRB(16.0, 12.0, 16.0, 8.0), child: Column( - crossAxisAlignment: CrossAxisAlignment.start, + mainAxisAlignment: MainAxisAlignment.end, + crossAxisAlignment: CrossAxisAlignment.center, children: [ Text( - product.name, - style: theme.textTheme.title, + product == null ? '' : product.name, + style: theme.textTheme.button, + softWrap: false, + overflow: TextOverflow.ellipsis, maxLines: 1, ), SizedBox(height: 8.0), Text( - formatter.format(product.price), - style: theme.textTheme.body2, + product == null ? '' : formatter.format(product.price), + style: theme.textTheme.caption, ), ], ), diff --git a/lib/login.dart b/lib/login.dart index 3571dc9..7384f4a 100644 --- a/lib/login.dart +++ b/lib/login.dart @@ -13,6 +13,7 @@ // limitations under the License. import 'package:flutter/material.dart'; +import 'colors.dart'; class LoginPage extends StatefulWidget { @override @@ -32,32 +33,39 @@ class _LoginPageState extends State { SizedBox(height: 80.0), Column( children: [ - Image.asset('assets/diamond.png'), + Image.asset('assets/diamond.png', + color: kShrineBackgroundWhite,), SizedBox(height: 16.0), Text('SHRINE'), ], ), SizedBox(height: 120.0), - // TODO: Wrap Username with AccentColorOverride (103) - // TODO: Remove filled: true values (103) - // TODO: Wrap Password with AccentColorOverride (103) - TextField( - controller: _usernameController, - decoration: InputDecoration(filled: true, labelText: 'Username'), + AccentColorOverride( + color: kShrineAltYellow, + child: TextField( + controller: _usernameController, + decoration: InputDecoration(labelText: 'Username'), + ), ), SizedBox(height: 12.0), - TextField( - controller: _passwordController, - decoration: InputDecoration( - filled: true, - labelText: 'Password', + AccentColorOverride( + color: kShrineAltYellow, + child: TextField( + controller: _passwordController, + decoration: InputDecoration( + labelText: 'Password', + ), + obscureText: true, ), - obscureText: true, ), ButtonBar( children: [ FlatButton( child: Text('CANCEL'), + + shape: BeveledRectangleBorder( + borderRadius: BorderRadius.all(Radius.circular(7.0)) + ), onPressed: () { _usernameController.clear(); _passwordController.clear(); @@ -65,6 +73,10 @@ class _LoginPageState extends State { ), RaisedButton( child: Text('NEXT'), + elevation: 8.0, + shape: BeveledRectangleBorder( + borderRadius: BorderRadius.all(Radius.circular(7.0)) + ), onPressed: () { Navigator.pop(context); }, @@ -78,4 +90,21 @@ class _LoginPageState extends State { } } -// 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, + ), + ); + } +} \ No newline at end of file diff --git a/pubspec.yaml b/pubspec.yaml index 350ae24..75d0f50 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -14,6 +14,12 @@ dev_dependencies: sdk: flutter flutter: + fonts: + - family: Rubik + fonts: + - asset: fonts/Rubik-Regular.ttf + - asset: fonts/Rubik-Medium.ttf + weight: 500 uses-material-design: true assets: - assets/diamond.png