2019-11-27 23:04:02 +00:00
|
|
|
// Copyright 2014 The Flutter Authors. All rights reserved.
|
2015-07-17 19:46:51 +00:00
|
|
|
// Use of this source code is governed by a BSD-style license that can be
|
|
|
|
// found in the LICENSE file.
|
|
|
|
|
2016-02-13 22:30:37 +00:00
|
|
|
// This example shows how to use flex layout directly in the underlying render
|
|
|
|
// tree.
|
|
|
|
|
2015-10-10 03:44:52 +00:00
|
|
|
import 'package:flutter/rendering.dart';
|
2015-07-17 19:46:51 +00:00
|
|
|
|
2016-02-13 08:52:56 +00:00
|
|
|
import 'src/solid_color_box.dart';
|
2015-07-17 19:46:51 +00:00
|
|
|
|
|
|
|
void main() {
|
2018-09-12 06:29:29 +00:00
|
|
|
final RenderFlex table = RenderFlex(direction: Axis.vertical, textDirection: TextDirection.ltr);
|
2015-07-17 19:46:51 +00:00
|
|
|
|
2016-03-13 02:28:42 +00:00
|
|
|
void addAlignmentRow(CrossAxisAlignment crossAxisAlignment) {
|
2018-08-02 10:02:32 +00:00
|
|
|
TextStyle style = const TextStyle(color: Color(0xFF000000));
|
2018-09-12 06:29:29 +00:00
|
|
|
final RenderParagraph paragraph = RenderParagraph(
|
|
|
|
TextSpan(style: style, text: '$crossAxisAlignment'),
|
2017-09-07 23:57:38 +00:00
|
|
|
textDirection: TextDirection.ltr,
|
|
|
|
);
|
2018-09-12 06:29:29 +00:00
|
|
|
table.add(RenderPadding(child: paragraph, padding: const EdgeInsets.only(top: 20.0)));
|
|
|
|
final RenderFlex row = RenderFlex(crossAxisAlignment: crossAxisAlignment, textBaseline: TextBaseline.alphabetic, textDirection: TextDirection.ltr);
|
2018-08-02 10:02:32 +00:00
|
|
|
style = const TextStyle(fontSize: 15.0, color: Color(0xFF000000));
|
2018-09-12 06:29:29 +00:00
|
|
|
row.add(RenderDecoratedBox(
|
2018-08-02 10:02:32 +00:00
|
|
|
decoration: const BoxDecoration(color: Color(0x7FFFCCCC)),
|
2018-09-12 06:29:29 +00:00
|
|
|
child: RenderParagraph(
|
|
|
|
TextSpan(style: style, text: 'foo foo foo'),
|
2017-09-07 23:57:38 +00:00
|
|
|
textDirection: TextDirection.ltr,
|
|
|
|
),
|
2015-07-17 19:46:51 +00:00
|
|
|
));
|
2018-08-02 10:02:32 +00:00
|
|
|
style = const TextStyle(fontSize: 10.0, color: Color(0xFF000000));
|
2018-09-12 06:29:29 +00:00
|
|
|
row.add(RenderDecoratedBox(
|
2018-08-02 10:02:32 +00:00
|
|
|
decoration: const BoxDecoration(color: Color(0x7FCCFFCC)),
|
2018-09-12 06:29:29 +00:00
|
|
|
child: RenderParagraph(
|
|
|
|
TextSpan(style: style, text: 'foo foo foo'),
|
2017-09-07 23:57:38 +00:00
|
|
|
textDirection: TextDirection.ltr,
|
|
|
|
),
|
2015-07-17 19:46:51 +00:00
|
|
|
));
|
2018-09-12 06:29:29 +00:00
|
|
|
final RenderFlex subrow = RenderFlex(crossAxisAlignment: crossAxisAlignment, textBaseline: TextBaseline.alphabetic, textDirection: TextDirection.ltr);
|
2018-08-02 10:02:32 +00:00
|
|
|
style = const TextStyle(fontSize: 25.0, color: Color(0xFF000000));
|
2018-09-12 06:29:29 +00:00
|
|
|
subrow.add(RenderDecoratedBox(
|
2018-08-02 10:02:32 +00:00
|
|
|
decoration: const BoxDecoration(color: Color(0x7FCCCCFF)),
|
2018-09-12 06:29:29 +00:00
|
|
|
child: RenderParagraph(
|
|
|
|
TextSpan(style: style, text: 'foo foo foo foo'),
|
2017-09-07 23:57:38 +00:00
|
|
|
textDirection: TextDirection.ltr,
|
|
|
|
),
|
2015-07-17 19:46:51 +00:00
|
|
|
));
|
2018-09-12 06:29:29 +00:00
|
|
|
subrow.add(RenderSolidColorBox(const Color(0x7FCCFFFF), desiredSize: const Size(30.0, 40.0)));
|
2015-07-17 21:29:05 +00:00
|
|
|
row.add(subrow);
|
2015-07-17 19:46:51 +00:00
|
|
|
table.add(row);
|
2020-10-22 20:33:07 +00:00
|
|
|
final FlexParentData rowParentData = row.parentData! as FlexParentData;
|
2015-10-22 20:29:12 +00:00
|
|
|
rowParentData.flex = 1;
|
2015-07-17 19:46:51 +00:00
|
|
|
}
|
|
|
|
|
2016-03-13 02:28:42 +00:00
|
|
|
addAlignmentRow(CrossAxisAlignment.start);
|
|
|
|
addAlignmentRow(CrossAxisAlignment.end);
|
|
|
|
addAlignmentRow(CrossAxisAlignment.center);
|
|
|
|
addAlignmentRow(CrossAxisAlignment.stretch);
|
|
|
|
addAlignmentRow(CrossAxisAlignment.baseline);
|
2016-02-13 08:52:56 +00:00
|
|
|
|
2016-03-13 02:28:42 +00:00
|
|
|
void addJustificationRow(MainAxisAlignment justify) {
|
2018-08-02 10:02:32 +00:00
|
|
|
const TextStyle style = TextStyle(color: Color(0xFF000000));
|
2018-09-12 06:29:29 +00:00
|
|
|
final RenderParagraph paragraph = RenderParagraph(
|
|
|
|
TextSpan(style: style, text: '$justify'),
|
2017-09-07 23:57:38 +00:00
|
|
|
textDirection: TextDirection.ltr,
|
|
|
|
);
|
2018-09-12 06:29:29 +00:00
|
|
|
table.add(RenderPadding(child: paragraph, padding: const EdgeInsets.only(top: 20.0)));
|
2021-10-08 16:25:14 +00:00
|
|
|
final RenderFlex row = RenderFlex(textDirection: TextDirection.ltr);
|
2018-09-12 06:29:29 +00:00
|
|
|
row.add(RenderSolidColorBox(const Color(0xFFFFCCCC), desiredSize: const Size(80.0, 60.0)));
|
|
|
|
row.add(RenderSolidColorBox(const Color(0xFFCCFFCC), desiredSize: const Size(64.0, 60.0)));
|
|
|
|
row.add(RenderSolidColorBox(const Color(0xFFCCCCFF), desiredSize: const Size(160.0, 60.0)));
|
2016-03-13 02:28:42 +00:00
|
|
|
row.mainAxisAlignment = justify;
|
2016-02-13 08:52:56 +00:00
|
|
|
table.add(row);
|
2020-10-22 20:33:07 +00:00
|
|
|
final FlexParentData rowParentData = row.parentData! as FlexParentData;
|
2016-02-13 08:52:56 +00:00
|
|
|
rowParentData.flex = 1;
|
|
|
|
}
|
|
|
|
|
2016-03-13 02:28:42 +00:00
|
|
|
addJustificationRow(MainAxisAlignment.start);
|
|
|
|
addJustificationRow(MainAxisAlignment.end);
|
|
|
|
addJustificationRow(MainAxisAlignment.center);
|
|
|
|
addJustificationRow(MainAxisAlignment.spaceBetween);
|
|
|
|
addJustificationRow(MainAxisAlignment.spaceAround);
|
2016-02-13 08:52:56 +00:00
|
|
|
|
2018-09-12 06:29:29 +00:00
|
|
|
final RenderDecoratedBox root = RenderDecoratedBox(
|
2018-08-02 10:02:32 +00:00
|
|
|
decoration: const BoxDecoration(color: Color(0xFFFFFFFF)),
|
2018-09-12 06:29:29 +00:00
|
|
|
child: RenderPadding(child: table, padding: const EdgeInsets.symmetric(vertical: 50.0)),
|
2015-07-17 19:46:51 +00:00
|
|
|
);
|
|
|
|
|
2021-05-20 20:34:05 +00:00
|
|
|
RenderingFlutterBinding(root: root).scheduleFrame();
|
2015-07-17 19:46:51 +00:00
|
|
|
}
|