1// Copyright 2015 The Chromium Authors. All rights reserved. 2// Use of this source code is governed by a BSD-style license that can be 3// found in the LICENSE file. 4 5// This example shows how to use flex layout directly in the underlying render 6// tree. 7 8import 'package:flutter/rendering.dart'; 9 10import 'src/solid_color_box.dart'; 11 12void main() { 13 final RenderFlex table = RenderFlex(direction: Axis.vertical, textDirection: TextDirection.ltr); 14 15 void addAlignmentRow(CrossAxisAlignment crossAxisAlignment) { 16 TextStyle style = const TextStyle(color: Color(0xFF000000)); 17 final RenderParagraph paragraph = RenderParagraph( 18 TextSpan(style: style, text: '$crossAxisAlignment'), 19 textDirection: TextDirection.ltr, 20 ); 21 table.add(RenderPadding(child: paragraph, padding: const EdgeInsets.only(top: 20.0))); 22 final RenderFlex row = RenderFlex(crossAxisAlignment: crossAxisAlignment, textBaseline: TextBaseline.alphabetic, textDirection: TextDirection.ltr); 23 style = const TextStyle(fontSize: 15.0, color: Color(0xFF000000)); 24 row.add(RenderDecoratedBox( 25 decoration: const BoxDecoration(color: Color(0x7FFFCCCC)), 26 child: RenderParagraph( 27 TextSpan(style: style, text: 'foo foo foo'), 28 textDirection: TextDirection.ltr, 29 ), 30 )); 31 style = const TextStyle(fontSize: 10.0, color: Color(0xFF000000)); 32 row.add(RenderDecoratedBox( 33 decoration: const BoxDecoration(color: Color(0x7FCCFFCC)), 34 child: RenderParagraph( 35 TextSpan(style: style, text: 'foo foo foo'), 36 textDirection: TextDirection.ltr, 37 ), 38 )); 39 final RenderFlex subrow = RenderFlex(crossAxisAlignment: crossAxisAlignment, textBaseline: TextBaseline.alphabetic, textDirection: TextDirection.ltr); 40 style = const TextStyle(fontSize: 25.0, color: Color(0xFF000000)); 41 subrow.add(RenderDecoratedBox( 42 decoration: const BoxDecoration(color: Color(0x7FCCCCFF)), 43 child: RenderParagraph( 44 TextSpan(style: style, text: 'foo foo foo foo'), 45 textDirection: TextDirection.ltr, 46 ), 47 )); 48 subrow.add(RenderSolidColorBox(const Color(0x7FCCFFFF), desiredSize: const Size(30.0, 40.0))); 49 row.add(subrow); 50 table.add(row); 51 final FlexParentData rowParentData = row.parentData; 52 rowParentData.flex = 1; 53 } 54 55 addAlignmentRow(CrossAxisAlignment.start); 56 addAlignmentRow(CrossAxisAlignment.end); 57 addAlignmentRow(CrossAxisAlignment.center); 58 addAlignmentRow(CrossAxisAlignment.stretch); 59 addAlignmentRow(CrossAxisAlignment.baseline); 60 61 void addJustificationRow(MainAxisAlignment justify) { 62 const TextStyle style = TextStyle(color: Color(0xFF000000)); 63 final RenderParagraph paragraph = RenderParagraph( 64 TextSpan(style: style, text: '$justify'), 65 textDirection: TextDirection.ltr, 66 ); 67 table.add(RenderPadding(child: paragraph, padding: const EdgeInsets.only(top: 20.0))); 68 final RenderFlex row = RenderFlex(direction: Axis.horizontal, textDirection: TextDirection.ltr); 69 row.add(RenderSolidColorBox(const Color(0xFFFFCCCC), desiredSize: const Size(80.0, 60.0))); 70 row.add(RenderSolidColorBox(const Color(0xFFCCFFCC), desiredSize: const Size(64.0, 60.0))); 71 row.add(RenderSolidColorBox(const Color(0xFFCCCCFF), desiredSize: const Size(160.0, 60.0))); 72 row.mainAxisAlignment = justify; 73 table.add(row); 74 final FlexParentData rowParentData = row.parentData; 75 rowParentData.flex = 1; 76 } 77 78 addJustificationRow(MainAxisAlignment.start); 79 addJustificationRow(MainAxisAlignment.end); 80 addJustificationRow(MainAxisAlignment.center); 81 addJustificationRow(MainAxisAlignment.spaceBetween); 82 addJustificationRow(MainAxisAlignment.spaceAround); 83 84 final RenderDecoratedBox root = RenderDecoratedBox( 85 decoration: const BoxDecoration(color: Color(0xFFFFFFFF)), 86 child: RenderPadding(child: table, padding: const EdgeInsets.symmetric(vertical: 50.0)), 87 ); 88 89 RenderingFlutterBinding(root: root); 90} 91