flex_layout.dart 4.01 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 6 7
// This example shows how to use flex layout directly in the underlying render
// tree.

8
import 'package:flutter/rendering.dart';
9

10
import 'src/solid_color_box.dart';
11 12

void main() {
13
  final RenderFlex table = new RenderFlex(direction: Axis.vertical, textDirection: TextDirection.ltr);
14

15
  void addAlignmentRow(CrossAxisAlignment crossAxisAlignment) {
16
    TextStyle style = const TextStyle(color: const Color(0xFF000000));
Ian Hickson's avatar
Ian Hickson committed
17 18 19 20
    final RenderParagraph paragraph = new RenderParagraph(
      new TextSpan(style: style, text: '$crossAxisAlignment'),
      textDirection: TextDirection.ltr,
    );
21
    table.add(new RenderPadding(child: paragraph, padding: const EdgeInsets.only(top: 20.0)));
22
    final RenderFlex row = new RenderFlex(crossAxisAlignment: crossAxisAlignment, textBaseline: TextBaseline.alphabetic, textDirection: TextDirection.ltr);
23
    style = const TextStyle(fontSize: 15.0, color: const Color(0xFF000000));
24
    row.add(new RenderDecoratedBox(
25
      decoration: const BoxDecoration(color: const Color(0x7FFFCCCC)),
Ian Hickson's avatar
Ian Hickson committed
26 27 28 29
      child: new RenderParagraph(
        new TextSpan(style: style, text: 'foo foo foo'),
        textDirection: TextDirection.ltr,
      ),
30
    ));
31
    style = const TextStyle(fontSize: 10.0, color: const Color(0xFF000000));
32
    row.add(new RenderDecoratedBox(
33
      decoration: const BoxDecoration(color: const Color(0x7FCCFFCC)),
Ian Hickson's avatar
Ian Hickson committed
34 35 36 37
      child: new RenderParagraph(
        new TextSpan(style: style, text: 'foo foo foo'),
        textDirection: TextDirection.ltr,
      ),
38
    ));
39
    final RenderFlex subrow = new RenderFlex(crossAxisAlignment: crossAxisAlignment, textBaseline: TextBaseline.alphabetic, textDirection: TextDirection.ltr);
40
    style = const TextStyle(fontSize: 25.0, color: const Color(0xFF000000));
Collin Jackson's avatar
Collin Jackson committed
41
    subrow.add(new RenderDecoratedBox(
42
      decoration: const BoxDecoration(color: const Color(0x7FCCCCFF)),
Ian Hickson's avatar
Ian Hickson committed
43 44 45 46
      child: new RenderParagraph(
        new TextSpan(style: style, text: 'foo foo foo foo'),
        textDirection: TextDirection.ltr,
      ),
47
    ));
48
    subrow.add(new RenderSolidColorBox(const Color(0x7FCCFFFF), desiredSize: const Size(30.0, 40.0)));
Collin Jackson's avatar
Collin Jackson committed
49
    row.add(subrow);
50
    table.add(row);
Hixie's avatar
Hixie committed
51 52
    final FlexParentData rowParentData = row.parentData;
    rowParentData.flex = 1;
53 54
  }

55 56 57 58 59
  addAlignmentRow(CrossAxisAlignment.start);
  addAlignmentRow(CrossAxisAlignment.end);
  addAlignmentRow(CrossAxisAlignment.center);
  addAlignmentRow(CrossAxisAlignment.stretch);
  addAlignmentRow(CrossAxisAlignment.baseline);
60

61
  void addJustificationRow(MainAxisAlignment justify) {
62
    const TextStyle style = const TextStyle(color: const Color(0xFF000000));
Ian Hickson's avatar
Ian Hickson committed
63 64 65 66
    final RenderParagraph paragraph = new RenderParagraph(
      new TextSpan(style: style, text: '$justify'),
      textDirection: TextDirection.ltr,
    );
67
    table.add(new RenderPadding(child: paragraph, padding: const EdgeInsets.only(top: 20.0)));
68
    final RenderFlex row = new RenderFlex(direction: Axis.horizontal, textDirection: TextDirection.ltr);
69 70 71
    row.add(new RenderSolidColorBox(const Color(0xFFFFCCCC), desiredSize: const Size(80.0, 60.0)));
    row.add(new RenderSolidColorBox(const Color(0xFFCCFFCC), desiredSize: const Size(64.0, 60.0)));
    row.add(new RenderSolidColorBox(const Color(0xFFCCCCFF), desiredSize: const Size(160.0, 60.0)));
72
    row.mainAxisAlignment = justify;
73 74 75 76 77
    table.add(row);
    final FlexParentData rowParentData = row.parentData;
    rowParentData.flex = 1;
  }

78 79 80 81 82
  addJustificationRow(MainAxisAlignment.start);
  addJustificationRow(MainAxisAlignment.end);
  addJustificationRow(MainAxisAlignment.center);
  addJustificationRow(MainAxisAlignment.spaceBetween);
  addJustificationRow(MainAxisAlignment.spaceAround);
83

84
  final RenderDecoratedBox root = new RenderDecoratedBox(
85
    decoration: const BoxDecoration(color: const Color(0xFFFFFFFF)),
86
    child: new RenderPadding(child: table, padding: const EdgeInsets.symmetric(vertical: 50.0)),
87 88
  );

Ian Hickson's avatar
Ian Hickson committed
89
  new RenderingFlutterBinding(root: root);
90
}