Skip to content

F
Front-End
Commit 2315432d authored by Matt Perry's avatar Matt Perry Committed by GitHub
Browse files
Options

Pesto polish fixes. (#4514) 

- Fix the background color and AppBar transparency on the Recipe page.
- Use a Hero animation for the recipe card.
- Draw the background image under the status bar on the recipe page.
- Added instructional text on favorites page when there are no favorites.

BUG=https://github.com/flutter/flutter/issues/4403
BUG=https://github.com/flutter/flutter/issues/4405
BUG=https://github.com/flutter/flutter/issues/4436
BUG=https://github.com/flutter/flutter/issues/4399
parent 505b2824
Hide whitespace changes
Inline Side-by-side
Showing with 107 additions and 87 deletions
examples/flutter_gallery/lib/demo/pesto_demo.dart
View file @ 2315432d
......@@ -52,15 +52,12 @@ class PestoDemo extends StatefulWidget {
class _PestoDemoState extends State<PestoDemo> {
final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();
final TextStyle favoritesMessageStyle = _textStyle(16.0);
final TextStyle userStyle = _textStyle(12.0, FontWeight.bold);
final TextStyle emailStyle = _textStyle(12.0).copyWith(color: Colors.black54);
@override
Widget build(BuildContext context) {
final double statusBarHeight = MediaQuery.of(context).padding.top;
List<Recipe> recipes = config.showFavorites ? favoriteRecipes.toList() : kRecipes;
return new Theme(
data: _kTheme,
child: new Scaffold(
......@@ -72,20 +69,7 @@ class _PestoDemoState extends State<PestoDemo> {
child: new Icon(icon: Icons.edit),
onPressed: () { }
),
body: new ScrollableGrid(
delegate: new MaxTileWidthGridDelegate(
maxTileWidth: 500.0,
rowSpacing: 8.0,
columnSpacing: 8.0,
padding: new EdgeInsets.fromLTRB(8.0, 8.0 + _kAppBarHeight + statusBarHeight, 8.0, 8.0)
),
children: recipes.map(
(Recipe recipe) => new _RecipeCard(
recipe: recipe,
onTap: () { _showRecipe(context, recipe); }
)
)
)
body: _buildBody(context)
)
);
}
......@@ -184,6 +168,34 @@ class _PestoDemoState extends State<PestoDemo> {
);
}
Widget _buildBody(BuildContext context) {
final double statusBarHeight = MediaQuery.of(context).padding.top;
List<Recipe> recipes = config.showFavorites ? favoriteRecipes.toList() : kRecipes;
final EdgeInsets padding = new EdgeInsets.fromLTRB(8.0, 8.0 + _kAppBarHeight + statusBarHeight, 8.0, 8.0);
if (config.showFavorites && recipes.isEmpty) {
return new Padding(
padding: padding,
child: new Text('Save your favorite recipes to see them here.', style: favoritesMessageStyle)
);
}
return new ScrollableGrid(
delegate: new MaxTileWidthGridDelegate(
maxTileWidth: 500.0,
rowSpacing: 8.0,
columnSpacing: 8.0,
padding: padding
),
children: recipes.map(
(Recipe recipe) => new _RecipeCard(
recipe: recipe,
onTap: () { _showRecipe(context, recipe); }
)
)
);
}
void _showFavorites(BuildContext context) {
Navigator.push(context, new MaterialPageRoute<Null>(
builder: (BuildContext context) {
......@@ -218,37 +230,40 @@ class _RecipeCard extends StatelessWidget {
Widget build(BuildContext context) {
return new GestureDetector(
onTap: onTap,
child: new Card(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new AssetImage(
name: recipe.imagePath,
fit: ImageFit.scaleDown
),
new Flexible(
child: new Row(
children: <Widget>[
new Padding(
padding: const EdgeInsets.all(16.0),
child: new AssetImage(
width: 48.0,
height: 48.0,
name: recipe.ingredientsImagePath
child: new Hero(
tag: recipe.imagePath,
child: new Card(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new AssetImage(
name: recipe.imagePath,
fit: ImageFit.scaleDown
),
new Flexible(
child: new Row(
children: <Widget>[
new Padding(
padding: const EdgeInsets.all(16.0),
child: new AssetImage(
width: 48.0,
height: 48.0,
name: recipe.ingredientsImagePath
)
),
new Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Text(recipe.name, style: titleStyle),
new Text(recipe.author, style: authorStyle),
]
)
),
new Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Text(recipe.name, style: titleStyle),
new Text(recipe.author, style: authorStyle),
]
)
]
]
)
)
)
]
]
)
)
)
);
......@@ -275,13 +290,14 @@ class _RecipePageState extends State<_RecipePage> {
// here because that doesn't allow us to overlap the app bar on top of the
// content.
final double statusBarHeight = MediaQuery.of(context).padding.top;
return new Padding(
padding: new EdgeInsets.only(top: statusBarHeight),
child: new Stack(
children: <Widget>[
_buildContainer(context),
new AppBar(
return new Stack(
children: <Widget>[
_buildContainer(context),
new Padding(
padding: new EdgeInsets.only(top: statusBarHeight),
child: new AppBar(
backgroundColor: Colors.transparent,
elevation: 0,
leading: new IconButton(
icon: Icons.arrow_back,
onPressed: () => Navigator.pop(context),
......@@ -299,8 +315,8 @@ class _RecipePageState extends State<_RecipePage> {
)
]
)
]
)
)
]
);
}
......@@ -312,40 +328,44 @@ class _RecipePageState extends State<_RecipePage> {
Size screenSize = MediaQuery.of(context).size;
bool fullWidth = (screenSize.width < _kRecipePageMaxWidth);
const double fabHalfSize = 28.0; // TODO(mpcomplete): needs to adapt to screen size
return new DecoratedBox(
decoration: new BoxDecoration(
backgroundImage: new BackgroundImage(
image: DefaultAssetBundle.of(context).loadImage(config.recipe.imagePath),
alignment: FractionalOffset.topCenter,
fit: fullWidth ? ImageFit.fitWidth : ImageFit.cover
)
),
child: new Align(
alignment: FractionalOffset.bottomCenter,
child: new Block(
children: <Widget>[
new Padding(
padding: new EdgeInsets.only(top: screenSize.height*0.3),
child: new Stack(
children: <Widget>[
new Padding(
padding: new EdgeInsets.only(top: fabHalfSize),
child: new SizedBox(
width: fullWidth ? null : _kRecipePageMaxWidth,
child: new _RecipeSheet(recipe: config.recipe)
)
),
new Positioned(
right: 16.0,
child: new FloatingActionButton(
child: new Icon(icon: isFavorite ? Icons.favorite : Icons.favorite_border),
onPressed: _toggleFavorite
return new Hero(
tag: config.recipe.imagePath,
child: new DecoratedBox(
decoration: new BoxDecoration(
backgroundColor: Theme.of(context).canvasColor,
backgroundImage: new BackgroundImage(
image: DefaultAssetBundle.of(context).loadImage(config.recipe.imagePath),
alignment: FractionalOffset.topCenter,
fit: fullWidth ? ImageFit.fitWidth : ImageFit.cover
)
),
child: new Align(
alignment: FractionalOffset.bottomCenter,
child: new Block(
children: <Widget>[
new Padding(
padding: new EdgeInsets.only(top: screenSize.height*0.3),
child: new Stack(
children: <Widget>[
new Padding(
padding: new EdgeInsets.only(top: fabHalfSize),
child: new SizedBox(
width: fullWidth ? null : _kRecipePageMaxWidth,
child: new _RecipeSheet(recipe: config.recipe)
)
),
new Positioned(
right: 16.0,
child: new FloatingActionButton(
child: new Icon(icon: isFavorite ? Icons.favorite : Icons.favorite_border),
onPressed: _toggleFavorite
)
)
)
]
]
)
)
)
]
]
)
)
)
);
......
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