| // Copyright 2015 The Chromium Authors. All rights reserved. |
| // Use of this source code is governed by a BSD-style license that can be |
| // found in the LICENSE file. |
| |
| import 'package:flutter/animation.dart'; |
| import 'package:flutter/material.dart'; |
| |
| const double _kHeight = 150.0; |
| const Duration _kEffectDuration = const Duration(seconds: 1); |
| |
| class MimicDemo extends StatefulComponent { |
| _MimicDemoState createState() => new _MimicDemoState(); |
| } |
| |
| class _MimicDemoState extends State<MimicDemo> { |
| GlobalKey<MimicableState> _orange = new GlobalKey<MimicableState>(); |
| GlobalKey _targetContainer = new GlobalKey(); |
| |
| bool _slotForOrangeOnTop = false; |
| bool _orangeOnTop = false; |
| |
| void _handleTap() { |
| if (_slotForOrangeOnTop) |
| return; |
| setState(() { |
| _slotForOrangeOnTop = true; |
| }); |
| MimicOverlayEntry entry = _orange.currentState.liftToOverlay(); |
| entry.animateTo(targetKey: _targetContainer, duration: _kEffectDuration, curve: Curves.ease).then((_) { |
| setState(() { |
| _orangeOnTop = true; |
| }); |
| entry.dispose(); |
| }); |
| } |
| |
| void _reset() { |
| setState(() { |
| _slotForOrangeOnTop = false; |
| _orangeOnTop = false; |
| }); |
| } |
| |
| Widget _buildOrange() { |
| return new Mimicable( |
| key: _orange, |
| child: new Container( |
| height: _kHeight, |
| decoration: new BoxDecoration( |
| backgroundColor: Colors.deepOrange[500] |
| ) |
| ) |
| ); |
| } |
| |
| Widget build(BuildContext context) { |
| List<Widget> children = <Widget>[ |
| new Container( |
| height: _kHeight, |
| decoration: new BoxDecoration( |
| backgroundColor: Colors.amber[500] |
| ) |
| ), |
| new AnimatedContainer( |
| key: _targetContainer, |
| height: _slotForOrangeOnTop ? _kHeight : 0.0, |
| duration: _kEffectDuration, |
| curve: Curves.ease, |
| child: _orangeOnTop ? _buildOrange() : null |
| ), |
| new Container( |
| height: _kHeight, |
| decoration: new BoxDecoration( |
| backgroundColor: Colors.green[500] |
| ) |
| ), |
| new Container( |
| height: _kHeight, |
| decoration: new BoxDecoration( |
| backgroundColor: Colors.blue[500] |
| ) |
| ), |
| ]; |
| |
| if (!_orangeOnTop) |
| children.add(_buildOrange()); |
| |
| return new GestureDetector( |
| onTap: _handleTap, |
| onLongPress: _reset, |
| child: new Block(children) |
| ); |
| } |
| } |
| |
| void main() { |
| runApp(new MaterialApp( |
| title: 'Mimic Demo', |
| routes: { |
| '/': (_) => new MimicDemo() |
| } |
| )); |
| } |