flutter/examples/layers/rendering/flex_layout.dart
Adam Barth fb4dbf4584 Improve TextSpan
Now we just have one TextSpan class that handles both simple strings, trees of
children, and styling both. This approach simplifies the interface for most
clients.

This patch also removes StyledText, which was weakly typed and tricky to use
correctly. The replacement is RichText, which is strongly typed and uses
TextSpan.
2016-02-24 14:07:10 -08:00

76 lines
3.5 KiB
Dart

// 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.
// This example shows how to use flex layout directly in the underlying render
// tree.
import 'package:flutter/rendering.dart';
import 'src/solid_color_box.dart';
void main() {
RenderFlex table = new RenderFlex(direction: FlexDirection.vertical);
void addAlignmentRow(FlexAlignItems alignItems) {
TextStyle style = const TextStyle(color: const Color(0xFF000000));
RenderParagraph paragraph = new RenderParagraph(new TextSpan(style: style, text: '$alignItems'));
table.add(new RenderPadding(child: paragraph, padding: new EdgeDims.only(top: 20.0)));
RenderFlex row = new RenderFlex(alignItems: alignItems, textBaseline: TextBaseline.alphabetic);
style = new TextStyle(fontSize: 15.0, color: const Color(0xFF000000));
row.add(new RenderDecoratedBox(
decoration: new BoxDecoration(backgroundColor: const Color(0x7FFFCCCC)),
child: new RenderParagraph(new TextSpan(style: style, text: 'foo foo foo'))
));
style = new TextStyle(fontSize: 10.0, color: const Color(0xFF000000));
row.add(new RenderDecoratedBox(
decoration: new BoxDecoration(backgroundColor: const Color(0x7FCCFFCC)),
child: new RenderParagraph(new TextSpan(style: style, text: 'foo foo foo'))
));
RenderFlex subrow = new RenderFlex(alignItems: alignItems, textBaseline: TextBaseline.alphabetic);
style = new TextStyle(fontSize: 25.0, color: const Color(0xFF000000));
subrow.add(new RenderDecoratedBox(
decoration: new BoxDecoration(backgroundColor: const Color(0x7FCCCCFF)),
child: new RenderParagraph(new TextSpan(style: style, text: 'foo foo foo foo'))
));
subrow.add(new RenderSolidColorBox(const Color(0x7FCCFFFF), desiredSize: new Size(30.0, 40.0)));
row.add(subrow);
table.add(row);
final FlexParentData rowParentData = row.parentData;
rowParentData.flex = 1;
}
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 TextSpan(style: style, text: '$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);
RenderDecoratedBox root = new RenderDecoratedBox(
decoration: new BoxDecoration(backgroundColor: const Color(0xFFFFFFFF)),
child: new RenderPadding(child: table, padding: new EdgeDims.symmetric(vertical: 50.0))
);
new RenderingFlutterBinding(root: root);
}