Unverified Commit 72025f0e authored by Amit Patil's avatar Amit Patil Committed by GitHub

AdoptAWidget: aspectRatio (#69509)

parent 5511abd9
...@@ -2807,11 +2807,60 @@ class _OffstageElement extends SingleChildRenderObjectElement { ...@@ -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 { ...@@ -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
......
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