From 72025f0ee5fb888a330c101a75286899a6bdec9d Mon Sep 17 00:00:00 2001 From: Amit Patil <54329870+Amitpatil215@users.noreply.github.com> Date: Sun, 1 Nov 2020 20:13:02 +0530 Subject: [PATCH] AdoptAWidget: aspectRatio (#69509) --- packages/flutter/lib/src/widgets/basic.dart | 71 +++++++++++++++++++++ 1 file changed, 71 insertions(+) diff --git a/packages/flutter/lib/src/widgets/basic.dart b/packages/flutter/lib/src/widgets/basic.dart index aeac3e24af..ddbe279438 100644 --- a/packages/flutter/lib/src/widgets/basic.dart +++ b/packages/flutter/lib/src/widgets/basic.dart @@ -2807,11 +2807,60 @@ class _OffstageElement extends SingleChildRenderObjectElement { /// 16.0/9.0. If the maximum width is infinite, the initial width is determined /// 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 /// 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 /// 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 /// 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 @@ -2824,6 +2873,28 @@ class _OffstageElement extends SingleChildRenderObjectElement { /// will eventually select a size for the child that meets the layout /// 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: /// /// * [Align], a widget that aligns its child within itself and optionally