pop_out_and_expand.dart 2.66 KB
Newer Older
1 2 3 4
// 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.

5
import 'package:sky/theme/colors.dart' as colors;
6 7
import 'package:sky/widgets.dart';

Adam Barth's avatar
Adam Barth committed
8 9
class GreenCard extends Component {
  GreenCard({ this.child });
10 11 12 13 14 15

  Widget child;

  Widget build() {
    return new Container(
      decoration: new BoxDecoration(
Adam Barth's avatar
Adam Barth committed
16 17 18 19 20
        backgroundColor: const Color(0xFF0000FF),
        border: new Border.all(
          color: const Color(0xFF00FF00),
          width: 10.0
        )
21
      ),
Adam Barth's avatar
Adam Barth committed
22
      child: new Center(child: child)
23 24 25 26
    );
  }
}

Adam Barth's avatar
Adam Barth committed
27
class CardData {
28 29 30
  final GlobalKey key;
  final String content;

Adam Barth's avatar
Adam Barth committed
31
  CardData({ this.key, this.content });
32 33 34 35 36
}

class ExampleApp extends App {
  ExampleApp() {
    for (int i = 0; i < 20; ++i) {
Adam Barth's avatar
Adam Barth committed
37
      _data.add(new CardData(
38 39 40 41 42 43
        key: new GlobalKey(),
        content: '$i'
      ));
    }
  }

Adam Barth's avatar
Adam Barth committed
44
  final List<CardData> _data = new List<CardData>();
45

Adam Barth's avatar
Adam Barth committed
46
  GlobalKey _overlay;
47

Adam Barth's avatar
Adam Barth committed
48
  Widget _buildCard(CardData cardData) {
49 50
    return new GestureDetector(
      onTap: () {
Adam Barth's avatar
Adam Barth committed
51 52 53 54 55 56 57 58 59 60 61
        setState(() {
          _overlay = cardData.key;
        });
      },
      child: new Container(
        height: 100.0,
        margin: new EdgeDims.symmetric(horizontal: 20.0, vertical: 4.0),
        child: new Mimicable(
          key: cardData.key,
          child: new GreenCard(child: new Text(cardData.content))
        )
62 63 64 65
      )
    );
  }

66 67 68 69 70 71 72
  Rect _targetRect;
  void _handleOverlaySizeChanged(Size size) {
    setState(() {
      _targetRect = Point.origin & size;
    });
  }

73
  Widget build() {
Adam Barth's avatar
Adam Barth committed
74 75 76
    List<Widget> cards = new List<Widget>();
    for (int i = 0; i < _data.length; ++i) {
      cards.add(_buildCard(_data[i]));
77 78
    }

Adam Barth's avatar
Adam Barth committed
79 80 81 82 83
    return new IconTheme(
      data: const IconThemeData(color: IconThemeColor.white),
      child: new Theme(
        data: new ThemeData(
          brightness: ThemeBrightness.light,
84 85
          primarySwatch: colors.Blue,
          accentColor: colors.RedAccent[200]
Adam Barth's avatar
Adam Barth committed
86 87 88 89 90 91 92 93 94 95 96 97
        ),
        child: new Scaffold(
          toolbar: new ToolBar(
            left: new IconButton(
              icon: "navigation/arrow_back",
              onPressed: () {
                setState(() {
                  _overlay = null;
                });
              }
            )
          ),
98 99 100 101 102 103 104 105
          body: new SizeObserver(
            callback: _handleOverlaySizeChanged,
            child: new MimicOverlay(
              overlay: _overlay,
              duration: const Duration(milliseconds: 5000),
              targetRect: _targetRect,
              children: [ new Block(cards) ]
            )
Adam Barth's avatar
Adam Barth committed
106
          )
107
        )
Adam Barth's avatar
Adam Barth committed
108 109
      )
    );
110 111 112 113 114 115
  }
}

void main() {
  runApp(new ExampleApp());
}