AdoptAWidget: aspectRatio (#69509)
This commit is contained in:
parent
5511abd90f
commit
72025f0ee5
@ -2807,11 +2807,60 @@ class _OffstageElement extends SingleChildRenderObjectElement {
|
|||||||
/// 16.0/9.0. If the maximum width is infinite, the initial width is determined
|
/// 16.0/9.0. If the maximum width is infinite, the initial width is determined
|
||||||
/// by applying the aspect ratio to the maximum height.
|
/// by applying the aspect ratio to the maximum height.
|
||||||
///
|
///
|
||||||
|
/// {@tool dartpad --template=stateless_widget_scaffold}
|
||||||
|
///
|
||||||
|
/// This examples shows how AspectRatio sets width when its parent's width
|
||||||
|
/// constraint is infinite. Since its parent's allowed height is a fixed value,
|
||||||
|
/// the actual width is determined via the given AspectRatio.
|
||||||
|
///
|
||||||
|
/// Since the height is fixed at 100.0 in this example and the aspect ratio is
|
||||||
|
/// set to 16 / 9, the width should then be 100.0 / 9 * 16.
|
||||||
|
///
|
||||||
|
/// ```dart
|
||||||
|
/// Widget build(BuildContext context) {
|
||||||
|
/// return Container(
|
||||||
|
/// color: Colors.blue,
|
||||||
|
/// alignment: Alignment.center,
|
||||||
|
/// width: double.infinity,
|
||||||
|
/// height: 100.0,
|
||||||
|
/// child: AspectRatio(
|
||||||
|
/// aspectRatio: 16 / 9,
|
||||||
|
/// child: Container(
|
||||||
|
/// color: Colors.green,
|
||||||
|
/// ),
|
||||||
|
/// ),
|
||||||
|
/// );
|
||||||
|
/// }
|
||||||
|
/// ```
|
||||||
|
/// {@end-tool}
|
||||||
|
///
|
||||||
/// Now consider a second example, this time with an aspect ratio of 2.0 and
|
/// Now consider a second example, this time with an aspect ratio of 2.0 and
|
||||||
/// layout constraints that require the width to be between 0.0 and 100.0 and
|
/// layout constraints that require the width to be between 0.0 and 100.0 and
|
||||||
/// the height to be between 0.0 and 100.0. We'll select a width of 100.0 (the
|
/// the height to be between 0.0 and 100.0. We'll select a width of 100.0 (the
|
||||||
/// biggest allowed) and a height of 50.0 (to match the aspect ratio).
|
/// biggest allowed) and a height of 50.0 (to match the aspect ratio).
|
||||||
///
|
///
|
||||||
|
/// {@tool dartpad --template=stateless_widget_scaffold}
|
||||||
|
///
|
||||||
|
/// ```dart
|
||||||
|
/// Widget build(BuildContext context) {
|
||||||
|
/// return Container(
|
||||||
|
/// color: Colors.blue,
|
||||||
|
/// alignment: Alignment.center,
|
||||||
|
/// width: 100.0,
|
||||||
|
/// height: 100.0,
|
||||||
|
/// child: AspectRatio(
|
||||||
|
/// aspectRatio: 2.0,
|
||||||
|
/// child: Container(
|
||||||
|
/// width: 100.0,
|
||||||
|
/// height: 50.0,
|
||||||
|
/// color: Colors.green,
|
||||||
|
/// ),
|
||||||
|
/// ),
|
||||||
|
/// );
|
||||||
|
/// }
|
||||||
|
/// ```
|
||||||
|
/// {@end-tool}
|
||||||
|
///
|
||||||
/// In that same situation, if the aspect ratio is 0.5, we'll also select a
|
/// In that same situation, if the aspect ratio is 0.5, we'll also select a
|
||||||
/// width of 100.0 (still the biggest allowed) and we'll attempt to use a height
|
/// width of 100.0 (still the biggest allowed) and we'll attempt to use a height
|
||||||
/// of 200.0. Unfortunately, that violates the constraints because the child can
|
/// of 200.0. Unfortunately, that violates the constraints because the child can
|
||||||
@ -2824,6 +2873,28 @@ class _OffstageElement extends SingleChildRenderObjectElement {
|
|||||||
/// will eventually select a size for the child that meets the layout
|
/// will eventually select a size for the child that meets the layout
|
||||||
/// constraints but fails to meet the aspect ratio constraints.
|
/// constraints but fails to meet the aspect ratio constraints.
|
||||||
///
|
///
|
||||||
|
/// {@tool dartpad --template=stateless_widget_scaffold}
|
||||||
|
///
|
||||||
|
/// ```dart
|
||||||
|
/// Widget build(BuildContext context) {
|
||||||
|
/// return Container(
|
||||||
|
/// color: Colors.blue,
|
||||||
|
/// alignment: Alignment.center,
|
||||||
|
/// width: 100.0,
|
||||||
|
/// height: 100.0,
|
||||||
|
/// child: AspectRatio(
|
||||||
|
/// aspectRatio: 0.5,
|
||||||
|
/// child: Container(
|
||||||
|
/// width: 100.0,
|
||||||
|
/// height: 50.0,
|
||||||
|
/// color: Colors.green,
|
||||||
|
/// ),
|
||||||
|
/// ),
|
||||||
|
/// );
|
||||||
|
/// }
|
||||||
|
/// ```
|
||||||
|
/// {@end-tool}
|
||||||
|
///
|
||||||
/// See also:
|
/// See also:
|
||||||
///
|
///
|
||||||
/// * [Align], a widget that aligns its child within itself and optionally
|
/// * [Align], a widget that aligns its child within itself and optionally
|
||||||
|
Loading…
x
Reference in New Issue
Block a user