msb-public
/
samples
mirror of https://github.com/flutter/samples.git
1
0
Code Issues Projects Releases Wiki Activity

[Gallery] Implement Crane middle front layer (#318)

Browse Source 
* Move gallery/gallery/ content to gallery/

* Update banner_demo.dart

* Update documentation

* Add hidden files

* Edit Travis script

* Update top level docs

* Update README.md path

* Move Crane middle tab up
pull/320/head
Pierre-Louis 5 years ago committed by GitHub
parent d04440c11f
commit 7485904164
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 82 additions and 59 deletions
Show Stats Download Patch File Download Diff File

141
gallery/lib/studies/crane/backdrop.dart
Unescape View File

@ -23,10 +23,12 @@ class _FrontLayer extends StatelessWidget {
Key key,
this.title,
this.index,
this.mobileTopOffset,
}) : super(key: key);
final String title;
final int index;
final double mobileTopOffset;
static const frontLayerBorderRadius = 16.0;
@ -37,29 +39,33 @@ class _FrontLayer extends StatelessWidget {
return DefaultFocusTraversal(
policy: ReadingOrderTraversalPolicy(),
child: PhysicalShape(
elevation: 16,
color: cranePrimaryWhite,
clipper: ShapeBorderClipper(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(frontLayerBorderRadius),
topRight: Radius.circular(frontLayerBorderRadius),
child: Padding(
padding:
isDesktop ? EdgeInsets.zero : EdgeInsets.only(top: mobileTopOffset),
child: PhysicalShape(
elevation: 16,
color: cranePrimaryWhite,
clipper: ShapeBorderClipper(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(frontLayerBorderRadius),
topRight: Radius.circular(frontLayerBorderRadius),
),
),
),
),
child: ListView(
padding: isDesktop
? EdgeInsets.symmetric(
horizontal:
isSmallDesktop ? appPaddingSmall : appPaddingLarge,
vertical: 22)
: EdgeInsets.all(20),
children: [
Text(title, style: Theme.of(context).textTheme.subtitle),
SizedBox(height: 20),
ItemCards(index: index),
],
child: ListView(
padding: isDesktop
? EdgeInsets.symmetric(
horizontal:
isSmallDesktop ? appPaddingSmall : appPaddingLarge,
vertical: 22)
: EdgeInsets.all(20),
children: [
Text(title, style: Theme.of(context).textTheme.subtitle),
SizedBox(height: 20),
ItemCards(index: index),
],
),
),
),
);
@ -94,23 +100,27 @@ class Backdrop extends StatefulWidget {
class _BackdropState extends State<Backdrop> with TickerProviderStateMixin {
TabController _tabController;
Animation<Offset> _flyLayerOffset;
Animation<Offset> _sleepLayerOffset;
Animation<Offset> _eatLayerOffset;
Animation<Offset> _flyLayerHorizontalOffset;
Animation<Offset> _sleepLayerHorizontalOffset;
Animation<Offset> _eatLayerHorizontalOffset;
// How much the 'sleep' front layer is vertically offset relative to other
// front layers, in pixels, with the mobile layout.
static const _sleepLayerTopOffset = 60.0;
@override
void initState() {
super.initState();
_tabController = TabController(length: 3, vsync: this);
// Offsets to create a gap between front layers.
_flyLayerOffset = _tabController.animation
// Offsets to create a horizontal gap between front layers.
_flyLayerHorizontalOffset = _tabController.animation
.drive(Tween<Offset>(begin: Offset(0, 0), end: Offset(-0.05, 0)));
_sleepLayerOffset = _tabController.animation
_sleepLayerHorizontalOffset = _tabController.animation
.drive(Tween<Offset>(begin: Offset(0.05, 0), end: Offset(0, 0)));
_eatLayerOffset = _tabController.animation
_eatLayerHorizontalOffset = _tabController.animation
.drive(Tween<Offset>(begin: Offset(0.10, 0), end: Offset(0.05, 0)));
}
@ -163,38 +173,51 @@ class _BackdropState extends State<Backdrop> with TickerProviderStateMixin {
20 * textScaleFactor / 2
: 175 + 140 * textScaleFactor / 2,
),
child: TabBarView(
physics: isDesktop
? NeverScrollableScrollPhysics()
: null, // use default TabBarView physics
controller: _tabController,
children: [
SlideTransition(
position: _flyLayerOffset,
child: _FrontLayer(
title: GalleryLocalizations.of(context)
.craneFlySubhead,
index: 0,
),
),
SlideTransition(
position: _sleepLayerOffset,
child: _FrontLayer(
title: GalleryLocalizations.of(context)
.craneSleepSubhead,
index: 1,
),
// To display the middle front layer higher than the others,
// we allow the TabBarView to overflow by an offset
// (doubled because it technically overflows top & bottom).
// The other front layers are top padded by this offset.
child: LayoutBuilder(builder: (context, constraints) {
return OverflowBox(
maxHeight:
constraints.maxHeight + _sleepLayerTopOffset * 2,
child: TabBarView(
physics: isDesktop
? NeverScrollableScrollPhysics()
: null, // use default TabBarView physics
controller: _tabController,
children: [
SlideTransition(
position: _flyLayerHorizontalOffset,
child: _FrontLayer(
title: GalleryLocalizations.of(context)
.craneFlySubhead,
index: 0,
mobileTopOffset: _sleepLayerTopOffset,
),
),
SlideTransition(
position: _sleepLayerHorizontalOffset,
child: _FrontLayer(
title: GalleryLocalizations.of(context)
.craneSleepSubhead,
index: 1,
mobileTopOffset: 0,
),
),
SlideTransition(
position: _eatLayerHorizontalOffset,
child: _FrontLayer(
title: GalleryLocalizations.of(context)
.craneEatSubhead,
index: 2,
mobileTopOffset: _sleepLayerTopOffset,
),
),
],
),
SlideTransition(
position: _eatLayerOffset,
child: _FrontLayer(
title: GalleryLocalizations.of(context)
.craneEatSubhead,
index: 2,
),
),
],
),
);
}),
),
],
),

Write Preview
Loading…
Cancel
Save