Commit ce28a717 authored by Hixie's avatar Hixie

Replace Flex to Row and Column in tests and examples.

This still leaves Flex and FlexDirection available. At some point once
people have transitioned to Row/Column we should rename Flex to _Flex
and stop reexporting FlexDirection from basic.dart.
parent 7c3e878d
......@@ -20,7 +20,7 @@ class Field extends Component {
final String placeholder;
Widget build() {
return new Flex([
return new Row([
new Padding(
padding: const EdgeDims.symmetric(horizontal: 16.0),
child: new Icon(type: icon, size: 24)
......@@ -31,8 +31,7 @@ class Field extends Component {
placeholder: placeholder
)
)
],
direction: FlexDirection.horizontal
]
);
}
}
......
......@@ -148,14 +148,14 @@ class DemoList extends Component {
child: new InkWell(
child: new Container(
margin: const EdgeDims.only(top: 24.0, left: 24.0),
child: new Flex([
new Text(demo.name, style: demo.textTheme.title),
new Flexible(
child: new Text(demo.description, style: demo.textTheme.subhead)
)
],
direction: FlexDirection.vertical,
alignItems: FlexAlignItems.start)
child: new Column([
new Text(demo.name, style: demo.textTheme.title),
new Flexible(
child: new Text(demo.description, style: demo.textTheme.subhead)
)
],
alignItems: FlexAlignItems.start
)
)
)
);
......
......@@ -49,7 +49,7 @@ class DialogMenuItem extends ButtonBase {
child: new InkWell(
child: new Padding(
padding: const EdgeDims.symmetric(horizontal: 16.0),
child: new Flex(children)
child: new Row(children)
)
)
)
......@@ -219,7 +219,7 @@ class FeedFragment extends StatefulComponent {
if (userData.items.length == 0)
return new Material(
type: MaterialType.canvas,
child: new Flex(
child: new Row(
[new Text("No data yet.\nAdd some!", style: style)],
justifyContent: FlexJustifyContent.center
)
......
......@@ -34,7 +34,7 @@ class MealRow extends FitnessItemRow {
)
)
];
return new Flex(
return new Row(
children,
alignItems: FlexAlignItems.baseline,
textBaseline: DefaultTextStyle.of(this).textBaseline
......
......@@ -45,7 +45,7 @@ class MeasurementRow extends FitnessItemRow {
)
)
];
return new Flex(
return new Row(
children,
alignItems: FlexAlignItems.baseline,
textBaseline: DefaultTextStyle.of(this).textBaseline
......
......@@ -104,18 +104,17 @@ class SettingsFragment extends StatefulComponent {
child: new BlockBody([
new DrawerItem(
onPressed: () { _handleBackupChanged(!(userData.backupMode == BackupMode.enabled)); },
child: new Flex([
child: new Row([
new Flexible(child: new Text('Back up data to the cloud')),
new Switch(value: userData.backupMode == BackupMode.enabled, onChanged: _handleBackupChanged),
])
),
new DrawerItem(
onPressed: () => _handleGoalWeightPressed(),
child: new Flex([
child: new Column([
new Text('Goal Weight'),
new Text(goalWeightText, style: Theme.of(this).text.caption),
],
direction: FlexDirection.vertical,
alignItems: FlexAlignItems.start
)
),
......
......@@ -118,33 +118,33 @@ class GameDemoApp extends App {
Widget _buildMainScene(navigator, route) {
return new Stack([
new SpriteWidget(new MainScreenBackground(), SpriteBoxTransformMode.fixedWidth),
new Flex([
new TextureButton(
onPressed: () {
_game = new GameDemoNode(
_imageMap,
_spriteSheet,
_spriteSheetUI,
_sounds,
(lastScore) {
setState(() {_lastScore = lastScore;});
navigator.pop();
}
);
navigator.pushNamed('/game');
},
texture: _spriteSheetUI['btn_play_up.png'],
textureDown: _spriteSheetUI['btn_play_down.png'],
width: 128.0,
height: 128.0
),
new Text(
"Last Score: $_lastScore",
style: new TextStyle(fontSize:20.0)
)
],
direction: FlexDirection.vertical,
justifyContent: FlexJustifyContent.center)
new Column([
new TextureButton(
onPressed: () {
_game = new GameDemoNode(
_imageMap,
_spriteSheet,
_spriteSheetUI,
_sounds,
(lastScore) {
setState(() {_lastScore = lastScore;});
navigator.pop();
}
);
navigator.pushNamed('/game');
},
texture: _spriteSheetUI['btn_play_up.png'],
textureDown: _spriteSheetUI['btn_play_down.png'],
width: 128.0,
height: 128.0
),
new Text(
"Last Score: $_lastScore",
style: new TextStyle(fontSize:20.0)
)
],
justifyContent: FlexJustifyContent.center
)
]);
}
}
......
......@@ -96,7 +96,7 @@ class MineDiggerApp extends App {
Widget buildBoard() {
bool hasCoveredCell = false;
List<Flex> flexRows = <Flex>[];
List<Row> flexRows = <Row>[];
for (int iy = 0; iy != 9; iy++) {
List<Widget> row = <Widget>[];
for (int ix = 0; ix != 9; ix++) {
......@@ -139,9 +139,8 @@ class MineDiggerApp extends App {
}
}
flexRows.add(
new Flex(
new Row(
row,
direction: FlexDirection.horizontal,
justifyContent: FlexJustifyContent.center,
key: new Key.stringify(iy)
)
......@@ -159,10 +158,7 @@ class MineDiggerApp extends App {
padding: new EdgeDims.all(10.0),
margin: new EdgeDims.all(10.0),
decoration: new BoxDecoration(backgroundColor: const Color(0xFF6B6B6B)),
child: new Flex(
flexRows,
direction: FlexDirection.vertical
)
child: new Column(flexRows)
);
}
......
......@@ -7,68 +7,71 @@ import 'dart:sky' as sky;
import 'package:sky/rendering.dart';
void main() {
var root = new RenderBlock(children: [
new RenderPadding(
padding: new EdgeDims.all(10.0),
child: new RenderConstrainedBox(
additionalConstraints: new BoxConstraints.tightFor(height: 100.0),
child: new RenderDecoratedBox(
decoration: new BoxDecoration(
backgroundColor: new sky.Color(0xFFFFFF00)
var root = new RenderFlex(
children: [
new RenderPadding(
padding: new EdgeDims.all(10.0),
child: new RenderConstrainedBox(
additionalConstraints: new BoxConstraints.tightFor(height: 100.0),
child: new RenderDecoratedBox(
decoration: new BoxDecoration(
backgroundColor: new sky.Color(0xFFFFFF00)
)
)
)
)
),
new RenderPadding(
padding: new EdgeDims.all(10.0),
child: new RenderConstrainedBox(
additionalConstraints: new BoxConstraints.tightFor(height: 100.0),
child: new RenderDecoratedBox(
decoration: new BoxDecoration(
border: new Border(
top: new BorderSide(color: new sky.Color(0xFFF00000), width: 5.0),
right: new BorderSide(color: new sky.Color(0xFFFF9000), width: 10.0),
bottom: new BorderSide(color: new sky.Color(0xFFFFF000), width: 15.0),
left: new BorderSide(color: new sky.Color(0xFF00FF00), width: 20.0)
),
backgroundColor: new sky.Color(0xFFDDDDDD)
),
new RenderPadding(
padding: new EdgeDims.all(10.0),
child: new RenderConstrainedBox(
additionalConstraints: new BoxConstraints.tightFor(height: 100.0),
child: new RenderDecoratedBox(
decoration: new BoxDecoration(
border: new Border(
top: new BorderSide(color: new sky.Color(0xFFF00000), width: 5.0),
right: new BorderSide(color: new sky.Color(0xFFFF9000), width: 10.0),
bottom: new BorderSide(color: new sky.Color(0xFFFFF000), width: 15.0),
left: new BorderSide(color: new sky.Color(0xFF00FF00), width: 20.0)
),
backgroundColor: new sky.Color(0xFFDDDDDD)
)
)
)
)
),
new RenderPadding(
padding: new EdgeDims.all(10.0),
child: new RenderConstrainedBox(
additionalConstraints: new BoxConstraints.tightFor(height: 100.0),
child: new RenderDecoratedBox(
decoration: new BoxDecoration(
backgroundColor: new sky.Color(0xFFFFFF00)
),
new RenderPadding(
padding: new EdgeDims.all(10.0),
child: new RenderConstrainedBox(
additionalConstraints: new BoxConstraints.tightFor(height: 100.0),
child: new RenderDecoratedBox(
decoration: new BoxDecoration(
backgroundColor: new sky.Color(0xFFFFFF00)
)
)
)
)
),
new RenderPadding(
padding: new EdgeDims.all(10.0),
child: new RenderConstrainedBox(
additionalConstraints: new BoxConstraints.tightFor(height: 100.0),
child: new RenderDecoratedBox(
decoration: new BoxDecoration(
backgroundColor: new sky.Color(0xFFFFFF00)
),
new RenderPadding(
padding: new EdgeDims.all(10.0),
child: new RenderConstrainedBox(
additionalConstraints: new BoxConstraints.tightFor(height: 100.0),
child: new RenderDecoratedBox(
decoration: new BoxDecoration(
backgroundColor: new sky.Color(0xFFFFFF00)
)
)
)
)
),
new RenderPadding(
padding: new EdgeDims.all(10.0),
child: new RenderConstrainedBox(
additionalConstraints: new BoxConstraints.tightFor(height: 100.0),
child: new RenderDecoratedBox(
decoration: new BoxDecoration(
backgroundColor: new sky.Color(0xFFFFFF00)
),
new RenderPadding(
padding: new EdgeDims.all(10.0),
child: new RenderConstrainedBox(
additionalConstraints: new BoxConstraints.tightFor(height: 100.0),
child: new RenderDecoratedBox(
decoration: new BoxDecoration(
backgroundColor: new sky.Color(0xFFFFFF00)
)
)
)
)
),
]);
),
],
direction: FlexDirection.vertical
);
new SkyBinding(root: root);
}
......@@ -17,7 +17,9 @@ void main() {
Matrix4 transform = new Matrix4.identity();
RenderTransform spin = new RenderTransform(
transform: transform, child: box);
transform: transform,
child: box
);
spin.rotateZ(1.0);
RenderFlex flex = new RenderFlex();
......
......@@ -136,7 +136,7 @@ class StockHome extends StatefulComponent {
new DrawerItem(
icon: 'action/thumb_up',
onPressed: () => _handleStockModeChange(StockMode.optimistic),
child: new Flex([
child: new Row([
new Flexible(child: new Text('Optimistic')),
new Radio(value: StockMode.optimistic, groupValue: stockMode, onChanged: _handleStockModeChange)
])
......@@ -144,7 +144,7 @@ class StockHome extends StatefulComponent {
new DrawerItem(
icon: 'action/thumb_down',
onPressed: () => _handleStockModeChange(StockMode.pessimistic),
child: new Flex([
child: new Row([
new Flexible(child: new Text('Pessimistic')),
new Radio(value: StockMode.pessimistic, groupValue: stockMode, onChanged: _handleStockModeChange)
])
......
......@@ -33,7 +33,7 @@ class StockMenu extends Component {
new PopupMenuItem(child: new Text('Remove stock')),
new PopupMenuItem(
onPressed: () => onAutorefreshChanged(!autorefresh),
child: new Flex([new Flexible(child: new Text('Autorefresh')), checkbox])
child: new Row([new Flexible(child: new Text('Autorefresh')), checkbox])
),
],
level: 4,
......
......@@ -46,13 +46,13 @@ class StockRow extends Component {
bottom: new BorderSide(color: Theme.of(this).dividerColor)
)
),
child: new Flex([
child: new Row([
new Container(
child: new StockArrow(percentChange: stock.percentChange),
margin: const EdgeDims.only(right: 5.0)
),
new Flexible(
child: new Flex(
child: new Row(
children,
alignItems: FlexAlignItems.baseline,
textBaseline: DefaultTextStyle.of(this).textBaseline
......
......@@ -102,7 +102,7 @@ class StockSettings extends StatefulComponent {
new DrawerItem(
icon: 'action/thumb_up',
onPressed: () => _confirmOptimismChange(),
child: new Flex([
child: new Row([
new Flexible(child: new Text('Everything is awesome')),
new Checkbox(value: optimism == StockMode.optimistic, onChanged: (_) => _confirmOptimismChange()),
])
......@@ -110,7 +110,7 @@ class StockSettings extends StatefulComponent {
new DrawerItem(
icon: 'action/backup',
onPressed: () { _handleBackupChanged(!(backup == BackupMode.enabled)); },
child: new Flex([
child: new Row([
new Flexible(child: new Text('Back up stock list to the cloud')),
new Switch(value: backup == BackupMode.enabled, onChanged: _handleBackupChanged),
])
......
......@@ -85,7 +85,7 @@ class CardCollectionApp extends App {
child: new Container(
height: cardModel.height,
decoration: new BoxDecoration(backgroundColor: Theme.of(this).primaryColor),
child: new Flex([
child: new Row([
new Icon(type: 'navigation/arrow_back', size: 36),
new Flexible(child: backgroundText),
new Icon(type: 'navigation/arrow_forward', size: 36)
......
......@@ -6,7 +6,7 @@ import 'package:sky/widgets.dart';
class ContainerApp extends App {
Widget build() {
return new Flex([
return new Column([
new Container(
padding: new EdgeDims.all(10.0),
margin: new EdgeDims.all(10.0),
......@@ -20,7 +20,7 @@ class ContainerApp extends App {
new Container(
decoration: new BoxDecoration(backgroundColor: const Color(0xFFFFFF00)),
padding: new EdgeDims.symmetric(horizontal: 50.0, vertical: 75.0),
child: new Flex([
child: new Row([
new RaisedButton(
child: new Text('PRESS ME'),
onPressed: () => print("Hello World")
......@@ -38,7 +38,6 @@ class ContainerApp extends App {
)
),
],
direction: FlexDirection.vertical,
justifyContent: FlexJustifyContent.spaceBetween
);
}
......
......@@ -105,7 +105,7 @@ class DragAndDropApp extends App {
Widget build() {
List<Widget> layers = <Widget>[
new Flex([
new Row([
new ExampleDragTarget(),
new ExampleDragTarget(),
new ExampleDragTarget(),
......
......@@ -41,9 +41,11 @@ class HorizontalScrollingApp extends App {
return new Center(
child: new Container(
height: 50.0,
child: new Flex([
new Block(circles, scrollDirection: ScrollDirection.horizontal)
], justifyContent: FlexJustifyContent.end)
child: new Row([
new Block(circles, scrollDirection: ScrollDirection.horizontal)
],
justifyContent: FlexJustifyContent.end
)
)
);
}
......
......@@ -57,10 +57,10 @@ class MixedViewportApp extends App {
center: new Text('Block Viewport Demo')),
body: new Material(
type: MaterialType.canvas,
child: new Flex([
child: new Column([
new Container(
padding: new EdgeDims.symmetric(horizontal: 8.0, vertical: 25.0),
child: new Flex([
child: new Row([
new RaisedButton(
enabled: enabledAdd,
child: new Text('ADD'),
......@@ -96,7 +96,6 @@ class MixedViewportApp extends App {
)
),
],
direction: FlexDirection.vertical,
justifyContent: FlexJustifyContent.spaceBetween
)
)
......
......@@ -10,7 +10,7 @@ List<Route> routes = [
builder: (navigator, route) => new Container(
padding: const EdgeDims.all(30.0),
decoration: new BoxDecoration(backgroundColor: const Color(0xFFCCCCCC)),
child: new Flex([
child: new Column([
new Text("You are at home"),
new RaisedButton(
child: new Text('GO SHOPPING'),
......@@ -20,7 +20,6 @@ List<Route> routes = [
child: new Text('START ADVENTURE'),
onPressed: () => navigator.pushNamed('adventure')
)],
direction: FlexDirection.vertical,
justifyContent: FlexJustifyContent.center
)
)
......@@ -30,7 +29,7 @@ List<Route> routes = [
builder: (navigator, route) => new Container(
padding: const EdgeDims.all(20.0),
decoration: new BoxDecoration(backgroundColor: const Color(0xFFBF5FFF)),
child: new Flex([
child: new Column([
new Text("Village Shop"),
new RaisedButton(
child: new Text('RETURN HOME'),
......@@ -40,7 +39,6 @@ List<Route> routes = [
child: new Text('GO TO DUNGEON'),
onPressed: () => navigator.push(routes[2])
)],
direction: FlexDirection.vertical,
justifyContent: FlexJustifyContent.center
)
)
......@@ -50,13 +48,12 @@ List<Route> routes = [
builder: (navigator, route) => new Container(
padding: const EdgeDims.all(20.0),
decoration: new BoxDecoration(backgroundColor: const Color(0xFFDC143C)),
child: new Flex([
child: new Column([
new Text("Monster's Lair"),
new RaisedButton(
child: new Text('RUN!!!'),
onPressed: () => navigator.pop()
)],
direction: FlexDirection.vertical,
justifyContent: FlexJustifyContent.center
)
)
......@@ -77,7 +74,7 @@ class NavigationExampleApp extends App {
}
Widget build() {
return new Flex([new Navigator(_navState)]);
return new Row([new Navigator(_navState)]);
}
}
......
......@@ -88,10 +88,7 @@ class PianoApp extends App {
);
}
return new Flex(
children,
direction: FlexDirection.vertical
);
return new Column(children);
}
}
......
......@@ -64,11 +64,10 @@ class ProgressIndicatorApp extends App {
child: new CircularProgressIndicator(value: valueAnimation.value)
)
];
return new Flex(
return new Column(
indicators
.map((c) => new Container(child: c, margin: const EdgeDims.symmetric(vertical: 20.0)))
.toList(),
direction: FlexDirection.vertical,
justifyContent: FlexJustifyContent.center
);
}
......
......@@ -66,14 +66,14 @@ class SectorApp extends App {
Widget buildBody() {
return new Material(
type: MaterialType.canvas,
child: new Flex([
child: new Column([
new Container(
padding: new EdgeDims.symmetric(horizontal: 8.0, vertical: 25.0),
child: new Flex([
child: new Row([
new RaisedButton(
enabled: enabledAdd,
child: new ShrinkWrapWidth(
child: new Flex([
child: new Row([
new Container(
padding: new EdgeDims.all(4.0),
margin: new EdgeDims.only(right: 10.0),
......@@ -87,7 +87,7 @@ class SectorApp extends App {
new RaisedButton(
enabled: enabledRemove,
child: new ShrinkWrapWidth(
child: new Flex([
child: new Row([
new Container(
padding: new EdgeDims.all(4.0),
margin: new EdgeDims.only(right: 10.0),
......@@ -113,7 +113,6 @@ class SectorApp extends App {
)
),
],
direction: FlexDirection.vertical,
justifyContent: FlexJustifyContent.spaceBetween
)
);
......
......@@ -31,24 +31,26 @@ class Rectangle extends Component {
}
Widget builder() {
return new Flex([
new Rectangle(const Color(0xFF00FFFF)),
new Container(
padding: new EdgeDims.all(10.0),
margin: new EdgeDims.all(10.0),
decoration: new BoxDecoration(backgroundColor: const Color(0xFFCCCCCC)),
child: new RaisedButton(
child: new Flex([
new NetworkImage(src: "https://www.dartlang.org/logos/dart-logo.png"),
new Text('PRESS ME'),
]),
onPressed: () => print("Hello World")
)
),
new Rectangle(const Color(0xFFFFFF00)),
],
direction: FlexDirection.vertical,
justifyContent: FlexJustifyContent.spaceBetween
return new Container(
height: 300.0,
child: new Column([
new Rectangle(const Color(0xFF00FFFF)),
new Container(
padding: new EdgeDims.all(10.0),
margin: new EdgeDims.all(10.0),
decoration: new BoxDecoration(backgroundColor: const Color(0xFFCCCCCC)),
child: new RaisedButton(
child: new Row([
new NetworkImage(src: "https://www.dartlang.org/logos/dart-logo.png"),
new Text('PRESS ME'),
]),
onPressed: () => print("Hello World")
)
),
new Rectangle(const Color(0xFFFFFF00)),
],
justifyContent: FlexJustifyContent.spaceBetween
)
);
}
......@@ -75,11 +77,10 @@ void main() {
// want a renderViewOverride.
WidgetSkyBinding.initWidgetSkyBinding();
RenderFlex flexRoot = new RenderFlex(direction: FlexDirection.vertical);
RenderProxyBox proxy = new RenderProxyBox();
new RenderBoxToWidgetAdapter(proxy, builder); // adds itself to proxy
RenderFlex flexRoot = new RenderFlex(direction: FlexDirection.vertical);
addFlexChildSolidColor(flexRoot, const sky.Color(0xFFFF00FF), flex: 1);
flexRoot.add(proxy);
addFlexChildSolidColor(flexRoot, const sky.Color(0xFF0000FF), flex: 1);
......
......@@ -85,8 +85,7 @@ HAL: This mission is too important for me to allow you to jeopardize it.''';
Container body = new Container(
padding: new EdgeDims.symmetric(horizontal: 8.0),
child: new Flex(children,
direction: FlexDirection.vertical,
child: new Column(children,
justifyContent: FlexJustifyContent.center,
alignItems: FlexAlignItems.start
)
......
......@@ -105,6 +105,6 @@ class EditableText extends StatefulComponent {
child: new CustomPaint(callback: _paintCursor, token: _showCursor)
);
return new Flex([text, cursor]);
return new Row([text, cursor]);
}
}
......@@ -387,7 +387,7 @@ class RenderFlex extends RenderBox with ContainerRenderObjectMixin<RenderBox, Fl
crossSize = math.max(crossSize, _getCrossSize(child));
}
if (alignItems == FlexAlignItems.baseline) {
assert(textBaseline != null);
assert(textBaseline != null && 'To use FlexAlignItems.baseline, you must also specify which baseline to use using the "baseline" argument.' is String);
double distance = child.getDistanceToBaseline(textBaseline, onlyReal: true);
if (distance != null)
maxBaselineDistance = math.max(maxBaselineDistance, distance);
......
......@@ -28,7 +28,7 @@ export 'package:sky/base/hit_test.dart' show EventDisposition, combineEventDispo
export 'package:sky/painting/text_style.dart';
export 'package:sky/rendering/block.dart' show BlockDirection;
export 'package:sky/rendering/box.dart' show BoxConstraints;
export 'package:sky/rendering/flex.dart' show FlexDirection, FlexJustifyContent, FlexAlignItems;
export 'package:sky/rendering/flex.dart' show FlexJustifyContent, FlexAlignItems, FlexDirection;
export 'package:sky/rendering/object.dart' show Point, Offset, Size, Rect, Color, Paint, Path;
export 'package:sky/rendering/proxy_box.dart' show BackgroundImage, BoxDecoration, BoxDecorationPosition, BoxShadow, Border, BorderSide, EdgeDims, Shape;
export 'package:sky/rendering/toggleable.dart' show ValueChanged;
......@@ -494,7 +494,7 @@ class Row extends Flex {
justifyContent: FlexJustifyContent.start,
alignItems: FlexAlignItems.center,
textBaseline
}) : super(children, key: key, direction: FlexDirection.horizontal, justifyContent: justifyContent, alignItems: alignItems);
}) : super(children, key: key, direction: FlexDirection.horizontal, justifyContent: justifyContent, alignItems: alignItems, textBaseline: textBaseline);
}
class Column extends Flex {
......@@ -503,7 +503,7 @@ class Column extends Flex {
justifyContent: FlexJustifyContent.start,
alignItems: FlexAlignItems.center,
textBaseline
}) : super(children, key: key, direction: FlexDirection.vertical, justifyContent: justifyContent, alignItems: alignItems);
}) : super(children, key: key, direction: FlexDirection.vertical, justifyContent: justifyContent, alignItems: alignItems, textBaseline: textBaseline);
}
class Flexible extends ParentDataNode {
......
......@@ -16,7 +16,6 @@ import 'package:sky/rendering/view.dart';
export 'package:sky/base/hit_test.dart' show EventDisposition, combineEventDispositions;
export 'package:sky/rendering/box.dart' show BoxConstraints, BoxDecoration, Border, BorderSide, EdgeDims;
export 'package:sky/rendering/flex.dart' show FlexDirection;
export 'package:sky/rendering/object.dart' show Point, Offset, Size, Rect, Color, Paint, Path;
final bool _shouldLogRenderDuration = false; // see also 'enableProfilingLoop' argument to runApp()
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment