Skip to content

F
Front-End
Commit 3f7dd710 authored by Hans Muller's avatar Hans Muller Committed by GitHub
Browse files
Options

Shrine Tweaks (#4558)

parent 9782d97f
Hide whitespace changes
Inline Side-by-side
Showing with 106 additions and 50 deletions
examples/flutter_gallery/lib/demo/shrine/shrine_data.dart
View file @ 3f7dd710
......@@ -64,7 +64,7 @@ const List<Product> _allProducts = const <Product> [
name: 'Sunglasses',
imageAsset: 'packages/flutter_gallery_assets/shrine/products/sunnies.png',
categories: const <String>['travel', 'fashion', 'beauty'],
price: 70.00,
price: 20.00,
vendor: _trevor,
description:
'Be an optimist. Carry Sunglasses with you at all times. All Tints and '
......@@ -76,7 +76,7 @@ const List<Product> _allProducts = const <Product> [
name: 'Clock',
imageAsset: 'packages/flutter_gallery_assets/shrine/products/clock.png',
categories: const <String>['furniture'],
price: 120.00,
price: 30.00,
vendor: _trevor,
description:
'Timekeeper Co makes clocks that tell time precisely. Clock is '
......@@ -136,7 +136,7 @@ const List<Product> _allProducts = const <Product> [
name: 'Teapot',
imageAsset: 'packages/flutter_gallery_assets/shrine/products/teapot.png',
categories: const <String>['furniture', 'fashion'],
price: 210.00,
price: 70.00,
vendor: _trevor,
featureTitle: 'Beautiful little teapot',
featureDescription:
......@@ -171,7 +171,7 @@ const List<Product> _allProducts = const <Product> [
name: 'Perfect Goldfish Bowl',
imageAsset: 'packages/flutter_gallery_assets/shrine/products/fish_bowl.png',
categories: const <String>['latest', 'furniture'],
price: 25.00,
price: 30.00,
vendor: _ali,
description:
'The Perfect Bowl Co makes the best bowls for just about anything you can '
......@@ -182,7 +182,7 @@ const List<Product> _allProducts = const <Product> [
name: 'Red Lipstick Set',
imageAsset: 'packages/flutter_gallery_assets/shrine/products/lipstick.png',
categories: const <String>['fashion', 'beauty'],
price: 25.00,
price: 54.00,
vendor: _sandra,
description:
'Trying to find the perfect shade to match your mood? Try no longer. Red '
......@@ -249,7 +249,7 @@ const List<Product> _allProducts = const <Product> [
name: 'Surfboard',
imageAsset: 'packages/flutter_gallery_assets/shrine/products/surfboard.png',
categories: const <String>[ 'travel', 'latest'],
price: 25.00,
price: 120.00,
vendor: _stella,
description:
'Who says you can’t walk on water? With Surfboard, by Surfboard Supply, '
......
examples/flutter_gallery/lib/demo/shrine/shrine_home.dart
View file @ 3f7dd710
......@@ -54,23 +54,48 @@ class VendorItem extends StatelessWidget {
/// Displays the product's price. If the product is in the shopping cart the background
/// is highlighted.
class PriceItem extends StatelessWidget {
abstract class PriceItem extends StatelessWidget {
PriceItem({ Key key, this.product }) : super(key: key) {
assert(product != null);
}
final Product product;
@override
Widget build(BuildContext context) {
Widget buildItem(BuildContext context, TextStyle style, EdgeInsets padding) {
BoxDecoration decoration;
if (shoppingCart[product] != null)
decoration = new BoxDecoration(backgroundColor: const Color(0xFFFFE0E0));
return new Container(
padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
padding: padding,
decoration: decoration,
child: new Text(product.priceString, style: ShrineTheme.of(context).priceStyle)
child: new Text(product.priceString, style: style)
);
}
}
class ProductPriceItem extends PriceItem {
ProductPriceItem({ Key key, Product product }) : super(key: key, product: product);
@override
Widget build(BuildContext context) {
return buildItem(
context,
ShrineTheme.of(context).priceStyle,
const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0)
);
}
}
class FeaturePriceItem extends PriceItem {
FeaturePriceItem({ Key key, Product product }) : super(key: key, product: product);
@override
Widget build(BuildContext context) {
return buildItem(
context,
ShrineTheme.of(context).featurePriceStyle,
const EdgeInsets.symmetric(horizontal: 24.0, vertical: 16.0)
);
}
}
......@@ -124,7 +149,7 @@ class FeatureItem extends StatelessWidget {
height: unitSize,
child: new Align(
alignment: FractionalOffset.topRight,
child: new PriceItem(product: product)
child: new FeaturePriceItem(product: product)
)
),
new Flexible(
......@@ -189,37 +214,38 @@ class ProductItem extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Card(
child: new Padding(
padding: const EdgeInsets.all(8.0),
child: new Column(
children: <Widget>[
new Align(
alignment: FractionalOffset.centerRight,
child: new PriceItem(product: product)
),
new SizedBox(
width: 144.0,
height: 144.0,
child: new Stack(
children: <Widget>[
new Hero(
tag: productHeroTag,
key: new ObjectKey(product),
child: new AssetImage(
fit: ImageFit.contain,
name: product.imageAsset
)
),
new Material(
color: Theme.of(context).canvasColor.withAlpha(0x00),
child: new InkWell(onTap: onPressed)
),
]
)
),
new VendorItem(vendor: product.vendor)
]
)
child: new Column(
children: <Widget>[
new Align(
alignment: FractionalOffset.centerRight,
child: new ProductPriceItem(product: product)
),
new Container(
width: 144.0,
height: 144.0,
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: new Stack(
children: <Widget>[
new Hero(
tag: productHeroTag,
key: new ObjectKey(product),
child: new AssetImage(
fit: ImageFit.contain,
name: product.imageAsset
)
),
new Material(
color: Theme.of(context).canvasColor.withAlpha(0x00),
child: new InkWell(onTap: onPressed)
),
]
)
),
new Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: new VendorItem(vendor: product.vendor)
)
]
)
);
}
......
examples/flutter_gallery/lib/demo/shrine/shrine_page.dart
View file @ 3f7dd710
......@@ -12,23 +12,48 @@ enum ShrineAction {
emptyCart
}
/// Defines the Scaffold, AppBar, etc that the demo pages have in common.
class ShrinePage extends StatelessWidget {
class ShrinePage extends StatefulWidget {
ShrinePage({ Key key, this.scaffoldKey, this.body, this.floatingActionButton }) : super(key: key);
final Key scaffoldKey;
final Widget body;
final Widget floatingActionButton;
@override
ShrinePageState createState() => new ShrinePageState();
}
/// Defines the Scaffold, AppBar, etc that the demo pages have in common.
class ShrinePageState extends State<ShrinePage> {
int _appBarElevation = 0;
bool _handleScrollNotification(ScrollNotification notification) {
int elevation = notification.scrollable.scrollOffset <= 0.0 ? 0 : 1;
if (elevation != _appBarElevation) {
setState(() {
_appBarElevation = elevation;
});
}
return false;
}
@override
Widget build(BuildContext context) {
return new Scaffold(
key: scaffoldKey,
key: config.scaffoldKey,
appBar: new AppBar(
elevation: _appBarElevation,
backgroundColor: Theme.of(context).cardColor,
flexibleSpace: new Container(
decoration: new BoxDecoration(
border: new Border(
bottom: new BorderSide(color: const Color(0xFFD9D9D9))
)
)
),
title: new Center(
child: new Text('SHRINE', style: ShrineTheme.of(context).appBarTitleStyle)
),
backgroundColor: Theme.of(context).canvasColor,
actions: <Widget>[
new IconButton(
icon: Icons.shopping_cart,
......@@ -68,8 +93,11 @@ class ShrinePage extends StatelessWidget {
)
]
),
floatingActionButton: floatingActionButton,
body: body
floatingActionButton: config.floatingActionButton,
body: new NotificationListener<ScrollNotification>(
onNotification: _handleScrollNotification,
child: config.body
)
);
}
}
examples/flutter_gallery/lib/demo/shrine/shrine_theme.dart
View file @ 3f7dd710
......@@ -17,6 +17,7 @@ TextStyle robotoLight12(Color color) => new ShrineStyle.roboto(12.0, FontWeight.
TextStyle robotoRegular14(Color color) => new ShrineStyle.roboto(14.0, FontWeight.w500, color);
TextStyle robotoMedium14(Color color) => new ShrineStyle.roboto(14.0, FontWeight.w600, color);
TextStyle robotoLight14(Color color) => new ShrineStyle.roboto(14.0, FontWeight.w300, color);
TextStyle robotoRegular16(Color color) => new ShrineStyle.roboto(16.0, FontWeight.w500, color);
TextStyle robotoRegular20(Color color) => new ShrineStyle.roboto(20.0, FontWeight.w500, color);
TextStyle abrilFatfaceRegular24(Color color) => new ShrineStyle.abrilFatface(24.0, FontWeight.w500, color);
TextStyle abrilFatfaceRegular34(Color color) => new ShrineStyle.abrilFatface(34.0, FontWeight.w500, color);
......@@ -32,7 +33,8 @@ class ShrineTheme extends InheritedWidget {
final TextStyle appBarTitleStyle = robotoRegular20(Colors.black87);
final TextStyle vendorItemStyle = robotoRegular12(const Color(0xFF81959D));
final TextStyle priceStyle = robotoRegular14(Colors.black87);
final TextStyle featureTitleStyle = abrilFatfaceRegular34(Colors.black87);
final TextStyle featureTitleStyle = abrilFatfaceRegular34(const Color(0xFF0A3142));
final TextStyle featurePriceStyle = robotoRegular16(Colors.black87);
final TextStyle featureStyle = robotoLight14(Colors.black54);
final TextStyle orderTitleStyle = abrilFatfaceRegular24(Colors.black87);
final TextStyle orderStyle = robotoLight14(Colors.black54);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

HIAST - GitLab