diff --git a/lib/app.dart b/lib/app.dart index e464483..b47e384 100644 --- a/lib/app.dart +++ b/lib/app.dart @@ -16,10 +16,10 @@ import 'package:flutter/material.dart'; import 'home.dart'; import 'login.dart'; +import 'colors.dart'; // TODO: Convert ShrineApp to stateful widget (104) class ShrineApp extends StatelessWidget { - @override Widget build(BuildContext context) { return MaterialApp( @@ -48,5 +48,25 @@ class ShrineApp extends StatelessWidget { } } -// TODO: Build a Shrine Theme (103) +final ThemeData _kShrineTheme = _buildShrineTheme(); + +ThemeData _buildShrineTheme() { + final ThemeData base = ThemeData.light(); + return base.copyWith( + accentColor: kShrineBrown900, + primaryColor: kShrinePink100, + buttonTheme: base.buttonTheme.copyWith( + buttonColor: kShrinePink100, + textTheme: ButtonTextTheme.normal, + ), + scaffoldBackgroundColor: kShrineBackgroundWhite, + cardColor: kShrineBackgroundWhite, + textSelectionColor: kShrinePink100, + errorColor: kShrineErrorRed, + // TODO: Add the text themes (103) + // TODO: Add the icon themes (103) + // TODO: Decorate the inputs (103) + ); +} + // TODO: Build a Shrine Text Theme (103) diff --git a/lib/colors.dart b/lib/colors.dart new file mode 100644 index 0000000..352fb57 --- /dev/null +++ b/lib/colors.dart @@ -0,0 +1,13 @@ +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; \ No newline at end of file diff --git a/lib/home.dart b/lib/home.dart index a4d43b9..0c70d4b 100644 --- a/lib/home.dart +++ b/lib/home.dart @@ -13,9 +13,12 @@ // limitations under the License. import 'package:flutter/material.dart'; +import 'package:intl/intl.dart'; + +import 'model/products_repository.dart'; +import 'model/product.dart'; class HomePage extends StatelessWidget { - // TODO: Make a collection of cards (102) // TODO: Add a variable for Category (104) @override Widget build(BuildContext context) { @@ -57,11 +60,11 @@ class HomePage extends StatelessWidget { crossAxisCount: 2, padding: EdgeInsets.all(16.0), childAspectRatio: 8.0 / 9.0, - children: _buildGridCards(10), + children: _buildGridCards(context), )); } - List _buildGridCards(int count) { + /* List _buildGridCards(int count) { List cards = List.generate( count, (int index) => Card( @@ -88,5 +91,55 @@ class HomePage extends StatelessWidget { ), )); return cards; + }*/ + List _buildGridCards(BuildContext context) { + List product = ProductsRepository.loadProducts(Category.all); + + if (product == null || product.isEmpty) { + return const []; + } + + final ThemeData theme = Theme.of(context); + final NumberFormat formatter = NumberFormat.simpleCurrency( + locale: Localizations.localeOf(context).toString()); + + return product.map((product) { + return Card( + clipBehavior: Clip.antiAlias, + child: Column( + 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( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + product.name, + style: theme.textTheme.title, + maxLines: 1, + ), + SizedBox(height: 8.0), + Text( + formatter.format(product.price), + style: theme.textTheme.body2, + ), + ], + ), + ), + ), + ], + ), + ); + }).toList(); } }