Starter/samples
1
0
Fork 0
mirror of https://github.com/flutter/samples.git synced 2025-11-10 14:58:34 +00:00
Code Issues 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
This commit is contained in:
Pierre-Louis
2020-02-06 12:17:00 +01:00
committed by GitHub
parent d04440c11f
commit 7485904164
1 changed files with 82 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
gallery/lib/studies/crane/backdrop.dart
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,6 +39,9 @@ class _FrontLayer extends StatelessWidget {
return DefaultFocusTraversal(
policy: ReadingOrderTraversalPolicy(),
child: Padding(
padding:
isDesktop ? EdgeInsets.zero : EdgeInsets.only(top: mobileTopOffset),
child: PhysicalShape(
elevation: 16,
color: cranePrimaryWhite,
@@ -62,6 +67,7 @@ class _FrontLayer extends StatelessWidget {
],
),
),
),
);
}
}
@@ -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,6 +173,14 @@ class _BackdropState extends State<Backdrop> with TickerProviderStateMixin {
20 * textScaleFactor / 2
: 175 + 140 * textScaleFactor / 2,
),
// 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()
@@ -170,31 +188,36 @@ class _BackdropState extends State<Backdrop> with TickerProviderStateMixin {
controller: _tabController,
children: [
SlideTransition(
position: _flyLayerOffset,
position: _flyLayerHorizontalOffset,
child: _FrontLayer(
title: GalleryLocalizations.of(context)
.craneFlySubhead,
index: 0,
mobileTopOffset: _sleepLayerTopOffset,
),
),
SlideTransition(
position: _sleepLayerOffset,
position: _sleepLayerHorizontalOffset,
child: _FrontLayer(
title: GalleryLocalizations.of(context)
.craneSleepSubhead,
index: 1,
mobileTopOffset: 0,
),
),
SlideTransition(
position: _eatLayerOffset,
position: _eatLayerHorizontalOffset,
child: _FrontLayer(
title: GalleryLocalizations.of(context)
.craneEatSubhead,
index: 2,
mobileTopOffset: _sleepLayerTopOffset,
),
),
],
),
);
}),
),
],
),