Skip to content

F
Front-End
Commit 79364f0a authored by Adam Barth's avatar Adam Barth Committed by GitHub
Browse files
Options

Add Container.align and Container.position (#5128) 

These let you add Align widget to the inside or outside of a container.
Several customers have asked for these properties.

Fixes #4950
parent 534097ff
Hide whitespace changes
Inline Side-by-side
Showing with 99 additions and 113 deletions
dev/manual_tests/card_collection.dart
View file @ 79364f0a
......@@ -284,10 +284,8 @@ class CardCollectionState extends State<CardCollection> {
flexibleSpace: new Container(
padding: const EdgeInsets.only(left: 72.0),
height: 128.0,
child: new Align(
alignment: const FractionalOffset(0.0, 0.75),
child: new Text('Swipe Away: ${_cardModels.length}', style: Theme.of(context).primaryTextTheme.title)
)
align: const FractionalOffset(0.0, 0.75),
child: new Text('Swipe Away: ${_cardModels.length}', style: Theme.of(context).primaryTextTheme.title)
)
);
}
......
examples/flutter_gallery/lib/demo/full_screen_dialog_demo.dart
View file @ 79364f0a
......@@ -166,20 +166,16 @@ class FullScreenDialogDemoState extends State<FullScreenDialogDemo> {
decoration: new BoxDecoration(
border: new Border(bottom: new BorderSide(color: theme.dividerColor))
),
child: new Align(
alignment: FractionalOffset.bottomLeft,
child: new Text('Event name', style: theme.textTheme.display2)
)
align: FractionalOffset.bottomLeft,
child: new Text('Event name', style: theme.textTheme.display2)
),
new Container(
padding: const EdgeInsets.symmetric(vertical: 8.0),
decoration: new BoxDecoration(
border: new Border(bottom: new BorderSide(color: theme.dividerColor))
),
child: new Align(
alignment: FractionalOffset.bottomLeft,
child: new Text('Location', style: theme.textTheme.title.copyWith(color: Colors.black54))
)
align: FractionalOffset.bottomLeft,
child: new Text('Location', style: theme.textTheme.title.copyWith(color: Colors.black54))
),
new Column(
crossAxisAlignment: CrossAxisAlignment.start,
......
examples/flutter_gallery/lib/demo/pesto_demo.dart
View file @ 79364f0a
......@@ -331,7 +331,7 @@ class _RecipePageState extends State<_RecipePage> {
const double fabHalfSize = 28.0; // TODO(mpcomplete): needs to adapt to screen size
return new Hero(
tag: config.recipe.imagePath,
child: new DecoratedBox(
child: new Container(
decoration: new BoxDecoration(
backgroundColor: Theme.of(context).canvasColor,
backgroundImage: new BackgroundImage(
......@@ -340,33 +340,31 @@ class _RecipePageState extends State<_RecipePage> {
fit: fullWidth ? ImageFit.fitWidth : ImageFit.cover
)
),
child: new Align(
alignment: FractionalOffset.bottomCenter,
child: new Block(
children: <Widget>[
new Padding(
padding: new EdgeInsets.only(top: _getAppBarHeight(context)),
child: new Stack(
children: <Widget>[
new Padding(
padding: new EdgeInsets.only(top: fabHalfSize),
child: new SizedBox(
width: fullWidth ? null : _kRecipePageMaxWidth,
child: new _RecipeSheet(recipe: config.recipe)
)
),
new Positioned(
right: 16.0,
child: new FloatingActionButton(
child: new Icon(isFavorite ? Icons.favorite : Icons.favorite_border),
onPressed: _toggleFavorite
)
align: FractionalOffset.bottomCenter,
child: new Block(
children: <Widget>[
new Padding(
padding: new EdgeInsets.only(top: _getAppBarHeight(context)),
child: new Stack(
children: <Widget>[
new Padding(
padding: new EdgeInsets.only(top: fabHalfSize),
child: new SizedBox(
width: fullWidth ? null : _kRecipePageMaxWidth,
child: new _RecipeSheet(recipe: config.recipe)
)
]
)
),
new Positioned(
right: 16.0,
child: new FloatingActionButton(
child: new Icon(isFavorite ? Icons.favorite : Icons.favorite_border),
onPressed: _toggleFavorite
)
)
]
)
]
)
)
]
)
)
);
......
examples/flutter_gallery/lib/gallery/home.dart
View file @ 79364f0a
......@@ -71,10 +71,8 @@ class GalleryHomeState extends State<GalleryHome> {
new Container(
height: 48.0,
padding: const EdgeInsets.only(left: 16.0),
child: new Align(
alignment: FractionalOffset.centerLeft,
child: new Text(galleryItem.category, style: headerStyle)
)
align: FractionalOffset.centerLeft,
child: new Text(galleryItem.category, style: headerStyle)
)
);
category = galleryItem.category;
......
packages/flutter/lib/src/material/data_table.dart
View file @ 79364f0a
......@@ -406,21 +406,19 @@ class DataTable extends StatelessWidget {
label = new Container(
padding: padding,
height: _kHeadingRowHeight,
child: new Align(
alignment: new FractionalOffset(numeric ? 1.0 : 0.0, 0.5), // TODO(ianh): RTL for non-numeric
child: new AnimatedDefaultTextStyle(
style: new TextStyle(
// TODO(ianh): font family should be Roboto; see https://github.com/flutter/flutter/issues/3116
fontWeight: FontWeight.w500,
fontSize: _kHeadingFontSize,
height: _kHeadingRowHeight / _kHeadingFontSize,
color: (Theme.of(context).brightness == Brightness.light)
? ((onSort != null && sorted) ? Colors.black87 : Colors.black54)
: ((onSort != null && sorted) ? Colors.white : Colors.white70)
),
duration: _kSortArrowAnimationDuration,
child: label
)
align: new FractionalOffset(numeric ? 1.0 : 0.0, 0.5), // TODO(ianh): RTL for non-numeric
child: new AnimatedDefaultTextStyle(
style: new TextStyle(
// TODO(ianh): font family should be Roboto; see https://github.com/flutter/flutter/issues/3116
fontWeight: FontWeight.w500,
fontSize: _kHeadingFontSize,
height: _kHeadingRowHeight / _kHeadingFontSize,
color: (Theme.of(context).brightness == Brightness.light)
? ((onSort != null && sorted) ? Colors.black87 : Colors.black54)
: ((onSort != null && sorted) ? Colors.white : Colors.white70)
),
duration: _kSortArrowAnimationDuration,
child: label
)
);
if (tooltip != null) {
......@@ -458,23 +456,21 @@ class DataTable extends StatelessWidget {
label = new Container(
padding: padding,
height: _kDataRowHeight,
child: new Align(
alignment: new FractionalOffset(numeric ? 1.0 : 0.0, 0.5), // TODO(ianh): RTL for non-numeric
child: new DefaultTextStyle(
style: new TextStyle(
// TODO(ianh): font family should be Roboto; see https://github.com/flutter/flutter/issues/3116
fontSize: 13.0,
color: isLightTheme
? (placeholder ? Colors.black38 : Colors.black87)
: (placeholder ? Colors.white30 : Colors.white70)
align: new FractionalOffset(numeric ? 1.0 : 0.0, 0.5), // TODO(ianh): RTL for non-numeric
child: new DefaultTextStyle(
style: new TextStyle(
// TODO(ianh): font family should be Roboto; see https://github.com/flutter/flutter/issues/3116
fontSize: 13.0,
color: isLightTheme
? (placeholder ? Colors.black38 : Colors.black87)
: (placeholder ? Colors.white30 : Colors.white70)
),
child: new IconTheme.merge(
context: context,
data: new IconThemeData(
color: isLightTheme ? Colors.black54 : Colors.white70
),
child: new IconTheme.merge(
context: context,
data: new IconThemeData(
color: isLightTheme ? Colors.black54 : Colors.white70
),
child: new DropDownButtonHideUnderline(child: label)
)
child: new DropDownButtonHideUnderline(child: label)
)
)
);
......
packages/flutter/lib/src/material/drop_down.dart
View file @ 79364f0a
......@@ -337,10 +337,8 @@ class DropDownMenuItem<T> extends StatelessWidget {
Widget build(BuildContext context) {
return new Container(
height: _kMenuItemHeight,
child: new Align(
alignment: FractionalOffset.centerLeft,
child: child
)
align: FractionalOffset.centerLeft,
child: child
);
}
}
......
packages/flutter/lib/src/material/flexible_space_bar.dart
View file @ 79364f0a
......@@ -146,20 +146,18 @@ class _FlexibleSpaceBarState extends State<FlexibleSpaceBar> {
);
final bool effectiveCenterTitle = _getEffectiveCenterTitle(theme);
final FractionalOffset titleAlignment = effectiveCenterTitle ? FractionalOffset.bottomCenter : FractionalOffset.bottomLeft;
children.add(new Padding(
children.add(new Container(
padding: new EdgeInsets.only(left: effectiveCenterTitle ? 0.0 : 72.0, bottom: 14.0),
child: new Align(
alignment: new Tween<FractionalOffset>(
begin: new FractionalOffset(0.0, yAlignStart),
end: new FractionalOffset(0.0, yAlignEnd)
).evaluate(scaleAndAlignCurve),
child: new ScaleTransition(
align: new Tween<FractionalOffset>(
begin: new FractionalOffset(0.0, yAlignStart),
end: new FractionalOffset(0.0, yAlignEnd)
).evaluate(scaleAndAlignCurve),
child: new ScaleTransition(
alignment: titleAlignment,
scale: new Tween<double>(begin: 1.5, end: 1.0).animate(scaleAndAlignCurve),
child: new Align(
alignment: titleAlignment,
scale: new Tween<double>(begin: 1.5, end: 1.0).animate(scaleAndAlignCurve),
child: new Align(
alignment: titleAlignment,
child: new DefaultTextStyle(style: titleStyle, child: config.title)
)
child: new DefaultTextStyle(style: titleStyle, child: config.title)
)
)
));
......
packages/flutter/lib/src/material/list_item.dart
View file @ 79364f0a
......@@ -154,10 +154,8 @@ class ListItem extends StatelessWidget {
children.add(new Container(
margin: const EdgeInsets.only(right: 16.0),
width: 40.0,
child: new Align(
alignment: FractionalOffset.centerLeft,
child: leading
)
align: FractionalOffset.centerLeft,
child: leading
));
}
......@@ -188,10 +186,8 @@ class ListItem extends StatelessWidget {
if (trailing != null) {
children.add(new Container(
margin: const EdgeInsets.only(left: 16.0),
child: new Align(
alignment: FractionalOffset.centerRight,
child: trailing
)
align: FractionalOffset.centerRight,
child: trailing
));
}
......
packages/flutter/lib/src/material/refresh_indicator.dart
View file @ 79364f0a
......@@ -370,22 +370,20 @@ class RefreshIndicatorState extends State<RefreshIndicator> {
padding: _isIndicatorAtTop
? new EdgeInsets.only(top: config.displacement)
: new EdgeInsets.only(bottom: config.displacement),
child: new Align(
alignment: _isIndicatorAtTop
? FractionalOffset.bottomCenter
: FractionalOffset.topCenter,
child: new ScaleTransition(
scale: _scaleFactor,
child: new AnimatedBuilder(
animation: _sizeController,
builder: (BuildContext context, Widget child) {
return new RefreshProgressIndicator(
value: showIndeterminateIndicator ? null : _value.value,
valueColor: _valueColor,
backgroundColor: config.backgroundColor
);
}
)
align: _isIndicatorAtTop
? FractionalOffset.bottomCenter
: FractionalOffset.topCenter,
child: new ScaleTransition(
scale: _scaleFactor,
child: new AnimatedBuilder(
animation: _sizeController,
builder: (BuildContext context, Widget child) {
return new RefreshProgressIndicator(
value: showIndeterminateIndicator ? null : _value.value,
valueColor: _valueColor,
backgroundColor: config.backgroundColor
);
}
)
)
)
......
packages/flutter/lib/src/widgets/container.dart
View file @ 79364f0a
......@@ -74,6 +74,7 @@ class Container extends StatelessWidget {
/// Creates a widget that combines common painting, positioning, and sizing widgets.
Container({
Key key,
this.align,
this.padding,
this.decoration,
this.foregroundDecoration,
......@@ -99,6 +100,12 @@ class Container extends StatelessWidget {
/// If null, the container will expand to fill all available space in its parent.
final Widget child;
/// Align the child within the container.
///
/// If non-null, the container will expand to fill its parent and position its
/// child within itself according to the given value.
final FractionalOffset align;
/// Empty space to inscribe inside the decoration.
final EdgeInsets padding;
......@@ -133,6 +140,9 @@ class Container extends StatelessWidget {
if (child == null && (constraints == null || !constraints.isTight))
current = new ConstrainedBox(constraints: const BoxConstraints.expand());
if (align != null)
current = new Align(alignment: align, child: current);
EdgeInsets effectivePadding = _paddingIncludingDecoration;
if (effectivePadding != null)
current = new Padding(padding: effectivePadding, child: current);
......
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

HIAST - GitLab