Commit 0dacc5e1 authored by Matt Perry's avatar Matt Perry Committed by GitHub

Use a Scaffold for the Pesto recipe page for better appbar behavior. (#4951)

The appbar now scrolls off screen when you scroll the page far enough.

BUG=https://github.com/flutter/flutter/issues/4410
parent ebc7e4b7
...@@ -238,7 +238,7 @@ class _RecipeCard extends StatelessWidget { ...@@ -238,7 +238,7 @@ class _RecipeCard extends StatelessWidget {
children: <Widget>[ children: <Widget>[
new Image( new Image(
image: new AssetImage(recipe.imagePath), image: new AssetImage(recipe.imagePath),
fit: ImageFit.scaleDown fit: ImageFit.contain
), ),
new Flexible( new Flexible(
child: new Row( child: new Row(
...@@ -282,47 +282,41 @@ class _RecipePage extends StatefulWidget { ...@@ -282,47 +282,41 @@ class _RecipePage extends StatefulWidget {
} }
class _RecipePageState extends State<_RecipePage> { class _RecipePageState extends State<_RecipePage> {
static final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();
final TextStyle menuItemStyle = _textStyle(15.0).copyWith(color: Colors.black54, height: 24.0/15.0); final TextStyle menuItemStyle = _textStyle(15.0).copyWith(color: Colors.black54, height: 24.0/15.0);
double _getAppBarHeight(BuildContext context) => MediaQuery.of(context).size.height * 0.3;
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
// Overlays a transparent app bar onto the page. We can't use a Scaffold return new Scaffold(
// here because that doesn't allow us to overlap the app bar on top of the key: _scaffoldKey,
// content. appBarBehavior: AppBarBehavior.scroll,
final double statusBarHeight = MediaQuery.of(context).padding.top; appBar: new AppBar(
return new Stack( expandedHeight: _getAppBarHeight(context),
children: <Widget>[ backgroundColor: Colors.transparent,
_buildContainer(context), elevation: 0,
new Positioned( leading: new IconButton(
top: 0.0, icon: new Icon(Icons.arrow_back),
left: 0.0, onPressed: () => Navigator.pop(context),
right: 0.0, tooltip: 'Back'
child: new Container( ),
height: kToolBarHeight + statusBarHeight, actions: <Widget>[
padding: new EdgeInsets.only(top: statusBarHeight), new PopupMenuButton<String>(
child: new AppBar( onSelected: (String item) {},
backgroundColor: Colors.transparent, itemBuilder: (BuildContext context) => <PopupMenuItem<String>>[
elevation: 0, _buildMenuItem(Icons.share, 'Tweet recipe'),
leading: new IconButton( _buildMenuItem(Icons.email, 'Email recipe'),
icon: new Icon(Icons.arrow_back), _buildMenuItem(Icons.message, 'Message recipe'),
onPressed: () => Navigator.pop(context), _buildMenuItem(Icons.people, 'Share on Facebook'),
tooltip: 'Back' ]
),
actions: <Widget>[
new PopupMenuButton<String>(
onSelected: (String item) {},
itemBuilder: (BuildContext context) => <PopupMenuItem<String>>[
_buildMenuItem(Icons.share, 'Tweet recipe'),
_buildMenuItem(Icons.email, 'Email recipe'),
_buildMenuItem(Icons.message, 'Message recipe'),
_buildMenuItem(Icons.people, 'Share on Facebook'),
]
)
]
)
) )
) ],
] // This empty space keeps the app bar from moving until the screen is
// scrolled at least _getAppBarHeight().
flexibleSpace: new Container()
),
body: _buildContainer(context)
); );
} }
...@@ -350,7 +344,7 @@ class _RecipePageState extends State<_RecipePage> { ...@@ -350,7 +344,7 @@ class _RecipePageState extends State<_RecipePage> {
child: new Block( child: new Block(
children: <Widget>[ children: <Widget>[
new Padding( new Padding(
padding: new EdgeInsets.only(top: screenSize.height*0.3), padding: new EdgeInsets.only(top: _getAppBarHeight(context)),
child: new Stack( child: new Stack(
children: <Widget>[ children: <Widget>[
new Padding( new Padding(
......
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