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

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

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