flex_layout.dart 3.63 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() {
Hixie's avatar
Hixie committed
13
  RenderFlex table = new RenderFlex(direction: FlexDirection.vertical);
14

15
  void addAlignmentRow(FlexAlignItems alignItems) {
16
    TextStyle style = const TextStyle(color: const Color(0xFF000000));
17
    RenderParagraph paragraph = new RenderParagraph(new StyledTextSpan(style, <TextSpan>[new PlainTextSpan('$alignItems')]));
18
    table.add(new RenderPadding(child: paragraph, padding: new EdgeDims.only(top: 20.0)));
Hixie's avatar
Hixie committed
19
    RenderFlex row = new RenderFlex(alignItems: alignItems, textBaseline: TextBaseline.alphabetic);
20 21
    style = new TextStyle(fontSize: 15.0, color: const Color(0xFF000000));
    row.add(new RenderDecoratedBox(
Collin Jackson's avatar
Collin Jackson committed
22
      decoration: new BoxDecoration(backgroundColor: const Color(0x7FFFCCCC)),
Hixie's avatar
Hixie committed
23
      child: new RenderParagraph(new StyledTextSpan(style, <TextSpan>[new PlainTextSpan('foo foo foo')]))
24 25 26
    ));
    style = new TextStyle(fontSize: 10.0, color: const Color(0xFF000000));
    row.add(new RenderDecoratedBox(
Collin Jackson's avatar
Collin Jackson committed
27
      decoration: new BoxDecoration(backgroundColor: const Color(0x7FCCFFCC)),
Hixie's avatar
Hixie committed
28
      child: new RenderParagraph(new StyledTextSpan(style, <TextSpan>[new PlainTextSpan('foo foo foo')]))
29
    ));
Hixie's avatar
Hixie committed
30
    RenderFlex subrow = new RenderFlex(alignItems: alignItems, textBaseline: TextBaseline.alphabetic);
31
    style = new TextStyle(fontSize: 25.0, color: const Color(0xFF000000));
Collin Jackson's avatar
Collin Jackson committed
32 33
    subrow.add(new RenderDecoratedBox(
      decoration: new BoxDecoration(backgroundColor: const Color(0x7FCCCCFF)),
Hixie's avatar
Hixie committed
34
      child: new RenderParagraph(new StyledTextSpan(style, <TextSpan>[new PlainTextSpan('foo foo foo foo')]))
35
    ));
Collin Jackson's avatar
Collin Jackson committed
36 37
    subrow.add(new RenderSolidColorBox(const Color(0x7FCCFFFF), desiredSize: new Size(30.0, 40.0)));
    row.add(subrow);
38
    table.add(row);
Hixie's avatar
Hixie committed
39 40
    final FlexParentData rowParentData = row.parentData;
    rowParentData.flex = 1;
41 42
  }

43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68
  addAlignmentRow(FlexAlignItems.start);
  addAlignmentRow(FlexAlignItems.end);
  addAlignmentRow(FlexAlignItems.center);
  addAlignmentRow(FlexAlignItems.stretch);
  addAlignmentRow(FlexAlignItems.baseline);

  void addJustificationRow(FlexJustifyContent justify) {
    const TextStyle style = const TextStyle(color: const Color(0xFF000000));
    RenderParagraph paragraph = new RenderParagraph(new StyledTextSpan(style, <TextSpan>[new PlainTextSpan('$justify')]));
    table.add(new RenderPadding(child: paragraph, padding: new EdgeDims.only(top: 20.0)));
    RenderFlex row = new RenderFlex(direction: FlexDirection.horizontal);
    row.add(new RenderSolidColorBox(const Color(0xFFFFCCCC), desiredSize: new Size(80.0, 60.0)));
    row.add(new RenderSolidColorBox(const Color(0xFFCCFFCC), desiredSize: new Size(64.0, 60.0)));
    row.add(new RenderSolidColorBox(const Color(0xFFCCCCFF), desiredSize: new Size(160.0, 60.0)));
    row.justifyContent = justify;
    table.add(row);
    final FlexParentData rowParentData = row.parentData;
    rowParentData.flex = 1;
  }

  addJustificationRow(FlexJustifyContent.start);
  addJustificationRow(FlexJustifyContent.end);
  addJustificationRow(FlexJustifyContent.center);
  addJustificationRow(FlexJustifyContent.spaceBetween);
  addJustificationRow(FlexJustifyContent.spaceAround);

69 70 71 72 73
  RenderDecoratedBox root = new RenderDecoratedBox(
    decoration: new BoxDecoration(backgroundColor: const Color(0xFFFFFFFF)),
    child: new RenderPadding(child: table, padding: new EdgeDims.symmetric(vertical: 50.0))
  );

Ian Hickson's avatar
Ian Hickson committed
74
  new RenderingFlutterBinding(root: root);
75
}