autolayout.dart 2.9 KB
Newer Older
1 2 3 4 5 6 7 8 9 10
// Copyright 2016 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.

// This example shows how to use the Cassowary autolayout system with widgets.

import 'package:cassowary/cassowary.dart' as al;
import 'package:flutter/widgets.dart';

class _MyAutoLayoutDelegate extends AutoLayoutDelegate {
11 12 13 14
  AutoLayoutRect p1 = new AutoLayoutRect();
  AutoLayoutRect p2 = new AutoLayoutRect();
  AutoLayoutRect p3 = new AutoLayoutRect();
  AutoLayoutRect p4 = new AutoLayoutRect();
15

16
  List<al.Constraint> getConstraints(AutoLayoutRect parent) {
17 18
    return <al.Constraint>[
      // Sum of widths of each box must be equal to that of the container
19
      parent.width.equals(p1.width + p2.width + p3.width),
20 21

      // The boxes must be stacked left to right
22 23
      p1.right <= p2.left,
      p2.right <= p3.left,
24 25

      // The widths of the first and the third boxes should be equal
26
      p1.width.equals(p3.width),
27 28 29

      // The width of the second box should be twice as much as that of the first
      // and third
30
      p1.width.equals(p2.width * al.cm(2.0)),
31 32

      // The height of the three boxes should be equal to that of the container
33 34 35
      p1.height.equals(p2.height),
      p2.height.equals(p3.height),
      p3.height.equals(parent.height),
36 37 38

      // The fourth box should be half as wide as the second and must be attached
      // to the right edge of the same (by its center)
39 40 41 42
      p4.width.equals(p2.width / al.cm(2.0)),
      p4.height.equals(al.cm(50.0)),
      p4.horizontalCenter.equals(p2.right),
      p4.verticalCenter.equals(p2.height / al.cm(2.0)),
43 44 45
    ];
  }

46
  bool shouldUpdateConstraints(_MyAutoLayoutDelegate oldDelegate) => true;
47 48 49 50 51 52 53 54 55 56 57 58 59
}

class ColoredBoxes extends StatefulComponent {
  _ColoredBoxesState createState() => new _ColoredBoxesState();
}

class _ColoredBoxesState extends State<ColoredBoxes> {
  final _MyAutoLayoutDelegate delegate = new _MyAutoLayoutDelegate();

  Widget build(BuildContext context) {
    return new AutoLayout(
      delegate: delegate,
      children: <Widget>[
60
        new AutoLayoutChild(
61
          rect: delegate.p1,
62 63 64 65 66
          child: new DecoratedBox(
            decoration: new BoxDecoration(backgroundColor: const Color(0xFFFF0000))
          )
        ),
        new AutoLayoutChild(
67
          rect: delegate.p2,
68 69 70 71 72
          child: new DecoratedBox(
            decoration: new BoxDecoration(backgroundColor: const Color(0xFF00FF00))
          )
        ),
        new AutoLayoutChild(
73
          rect: delegate.p3,
74 75 76 77 78
          child: new DecoratedBox(
            decoration: new BoxDecoration(backgroundColor: const Color(0xFF0000FF))
          )
        ),
        new AutoLayoutChild(
79
          rect: delegate.p4,
80 81 82 83
          child: new DecoratedBox(
            decoration: new BoxDecoration(backgroundColor: const Color(0xFFFFFFFF))
          )
        ),
84 85 86 87 88 89 90 91
      ]
    );
  }
}

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