Unverified Commit d8bfb3a9 authored by Chris Bracken's avatar Chris Bracken Committed by GitHub

Apply media padding to Gallery Material Design demos (#13593)

Applies media padding (e.g. iPhone X safe area insets) to the Material Design demos in the Gallery.

Covers the following demos:
* Buttons (via the TabbedComponentDemoScaffold change)
* Cards
* Expansion panels
* Grid list
* Icons
* Images (via the TabbedComponentDemoScaffold change)
* Page Selector
* Progress Indicator
* Scrollable tabs
* Selection controls (via the TabbedComponentDemoScaffold change)
* Snack bar
* Tabs
* Text fields
* Tooltips

Fixes #13594
parent d9edab84
...@@ -60,85 +60,89 @@ class TravelDestinationItem extends StatelessWidget { ...@@ -60,85 +60,89 @@ class TravelDestinationItem extends StatelessWidget {
final TextStyle titleStyle = theme.textTheme.headline.copyWith(color: Colors.white); final TextStyle titleStyle = theme.textTheme.headline.copyWith(color: Colors.white);
final TextStyle descriptionStyle = theme.textTheme.subhead; final TextStyle descriptionStyle = theme.textTheme.subhead;
return new Container( return new SafeArea(
padding: const EdgeInsets.all(8.0), top: false,
height: height, bottom: false,
child: new Card( child: new Container(
child: new Column( padding: const EdgeInsets.all(8.0),
crossAxisAlignment: CrossAxisAlignment.start, height: height,
children: <Widget>[ child: new Card(
// photo and title child: new Column(
new SizedBox( crossAxisAlignment: CrossAxisAlignment.start,
height: 184.0, children: <Widget>[
child: new Stack( // photo and title
children: <Widget>[ new SizedBox(
new Positioned.fill( height: 184.0,
child: new Image.asset( child: new Stack(
destination.assetName, children: <Widget>[
package: destination.assetPackage, new Positioned.fill(
fit: BoxFit.cover, child: new Image.asset(
destination.assetName,
package: destination.assetPackage,
fit: BoxFit.cover,
),
), ),
), new Positioned(
new Positioned( bottom: 16.0,
bottom: 16.0, left: 16.0,
left: 16.0, right: 16.0,
right: 16.0, child: new FittedBox(
child: new FittedBox( fit: BoxFit.scaleDown,
fit: BoxFit.scaleDown, alignment: Alignment.centerLeft,
alignment: Alignment.centerLeft, child: new Text(destination.title,
child: new Text(destination.title, style: titleStyle,
style: titleStyle, ),
), ),
), ),
), ],
], ),
), ),
), // description and share/expore buttons
// description and share/expore buttons new Expanded(
new Expanded( child: new Padding(
child: new Padding( padding: const EdgeInsets.fromLTRB(16.0, 16.0, 16.0, 0.0),
padding: const EdgeInsets.fromLTRB(16.0, 16.0, 16.0, 0.0), child: new DefaultTextStyle(
child: new DefaultTextStyle( softWrap: false,
softWrap: false, overflow: TextOverflow.ellipsis,
overflow: TextOverflow.ellipsis, style: descriptionStyle,
style: descriptionStyle, child: new Column(
child: new Column( crossAxisAlignment: CrossAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[
children: <Widget>[ // three line description
// three line description new Padding(
new Padding( padding: const EdgeInsets.only(bottom: 8.0),
padding: const EdgeInsets.only(bottom: 8.0), child: new Text(
child: new Text( destination.description[0],
destination.description[0], style: descriptionStyle.copyWith(color: Colors.black54),
style: descriptionStyle.copyWith(color: Colors.black54), ),
), ),
), new Text(destination.description[1]),
new Text(destination.description[1]), new Text(destination.description[2]),
new Text(destination.description[2]), ],
], ),
), ),
), ),
), ),
), // share, explore buttons
// share, explore buttons new ButtonTheme.bar(
new ButtonTheme.bar( child: new ButtonBar(
child: new ButtonBar( alignment: MainAxisAlignment.start,
alignment: MainAxisAlignment.start, children: <Widget>[
children: <Widget>[ new FlatButton(
new FlatButton( child: const Text('SHARE'),
child: const Text('SHARE'), textColor: Colors.amber.shade500,
textColor: Colors.amber.shade500, onPressed: () { /* do nothing */ },
onPressed: () { /* do nothing */ }, ),
), new FlatButton(
new FlatButton( child: const Text('EXPLORE'),
child: const Text('EXPLORE'), textColor: Colors.amber.shade500,
textColor: Colors.amber.shade500, onPressed: () { /* do nothing */ },
onPressed: () { /* do nothing */ }, ),
), ],
], ),
), ),
), ],
], ),
), ),
), ),
); );
......
...@@ -131,74 +131,78 @@ class _DateAndTimePickerDemoState extends State<DateAndTimePickerDemo> { ...@@ -131,74 +131,78 @@ class _DateAndTimePickerDemoState extends State<DateAndTimePickerDemo> {
return new Scaffold( return new Scaffold(
appBar: new AppBar(title: const Text('Date and time pickers')), appBar: new AppBar(title: const Text('Date and time pickers')),
body: new DropdownButtonHideUnderline( body: new DropdownButtonHideUnderline(
child: new ListView( child: new SafeArea(
padding: const EdgeInsets.all(16.0), top: false,
children: <Widget>[ bottom: false,
new TextField( child: new ListView(
decoration: const InputDecoration( padding: const EdgeInsets.all(16.0),
labelText: 'Event name', children: <Widget>[
new TextField(
decoration: const InputDecoration(
labelText: 'Event name',
),
style: Theme.of(context).textTheme.display1,
), ),
style: Theme.of(context).textTheme.display1, new TextField(
), decoration: const InputDecoration(
new TextField( labelText: 'Location',
decoration: const InputDecoration( ),
labelText: 'Location', style: Theme.of(context).textTheme.display1.copyWith(fontSize: 20.0),
), ),
style: Theme.of(context).textTheme.display1.copyWith(fontSize: 20.0), new _DateTimePicker(
), labelText: 'From',
new _DateTimePicker( selectedDate: _fromDate,
labelText: 'From', selectedTime: _fromTime,
selectedDate: _fromDate, selectDate: (DateTime date) {
selectedTime: _fromTime, setState(() {
selectDate: (DateTime date) { _fromDate = date;
setState(() { });
_fromDate = date; },
}); selectTime: (TimeOfDay time) {
}, setState(() {
selectTime: (TimeOfDay time) { _fromTime = time;
setState(() { });
_fromTime = time; },
});
},
),
new _DateTimePicker(
labelText: 'To',
selectedDate: _toDate,
selectedTime: _toTime,
selectDate: (DateTime date) {
setState(() {
_toDate = date;
});
},
selectTime: (TimeOfDay time) {
setState(() {
_toTime = time;
});
},
),
new InputDecorator(
decoration: const InputDecoration(
labelText: 'Activity',
hintText: 'Choose an activity',
), ),
isEmpty: _activity == null, new _DateTimePicker(
child: new DropdownButton<String>( labelText: 'To',
value: _activity, selectedDate: _toDate,
isDense: true, selectedTime: _toTime,
onChanged: (String newValue) { selectDate: (DateTime date) {
setState(() {
_toDate = date;
});
},
selectTime: (TimeOfDay time) {
setState(() { setState(() {
_activity = newValue; _toTime = time;
}); });
}, },
items: _allActivities.map((String value) {
return new DropdownMenuItem<String>(
value: value,
child: new Text(value),
);
}).toList(),
), ),
), new InputDecorator(
], decoration: const InputDecoration(
labelText: 'Activity',
hintText: 'Choose an activity',
),
isEmpty: _activity == null,
child: new DropdownButton<String>(
value: _activity,
isDense: true,
onChanged: (String newValue) {
setState(() {
_activity = newValue;
});
},
items: _allActivities.map((String value) {
return new DropdownMenuItem<String>(
value: value,
child: new Text(value),
);
}).toList(),
),
),
],
),
), ),
), ),
); );
......
...@@ -336,24 +336,28 @@ class _ExpansionPanelsDemoState extends State<ExpasionPanelsDemo> { ...@@ -336,24 +336,28 @@ class _ExpansionPanelsDemoState extends State<ExpasionPanelsDemo> {
return new Scaffold( return new Scaffold(
appBar: new AppBar(title: const Text('Expansion panels')), appBar: new AppBar(title: const Text('Expansion panels')),
body: new SingleChildScrollView( body: new SingleChildScrollView(
child: new Container( child: new SafeArea(
margin: const EdgeInsets.all(24.0), top: false,
child: new ExpansionPanelList( bottom: false,
expansionCallback: (int index, bool isExpanded) { child: new Container(
setState(() { margin: const EdgeInsets.all(24.0),
_demoItems[index].isExpanded = !isExpanded; child: new ExpansionPanelList(
}); expansionCallback: (int index, bool isExpanded) {
}, setState(() {
children: _demoItems.map((DemoItem<dynamic> item) { _demoItems[index].isExpanded = !isExpanded;
return new ExpansionPanel( });
isExpanded: item.isExpanded, },
headerBuilder: item.headerBuilder, children: _demoItems.map((DemoItem<dynamic> item) {
body: item.builder(item) return new ExpansionPanel(
); isExpanded: item.isExpanded,
}).toList() headerBuilder: item.headerBuilder,
) body: item.builder(item)
) );
) }).toList()
),
),
),
),
); );
} }
} }
...@@ -363,27 +363,31 @@ class GridListDemoState extends State<GridListDemo> { ...@@ -363,27 +363,31 @@ class GridListDemoState extends State<GridListDemo> {
body: new Column( body: new Column(
children: <Widget>[ children: <Widget>[
new Expanded( new Expanded(
child: new GridView.count( child: new SafeArea(
crossAxisCount: (orientation == Orientation.portrait) ? 2 : 3, top: false,
mainAxisSpacing: 4.0, bottom: false,
crossAxisSpacing: 4.0, child: new GridView.count(
padding: const EdgeInsets.all(4.0), crossAxisCount: (orientation == Orientation.portrait) ? 2 : 3,
childAspectRatio: (orientation == Orientation.portrait) ? 1.0 : 1.3, mainAxisSpacing: 4.0,
children: photos.map((Photo photo) { crossAxisSpacing: 4.0,
return new GridDemoPhotoItem( padding: const EdgeInsets.all(4.0),
photo: photo, childAspectRatio: (orientation == Orientation.portrait) ? 1.0 : 1.3,
tileStyle: _tileStyle, children: photos.map((Photo photo) {
onBannerTap: (Photo photo) { return new GridDemoPhotoItem(
setState(() { photo: photo,
photo.isFavorite = !photo.isFavorite; tileStyle: _tileStyle,
}); onBannerTap: (Photo photo) {
} setState(() {
); photo.isFavorite = !photo.isFavorite;
}).toList(), });
) }
) );
] }).toList(),
) ),
),
),
],
),
); );
} }
} }
...@@ -54,10 +54,14 @@ class IconsDemoState extends State<IconsDemo> { ...@@ -54,10 +54,14 @@ class IconsDemoState extends State<IconsDemo> {
data: new IconThemeData(color: iconColor), data: new IconThemeData(color: iconColor),
child: new Padding( child: new Padding(
padding: const EdgeInsets.all(24.0), padding: const EdgeInsets.all(24.0),
child: new Column( child: new SafeArea(
children: <Widget>[ top: false,
new _IconsDemoCard(handleIconButtonPress), bottom: false,
], child: new Column(
children: <Widget>[
new _IconsDemoCard(handleIconButtonPress),
],
),
), ),
), ),
), ),
......
...@@ -19,45 +19,49 @@ class _PageSelector extends StatelessWidget { ...@@ -19,45 +19,49 @@ class _PageSelector extends StatelessWidget {
Widget build(BuildContext context) { Widget build(BuildContext context) {
final TabController controller = DefaultTabController.of(context); final TabController controller = DefaultTabController.of(context);
final Color color = Theme.of(context).accentColor; final Color color = Theme.of(context).accentColor;
return new Column( return new SafeArea(
children: <Widget>[ top: false,
new Container( bottom: false,
margin: const EdgeInsets.only(top: 16.0), child: new Column(
child: new Row( children: <Widget>[
children: <Widget>[ new Container(
new IconButton( margin: const EdgeInsets.only(top: 16.0),
icon: const Icon(Icons.chevron_left), child: new Row(
color: color, children: <Widget>[
onPressed: () { _handleArrowButtonPress(context, -1); }, new IconButton(
tooltip: 'Page back' icon: const Icon(Icons.chevron_left),
), color: color,
new TabPageSelector(controller: controller), onPressed: () { _handleArrowButtonPress(context, -1); },
new IconButton( tooltip: 'Page back'
icon: const Icon(Icons.chevron_right),
color: color,
onPressed: () { _handleArrowButtonPress(context, 1); },
tooltip: 'Page forward'
)
],
mainAxisAlignment: MainAxisAlignment.spaceBetween
)
),
new Expanded(
child: new TabBarView(
children: icons.map((IconData icon) {
return new Container(
key: new ObjectKey(icon),
padding: const EdgeInsets.all(12.0),
child: new Card(
child: new Center(
child: new Icon(icon, size: 128.0, color: color)
),
), ),
); new TabPageSelector(controller: controller),
}).toList() new IconButton(
icon: const Icon(Icons.chevron_right),
color: color,
onPressed: () { _handleArrowButtonPress(context, 1); },
tooltip: 'Page forward'
)
],
mainAxisAlignment: MainAxisAlignment.spaceBetween
)
),
new Expanded(
child: new TabBarView(
children: icons.map((IconData icon) {
return new Container(
key: new ObjectKey(icon),
padding: const EdgeInsets.all(12.0),
child: new Card(
child: new Center(
child: new Icon(icon, size: 128.0, color: color)
),
),
);
}).toList()
),
), ),
), ],
], ),
); );
} }
} }
......
...@@ -107,17 +107,21 @@ class _ProgressIndicatorDemoState extends State<ProgressIndicatorDemo> with Sing ...@@ -107,17 +107,21 @@ class _ProgressIndicatorDemoState extends State<ProgressIndicatorDemo> with Sing
child: new GestureDetector( child: new GestureDetector(
onTap: _handleTap, onTap: _handleTap,
behavior: HitTestBehavior.opaque, behavior: HitTestBehavior.opaque,
child: new Container( child: new SafeArea(
padding: const EdgeInsets.symmetric(vertical: 12.0, horizontal: 8.0), top: false,
child: new AnimatedBuilder( bottom: false,
animation: _animation, child: new Container(
builder: _buildIndicators padding: const EdgeInsets.symmetric(vertical: 12.0, horizontal: 8.0),
) child: new AnimatedBuilder(
) animation: _animation,
) builder: _buildIndicators
) ),
) ),
) ),
),
),
),
),
); );
} }
} }
...@@ -105,15 +105,19 @@ class ScrollableTabsDemoState extends State<ScrollableTabsDemo> with SingleTicke ...@@ -105,15 +105,19 @@ class ScrollableTabsDemoState extends State<ScrollableTabsDemo> with SingleTicke
body: new TabBarView( body: new TabBarView(
controller: _controller, controller: _controller,
children: _allPages.map((_Page page) { children: _allPages.map((_Page page) {
return new Container( return new SafeArea(
key: new ObjectKey(page.icon), top: false,
padding: const EdgeInsets.all(12.0), bottom: false,
child:new Card( child: new Container(
child: new Center( key: new ObjectKey(page.icon),
child: new Icon( padding: const EdgeInsets.all(12.0),
page.icon, child:new Card(
color: iconColor, child: new Center(
size: 128.0, child: new Icon(
page.icon,
color: iconColor,
size: 128.0,
),
), ),
), ),
), ),
......
...@@ -29,39 +29,43 @@ class _SnackBarDemoState extends State<SnackBarDemo> { ...@@ -29,39 +29,43 @@ class _SnackBarDemoState extends State<SnackBarDemo> {
int _snackBarIndex = 1; int _snackBarIndex = 1;
Widget buildBody(BuildContext context) { Widget buildBody(BuildContext context) {
return new ListView( return new SafeArea(
padding: const EdgeInsets.all(24.0), top: false,
children: <Widget>[ bottom: false,
const Text(_text1), child: new ListView(
const Text(_text2), padding: const EdgeInsets.all(24.0),
new Center( children: <Widget>[
child: new RaisedButton( const Text(_text1),
child: const Text('SHOW A SNACKBAR'), const Text(_text2),
onPressed: () { new Center(
final int thisSnackBarIndex = _snackBarIndex++; child: new RaisedButton(
Scaffold.of(context).showSnackBar(new SnackBar( child: const Text('SHOW A SNACKBAR'),
content: new Text('This is snackbar #$thisSnackBarIndex.'), onPressed: () {
action: new SnackBarAction( final int thisSnackBarIndex = _snackBarIndex++;
label: 'ACTION', Scaffold.of(context).showSnackBar(new SnackBar(
onPressed: () { content: new Text('This is snackbar #$thisSnackBarIndex.'),
Scaffold.of(context).showSnackBar(new SnackBar( action: new SnackBarAction(
content: new Text('You pressed snackbar $thisSnackBarIndex\'s action.') label: 'ACTION',
)); onPressed: () {
} Scaffold.of(context).showSnackBar(new SnackBar(
) content: new Text('You pressed snackbar $thisSnackBarIndex\'s action.')
)); ));
} }
) ),
), ));
const Text(_text3), }
] ),
.map((Widget child) { ),
return new Container( const Text(_text3),
margin: const EdgeInsets.symmetric(vertical: 12.0), ]
child: child .map((Widget child) {
); return new Container(
}) margin: const EdgeInsets.symmetric(vertical: 12.0),
.toList() child: child
);
})
.toList()
),
); );
} }
......
...@@ -154,15 +154,19 @@ class TabsDemo extends StatelessWidget { ...@@ -154,15 +154,19 @@ class TabsDemo extends StatelessWidget {
}, },
body: new TabBarView( body: new TabBarView(
children: _allPages.keys.map((_Page page) { children: _allPages.keys.map((_Page page) {
return new ListView( return new SafeArea(
padding: const EdgeInsets.symmetric(vertical: 8.0, horizontal: 16.0), top: false,
itemExtent: _CardDataItem.height, bottom: false,
children: _allPages[page].map((_CardData data) { child: new ListView(
return new Padding( padding: const EdgeInsets.symmetric(vertical: 8.0, horizontal: 16.0),
padding: const EdgeInsets.symmetric(vertical: 8.0), itemExtent: _CardDataItem.height,
child: new _CardDataItem(page: page, data: data), children: _allPages[page].map((_CardData data) {
); return new Padding(
}).toList(), padding: const EdgeInsets.symmetric(vertical: 8.0),
child: new _CardDataItem(page: page, data: data),
);
}).toList(),
),
); );
}).toList(), }).toList(),
), ),
......
...@@ -108,98 +108,102 @@ class TextFormFieldDemoState extends State<TextFormFieldDemo> { ...@@ -108,98 +108,102 @@ class TextFormFieldDemoState extends State<TextFormFieldDemo> {
appBar: new AppBar( appBar: new AppBar(
title: const Text('Text fields'), title: const Text('Text fields'),
), ),
body: new Form( body: new SafeArea(
key: _formKey, top: false,
autovalidate: _autovalidate, bottom: false,
onWillPop: _warnUserAboutInvalidData, child: new Form(
child: new ListView( key: _formKey,
padding: const EdgeInsets.symmetric(horizontal: 16.0), autovalidate: _autovalidate,
children: <Widget>[ onWillPop: _warnUserAboutInvalidData,
new TextFormField( child: new ListView(
decoration: const InputDecoration( padding: const EdgeInsets.symmetric(horizontal: 16.0),
icon: const Icon(Icons.person), children: <Widget>[
hintText: 'What do people call you?', new TextFormField(
labelText: 'Name *', decoration: const InputDecoration(
icon: const Icon(Icons.person),
hintText: 'What do people call you?',
labelText: 'Name *',
),
onSaved: (String value) { person.name = value; },
validator: _validateName,
), ),
onSaved: (String value) { person.name = value; }, new TextFormField(
validator: _validateName, decoration: const InputDecoration(
), icon: const Icon(Icons.phone),
new TextFormField( hintText: 'Where can we reach you?',
decoration: const InputDecoration( labelText: 'Phone Number *',
icon: const Icon(Icons.phone), prefixText: '+1'
hintText: 'Where can we reach you?', ),
labelText: 'Phone Number *', keyboardType: TextInputType.phone,
prefixText: '+1' onSaved: (String value) { person.phoneNumber = value; },
validator: _validatePhoneNumber,
// TextInputFormatters are applied in sequence.
inputFormatters: <TextInputFormatter> [
WhitelistingTextInputFormatter.digitsOnly,
// Fit the validating format.
_phoneNumberFormatter,
],
), ),
keyboardType: TextInputType.phone, new TextFormField(
onSaved: (String value) { person.phoneNumber = value; }, decoration: const InputDecoration(
validator: _validatePhoneNumber, hintText: 'Tell us about yourself',
// TextInputFormatters are applied in sequence. helperText: 'Keep it short, this is just a demo',
inputFormatters: <TextInputFormatter> [ labelText: 'Life story',
WhitelistingTextInputFormatter.digitsOnly, ),
// Fit the validating format. maxLines: 3,
_phoneNumberFormatter,
],
),
new TextFormField(
decoration: const InputDecoration(
hintText: 'Tell us about yourself',
helperText: 'Keep it short, this is just a demo',
labelText: 'Life story',
), ),
maxLines: 3, new TextFormField(
), keyboardType: TextInputType.number,
new TextFormField( decoration: const InputDecoration(
keyboardType: TextInputType.number, labelText: 'Salary',
decoration: const InputDecoration( prefixText: '\$',
labelText: 'Salary', suffixText: 'USD',
prefixText: '\$', suffixStyle: const TextStyle(color: Colors.green)
suffixText: 'USD', ),
suffixStyle: const TextStyle(color: Colors.green) maxLines: 1,
), ),
maxLines: 1, new Row(
), crossAxisAlignment: CrossAxisAlignment.start,
new Row( children: <Widget>[
crossAxisAlignment: CrossAxisAlignment.start, new Expanded(
children: <Widget>[ child: new TextFormField(
new Expanded( key: _passwordFieldKey,
child: new TextFormField( decoration: const InputDecoration(
key: _passwordFieldKey, hintText: 'How do you log in?',
decoration: const InputDecoration( labelText: 'New Password *',
hintText: 'How do you log in?', ),
labelText: 'New Password *', obscureText: true,
onSaved: (String value) { person.password = value; },
), ),
obscureText: true,
onSaved: (String value) { person.password = value; },
), ),
), const SizedBox(width: 16.0),
const SizedBox(width: 16.0), new Expanded(
new Expanded( child: new TextFormField(
child: new TextFormField( decoration: const InputDecoration(
decoration: const InputDecoration( hintText: 'How do you log in?',
hintText: 'How do you log in?', labelText: 'Re-type Password *',
labelText: 'Re-type Password *', ),
obscureText: true,
validator: _validatePassword,
), ),
obscureText: true,
validator: _validatePassword,
), ),
],
),
new Container(
padding: const EdgeInsets.all(20.0),
alignment: Alignment.center,
child: new RaisedButton(
child: const Text('SUBMIT'),
onPressed: _handleSubmitted,
), ),
],
),
new Container(
padding: const EdgeInsets.all(20.0),
alignment: Alignment.center,
child: new RaisedButton(
child: const Text('SUBMIT'),
onPressed: _handleSubmitted,
), ),
), new Container(
new Container( padding: const EdgeInsets.only(top: 20.0),
padding: const EdgeInsets.only(top: 20.0), child: new Text('* indicates required field', style: Theme.of(context).textTheme.caption),
child: new Text('* indicates required field', style: Theme.of(context).textTheme.caption), ),
), ],
], ),
) ),
), ),
); );
} }
......
...@@ -22,44 +22,48 @@ class TooltipDemo extends StatelessWidget { ...@@ -22,44 +22,48 @@ class TooltipDemo extends StatelessWidget {
), ),
body: new Builder( body: new Builder(
builder: (BuildContext context) { builder: (BuildContext context) {
return new ListView( return new SafeArea(
children: <Widget>[ top: false,
new Text(_introText, style: theme.textTheme.subhead), bottom: false,
new Row( child: new ListView(
children: <Widget>[ children: <Widget>[
new Text('Long press the ', style: theme.textTheme.subhead), new Text(_introText, style: theme.textTheme.subhead),
new Tooltip( new Row(
message: 'call icon', children: <Widget>[
child: new Icon( new Text('Long press the ', style: theme.textTheme.subhead),
Icons.call, new Tooltip(
size: 18.0, message: 'call icon',
color: theme.iconTheme.color child: new Icon(
) Icons.call,
), size: 18.0,
new Text(' icon.', style: theme.textTheme.subhead) color: theme.iconTheme.color
] )
), ),
new Center( new Text(' icon.', style: theme.textTheme.subhead)
child: new IconButton( ]
iconSize: 48.0, ),
icon: const Icon(Icons.call), new Center(
color: theme.iconTheme.color, child: new IconButton(
tooltip: 'Place a phone call', iconSize: 48.0,
onPressed: () { icon: const Icon(Icons.call),
Scaffold.of(context).showSnackBar(const SnackBar( color: theme.iconTheme.color,
content: const Text('That was an ordinary tap.') tooltip: 'Place a phone call',
)); onPressed: () {
} Scaffold.of(context).showSnackBar(const SnackBar(
content: const Text('That was an ordinary tap.')
));
}
)
) )
) ]
] .map((Widget widget) {
.map((Widget widget) { return new Padding(
return new Padding( padding: const EdgeInsets.only(top: 16.0, left: 16.0, right: 16.0),
padding: const EdgeInsets.only(top: 16.0, left: 16.0, right: 16.0), child: widget
child: widget );
); })
}) .toList()
.toList() ),
); );
} }
) )
......
...@@ -77,16 +77,20 @@ class TabbedComponentDemoScaffold extends StatelessWidget { ...@@ -77,16 +77,20 @@ class TabbedComponentDemoScaffold extends StatelessWidget {
), ),
body: new TabBarView( body: new TabBarView(
children: demos.map((ComponentDemoTabData demo) { children: demos.map((ComponentDemoTabData demo) {
return new Column( return new SafeArea(
children: <Widget>[ top: false,
new Padding( bottom: false,
padding: const EdgeInsets.all(16.0), child: new Column(
child: new Text(demo.description, children: <Widget>[
style: Theme.of(context).textTheme.subhead new Padding(
) padding: const EdgeInsets.all(16.0),
), child: new Text(demo.description,
new Expanded(child: demo.demoWidget) style: Theme.of(context).textTheme.subhead
], )
),
new Expanded(child: demo.demoWidget)
],
),
); );
}).toList(), }).toList(),
), ),
......
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