Skip to content

F
Front-End
Unverified Commit dd943fef authored by Chris Bracken's avatar Chris Bracken Committed by GitHub
Browse files
Options

Apply media padding in Cupertino Navigation demo (#13585) 

Adds safe areas around:
1. The body of the colour swatch view (tab 1)
2. The chat header (tab 2)
3. The chat bubbles (tab 2)
4. The 'Sign In' launcher button (tab 3)
parent 8a77036b
Hide whitespace changes
Inline Side-by-side
Showing with 265 additions and 242 deletions
examples/flutter_gallery/lib/demo/cupertino/cupertino_navigation_demo.dart
View file @ dd943fef
...@@ -132,8 +132,13 @@ class CupertinoDemoTab1 extends StatelessWidget { ...@@ -132,8 +132,13 @@ class CupertinoDemoTab1 extends StatelessWidget {
trailing: const ExitButton(), trailing: const ExitButton(),
), ),
new SliverPadding( new SliverPadding(
// Top media query padding already consumed by CupertinoSliverNavigationBar. // Top media padding consumed by CupertinoSliverNavigationBar.
padding: MediaQuery.of(context).removePadding(removeTop: true).padding, // Left/Right media padding consumed by Tab1RowItem.
padding: MediaQuery.of(context).removePadding(
removeTop: true,
removeLeft: true,
removeRight: true,
).padding,
sliver: new SliverList( sliver: new SliverList(
delegate: new SliverChildBuilderDelegate( delegate: new SliverChildBuilderDelegate(
(BuildContext context, int index) { (BuildContext context, int index) {
...@@ -175,49 +180,53 @@ class Tab1RowItem extends StatelessWidget { ...@@ -175,49 +180,53 @@ class Tab1RowItem extends StatelessWidget {
), ),
)); ));
}, },
child: new Padding( child: new SafeArea(
padding: const EdgeInsets.only(left: 16.0, top: 8.0, bottom: 8.0, right: 8.0), top: false,
child: new Row( bottom: false,
children: <Widget>[ child: new Padding(
new Container( padding: const EdgeInsets.only(left: 16.0, top: 8.0, bottom: 8.0, right: 8.0),
height: 60.0, child: new Row(
width: 60.0, children: <Widget>[
decoration: new BoxDecoration( new Container(
color: color, height: 60.0,
borderRadius: new BorderRadius.circular(8.0), width: 60.0,
decoration: new BoxDecoration(
color: color,
borderRadius: new BorderRadius.circular(8.0),
),
), ),
), new Expanded(
new Expanded( child: new Padding(
child: new Padding( padding: const EdgeInsets.symmetric(horizontal: 12.0),
padding: const EdgeInsets.symmetric(horizontal: 12.0), child: new Column(
child: new Column( crossAxisAlignment: CrossAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[
children: <Widget>[ new Text(colorName),
new Text(colorName), const Padding(padding: const EdgeInsets.only(top: 8.0)),
const Padding(padding: const EdgeInsets.only(top: 8.0)), const Text(
const Text( 'Buy this cool color',
'Buy this cool color', style: const TextStyle(
style: const TextStyle( color: const Color(0xFF8E8E93),
color: const Color(0xFF8E8E93), fontSize: 13.0,
fontSize: 13.0, fontWeight: FontWeight.w300,
fontWeight: FontWeight.w300, ),
), ),
), ],
], ),
), ),
), ),
), new CupertinoButton(
new CupertinoButton( padding: EdgeInsets.zero,
padding: EdgeInsets.zero, child: const Icon(CupertinoIcons.plus_circled, color: CupertinoColors.activeBlue),
child: const Icon(CupertinoIcons.plus_circled, color: CupertinoColors.activeBlue), onPressed: () { },
onPressed: () { }, ),
), new CupertinoButton(
new CupertinoButton( padding: EdgeInsets.zero,
padding: EdgeInsets.zero, child: const Icon(CupertinoIcons.share, color: CupertinoColors.activeBlue),
child: const Icon(CupertinoIcons.share, color: CupertinoColors.activeBlue), onPressed: () { },
onPressed: () { }, ),
), ],
], ),
), ),
), ),
); );
...@@ -273,118 +282,122 @@ class Tab1ItemPageState extends State<Tab1ItemPage> { ...@@ -273,118 +282,122 @@ class Tab1ItemPageState extends State<Tab1ItemPage> {
middle: new Text(widget.colorName), middle: new Text(widget.colorName),
trailing: const ExitButton(), trailing: const ExitButton(),
), ),
child: new ListView( child: new SafeArea(
children: <Widget>[ top: false,
const Padding(padding: const EdgeInsets.only(top: 16.0)), bottom: false,
new Padding( child: new ListView(
padding: const EdgeInsets.symmetric(horizontal: 16.0), children: <Widget>[
child: new Row( const Padding(padding: const EdgeInsets.only(top: 16.0)),
mainAxisSize: MainAxisSize.max, new Padding(
children: <Widget>[ padding: const EdgeInsets.symmetric(horizontal: 16.0),
new Container( child: new Row(
height: 128.0, mainAxisSize: MainAxisSize.max,
width: 128.0, children: <Widget>[
decoration: new BoxDecoration( new Container(
color: widget.color, height: 128.0,
borderRadius: new BorderRadius.circular(24.0), width: 128.0,
decoration: new BoxDecoration(
color: widget.color,
borderRadius: new BorderRadius.circular(24.0),
),
), ),
), const Padding(padding: const EdgeInsets.only(left: 18.0)),
const Padding(padding: const EdgeInsets.only(left: 18.0)), new Expanded(
new Expanded( child: new Column(
child: new Column( crossAxisAlignment: CrossAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start, mainAxisSize: MainAxisSize.min,
mainAxisSize: MainAxisSize.min, children: <Widget>[
children: <Widget>[ new Text(
new Text( widget.colorName,
widget.colorName, style: const TextStyle(fontSize: 24.0, fontWeight: FontWeight.bold),
style: const TextStyle(fontSize: 24.0, fontWeight: FontWeight.bold),
),
const Padding(padding: const EdgeInsets.only(top: 6.0)),
new Text(
'Item number ${widget.index}',
style: const TextStyle(
color: const Color(0xFF8E8E93),
fontSize: 16.0,
fontWeight: FontWeight.w100,
), ),
), const Padding(padding: const EdgeInsets.only(top: 6.0)),
const Padding(padding: const EdgeInsets.only(top: 20.0)), new Text(
new Row( 'Item number ${widget.index}',
mainAxisAlignment: MainAxisAlignment.spaceBetween, style: const TextStyle(
children: <Widget>[ color: const Color(0xFF8E8E93),
new CupertinoButton( fontSize: 16.0,
color: CupertinoColors.activeBlue, fontWeight: FontWeight.w100,
minSize: 30.0, ),
padding: const EdgeInsets.symmetric(horizontal: 24.0), ),
borderRadius: new BorderRadius.circular(32.0), const Padding(padding: const EdgeInsets.only(top: 20.0)),
child: const Text( new Row(
'GET', mainAxisAlignment: MainAxisAlignment.spaceBetween,
style: const TextStyle( children: <Widget>[
fontSize: 14.0, new CupertinoButton(
fontWeight: FontWeight.w700, color: CupertinoColors.activeBlue,
letterSpacing: -0.28, minSize: 30.0,
padding: const EdgeInsets.symmetric(horizontal: 24.0),
borderRadius: new BorderRadius.circular(32.0),
child: const Text(
'GET',
style: const TextStyle(
fontSize: 14.0,
fontWeight: FontWeight.w700,
letterSpacing: -0.28,
),
), ),
onPressed: () { },
), ),
onPressed: () { }, new CupertinoButton(
), color: CupertinoColors.activeBlue,
new CupertinoButton( minSize: 30.0,
color: CupertinoColors.activeBlue, padding: EdgeInsets.zero,
minSize: 30.0, borderRadius: new BorderRadius.circular(32.0),
padding: EdgeInsets.zero, child: const Icon(CupertinoIcons.ellipsis, color: CupertinoColors.white),
borderRadius: new BorderRadius.circular(32.0), onPressed: () { },
child: const Icon(CupertinoIcons.ellipsis, color: CupertinoColors.white), ),
onPressed: () { }, ],
), ),
], ],
), ),
],
), ),
), ],
], ),
), ),
), const Padding(
const Padding( padding: const EdgeInsets.only(left: 16.0, top: 28.0, bottom: 8.0),
padding: const EdgeInsets.only(left: 16.0, top: 28.0, bottom: 8.0), child: const Text(
child: const Text( 'USERS ALSO LIKED',
'USERS ALSO LIKED', style: const TextStyle(
style: const TextStyle( color: const Color(0xFF646464),
color: const Color(0xFF646464), letterSpacing: -0.60,
letterSpacing: -0.60, fontSize: 15.0,
fontSize: 15.0, fontWeight: FontWeight.w500,
fontWeight: FontWeight.w500, ),
), ),
), ),
), new SizedBox(
new SizedBox( height: 200.0,
height: 200.0, child: new ListView.builder(
child: new ListView.builder( scrollDirection: Axis.horizontal,
scrollDirection: Axis.horizontal, itemCount: 10,
itemCount: 10, itemExtent: 160.0,
itemExtent: 160.0, itemBuilder: (BuildContext context, int index) {
itemBuilder: (BuildContext context, int index) { return new Padding(
return new Padding( padding: const EdgeInsets.only(left: 16.0),
padding: const EdgeInsets.only(left: 16.0), child: new Container(
child: new Container( decoration: new BoxDecoration(
decoration: new BoxDecoration( borderRadius: new BorderRadius.circular(8.0),
borderRadius: new BorderRadius.circular(8.0), color: relatedColors[index],
color: relatedColors[index], ),
), child: new Center(
child: new Center( child: new CupertinoButton(
child: new CupertinoButton( child: const Icon(
child: const Icon( CupertinoIcons.plus_circled,
CupertinoIcons.plus_circled, color: CupertinoColors.white,
color: CupertinoColors.white, size: 36.0,
size: 36.0, ),
onPressed: () { },
), ),
onPressed: () { },
), ),
), ),
), );
); },
}, ),
), ),
), ],
], ),
), ),
); );
} }
...@@ -412,112 +425,116 @@ class Tab2Header extends StatelessWidget { ...@@ -412,112 +425,116 @@ class Tab2Header extends StatelessWidget {
Widget build(BuildContext context) { Widget build(BuildContext context) {
return new Padding( return new Padding(
padding: const EdgeInsets.all(16.0), padding: const EdgeInsets.all(16.0),
child: new ClipRRect( child: new SafeArea(
borderRadius: const BorderRadius.all(const Radius.circular(16.0)), top: false,
child: new Column( bottom: false,
mainAxisSize: MainAxisSize.min, child: new ClipRRect(
children: <Widget>[ borderRadius: const BorderRadius.all(const Radius.circular(16.0)),
new Container( child: new Column(
decoration: const BoxDecoration( mainAxisSize: MainAxisSize.min,
color: const Color(0xFFE5E5E5), children: <Widget>[
), new Container(
child: new Padding( decoration: const BoxDecoration(
padding: const EdgeInsets.symmetric(horizontal: 18.0, vertical: 12.0), color: const Color(0xFFE5E5E5),
child: new Row( ),
mainAxisAlignment: MainAxisAlignment.spaceBetween, child: new Padding(
children: <Widget>[ padding: const EdgeInsets.symmetric(horizontal: 18.0, vertical: 12.0),
const Text( child: new Row(
'SUPPORT TICKET', mainAxisAlignment: MainAxisAlignment.spaceBetween,
style: const TextStyle( children: <Widget>[
color: const Color(0xFF646464), const Text(
letterSpacing: -0.8, 'SUPPORT TICKET',
fontSize: 14.0, style: const TextStyle(
fontWeight: FontWeight.w500, color: const Color(0xFF646464),
letterSpacing: -0.8,
fontSize: 14.0,
fontWeight: FontWeight.w500,
),
), ),
), const Text(
const Text( 'Show More',
'Show More', style: const TextStyle(
style: const TextStyle( color: const Color(0xFF646464),
color: const Color(0xFF646464), letterSpacing: -0.6,
letterSpacing: -0.6, fontSize: 12.0,
fontSize: 12.0, fontWeight: FontWeight.w500,
fontWeight: FontWeight.w500, ),
), ),
), ],
], ),
), ),
), ),
), new Container(
new Container( decoration: const BoxDecoration(
decoration: const BoxDecoration( color: const Color(0xFFF3F3F3),
color: const Color(0xFFF3F3F3), ),
), child: new Padding(
child: new Padding( padding: const EdgeInsets.symmetric(horizontal: 18.0, vertical: 12.0),
padding: const EdgeInsets.symmetric(horizontal: 18.0, vertical: 12.0), child: new Column(
child: new Column( crossAxisAlignment: CrossAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[
children: <Widget>[ const Text(
const Text( 'Product or product packaging damaged during transit',
'Product or product packaging damaged during transit', style: const TextStyle(
style: const TextStyle( fontSize: 16.0,
fontSize: 16.0, fontWeight: FontWeight.w800,
fontWeight: FontWeight.w800, letterSpacing: -0.6,
letterSpacing: -0.6, ),
), ),
), const Padding(padding: const EdgeInsets.only(top: 16.0)),
const Padding(padding: const EdgeInsets.only(top: 16.0)), const Text(
const Text( 'REVIEWERS',
'REVIEWERS', style: const TextStyle(
style: const TextStyle( color: const Color(0xFF646464),
color: const Color(0xFF646464), fontSize: 12.0,
fontSize: 12.0, letterSpacing: -0.6,
letterSpacing: -0.6, fontWeight: FontWeight.w500,
fontWeight: FontWeight.w500, ),
), ),
), const Padding(padding: const EdgeInsets.only(top: 8.0)),
const Padding(padding: const EdgeInsets.only(top: 8.0)), new Row(
new Row( children: <Widget>[
children: <Widget>[ new Container(
new Container( width: 44.0,
width: 44.0, height: 44.0,
height: 44.0, decoration: const BoxDecoration(
decoration: const BoxDecoration( image: const DecorationImage(
image: const DecorationImage( image: const AssetImage(
image: const AssetImage( 'cupertino_navigation/person1.jpg',
'cupertino_navigation/person1.jpg', package: _kGalleryAssetsPackage
package: _kGalleryAssetsPackage ),
), ),
shape: BoxShape.circle,
), ),
shape: BoxShape.circle,
), ),
), const Padding(padding: const EdgeInsets.only(left: 8.0)),
const Padding(padding: const EdgeInsets.only(left: 8.0)), new Container(
new Container( width: 44.0,
width: 44.0, height: 44.0,
height: 44.0, decoration: const BoxDecoration(
decoration: const BoxDecoration( image: const DecorationImage(
image: const DecorationImage( image: const AssetImage(
image: const AssetImage( 'cupertino_navigation/person2.jpg',
'cupertino_navigation/person2.jpg', package: _kGalleryAssetsPackage
package: _kGalleryAssetsPackage ),
), ),
shape: BoxShape.circle,
), ),
shape: BoxShape.circle,
), ),
), const Padding(padding: const EdgeInsets.only(left: 2.0)),
const Padding(padding: const EdgeInsets.only(left: 2.0)), const Icon(
const Icon( CupertinoIcons.check_mark_circled,
CupertinoIcons.check_mark_circled, color: const Color(0xFF646464),
color: const Color(0xFF646464), size: 20.0,
size: 20.0, ),
), ],
], ),
), ],
], ),
), ),
), ),
), ],
], ),
), ),
), ),
); );
...@@ -623,11 +640,13 @@ class Tab2ConversationRow extends StatelessWidget { ...@@ -623,11 +640,13 @@ class Tab2ConversationRow extends StatelessWidget {
: Tab2ConversationBubbleColor.gray, : Tab2ConversationBubbleColor.gray,
), ),
); );
return new Row( return new SafeArea(
mainAxisAlignment: isSelf ? MainAxisAlignment.end : MainAxisAlignment.start, child: new Row(
mainAxisSize: MainAxisSize.min, mainAxisAlignment: isSelf ? MainAxisAlignment.end : MainAxisAlignment.start,
crossAxisAlignment: isSelf ? CrossAxisAlignment.center : CrossAxisAlignment.end, mainAxisSize: MainAxisSize.min,
children: children, crossAxisAlignment: isSelf ? CrossAxisAlignment.center : CrossAxisAlignment.end,
children: children,
),
); );
} }
} }
...@@ -703,10 +722,14 @@ class CupertinoDemoTab3 extends StatelessWidget { ...@@ -703,10 +722,14 @@ class CupertinoDemoTab3 extends StatelessWidget {
height: 44.0, height: 44.0,
child: new Padding( child: new Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0), padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
child: new Row(children: <Widget>[ const Text( child: new SafeArea(
'Sign in', top: false,
style: const TextStyle(color: CupertinoColors.activeBlue), bottom: false,
) ]), child: new Row(children: <Widget>[ const Text(
'Sign in',
style: const TextStyle(color: CupertinoColors.activeBlue),
) ]),
),
), ),
), ),
), ),
......
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