diff --git a/docs/resources/ui/widgets/basic-widgets/container.md b/docs/resources/ui/widgets/basic-widgets/container.md index bb0a87739..191db5593 100644 --- a/docs/resources/ui/widgets/basic-widgets/container.md +++ b/docs/resources/ui/widgets/basic-widgets/container.md @@ -2,11 +2,12 @@ slug: /resources/ui/widgets/container title: Container tags: [Layout Elements] +description: Learn how to use the Container widget to structure, style, and animate layouts in FlutterFlow. --- # Container -A Container is a highly versatile widget that functions much like a multi-purpose box in your app's +The Container widget is a highly versatile widget that functions much like a multi-purpose box in your app's interface. It is primarily used to decorate, position, and arrange child widgets—smaller components within your app. Containers are useful for dividing the screen into smaller, logical parts, and styling or positioning these parts effectively. @@ -17,16 +18,16 @@ appearance and placement of that box within the screen layout. ## Container Properties -The Container properties can be adjusted to customize the appearance and layout of a Container +Container properties can be adjusted to customize the appearance and layout of a Container widget. Here's a brief explanation of each: ![container-props.png](../built-in-widgets/imgs/container-props.png) ### Limiting Size -Sometimes, you don't set the height and width of the container explicitly and allow it to be the size of its child widget. If you do so, you may find layout issues where widgets may become too large or too small on different devices, leading to a poor user experience. To overcome this, you can limit the size of the container by specifying the Min W, Min H, Max W, and Max H. +Sometimes, you may not set the height and width of the Container explicitly. In that case, the Container sizes itself based on its child widget. This can lead to layout issues where widgets become too large or too small on different devices. To avoid this, you can limit the size of the Container by specifying the Min W, Min H, Max W, and Max H. -For example, in a responsive design, you might want a button to grow with the screen size but not exceed a certain width. By setting these properties, you can ensure the button is at least a certain size for usability but doesn't become too large on bigger screens. +For example, in a responsive design, you might want a button to grow with the screen size but not exceed a certain width. By setting these properties, you can ensure the button is at least a certain size for usability but does not become too large on bigger screens. - **Min W (Minimum Width) & Min H (Minimum Height):** These set the minimum dimensions the Container can shrink to, in pixels or percentage. @@ -34,48 +35,105 @@ For example, in a responsive design, you might want a button to grow with the sc - **Max W (Maximum Width) & Max H (Maximum Height):** These set the maximum dimensions the Container can expand to, in pixels or percentage. -
- - +
+ +
+

### Clip Content -Determines whether the content inside the Container should be clipped if it - exceeds the boundaries of the Container. When enabled, anything outside the Container's bounds - will not be visible. - -
+This property determines whether the content inside the Container should be clipped if it exceeds the boundaries of the Container. When enabled, anything outside the Container's bounds will not be visible. +
+ +
+

## Box Shadow Properties -The Box Shadow properties allow you to add and customize a shadow effect for your -Container widget. -Here's a brief explanation of each property: +The Box Shadow properties allow you to add and customize a shadow effect for your Container widget. Here's a brief explanation of each property: - **Shadow Color:** The color of the shadow, typically specified in a hex format including an alpha - value for transparency, like `#33000000.` You can select from Theme Colors, use a color picker, or + value for transparency, like `#33000000`. You can select from Theme Colors, use a color picker, or input a hex code. -- **Blur:** Determines the blur radius of the shadow. A higher value produces a more diffused - shadow, - while a lower value makes the shadow sharper and more defined. +- **Blur:** Determines the blur radius of the shadow. A higher value produces a more diffused shadow, while a lower value makes the shadow sharper and more defined. -- **Spread:** Controls the **spread radius of the shadow**. **Increasing** this value will **expand** the area - that the shadow covers, making it appear larger. +- **Spread:** Controls the spread radius of the shadow. Increasing this value expands the area that the shadow covers, making it appear larger. - **Offset X & Offset Y:** These properties set the horizontal (X) and vertical (Y) displacement of the shadow relative to the widget. **Offset X** shifts the shadow horizontally, and **Offset Y** moves it vertically. Positive values move the shadow right and down, respectively, while negative values move it left and up. -Here's a quick demo to show the box shadow property in Container: - -
- +Here's a quick demo to show the Box Shadow properties on a Container: +
+ +
+

## Gradient Properties @@ -83,50 +141,49 @@ The Gradient properties allow you to create and customize a gradient effect for Here's an overview of each property: - **Angle (Degrees):** Sets the orientation of the gradient by specifying the angle in degrees. An - angle of **0 degrees** creates a **horizontal** gradient, and **90 degrees** would make it **vertical**. + angle of **0 degrees** creates a **horizontal** gradient, and **90 degrees** makes it **vertical**. -- **Colors**: These are the colors used in the gradient. You can set these colors +- **Colors:** These are the colors used in the gradient. You can set these colors using Theme Colors, a color picker, or hex codes. Two color values are added by default. -- **Add Color:** This option allows you to add additional colors to the gradient, further +- **Add Color:** Use this option to add additional colors to the gradient, further customizing the effect by adjusting their transition points and choosing from Theme Colors, a color picker, or hex codes. - **Transition Point:** These values determine where each color starts transitioning within the - gradient. Transition points are set as a fraction of the total gradient distance: + gradient. Transition points are values between 0 and 1, set as a fraction of the total gradient distance: ![gradient-cont.png](../built-in-widgets/imgs/gradient-cont.png) -In the above example, +In the example above: -- The Transition Point for Color 1 is set at 0, meaning it starts at the very beginning of the +- The transition point for Color 1 is set at 0, meaning it starts at the very beginning of the gradient. -- The Transition Point for Color 2 is 0.5, indicating that this color starts transitioning at the +- The transition point for Color 2 is 0.5, indicating that this color starts transitioning at the halfway point. -- The Transition Point for Color 3 is 1, which places the start of this color's transition at the -end of the gradient. +- The transition point for Color 3 is 1, which places the start of this color's transition at the + end of the gradient. ## Background Image Properties -The Background Image properties provide options for setting up an image as the background of a +The Background Image properties provide options for setting an image as the background of a Container widget. :::info - For a detailed guide on configuring **common Image properties**, please refer -to the relevant section [**here**](image.md#common-image-properties). +For a detailed guide on configuring common image properties, see [**Common Image Properties**](image.md#common-image-properties). ::: ## Child Properties - **Child Alignment:** This allows you to specify the alignment of child widgets within the - Container. The grid indicates possible positions (center, top, bottom, left, right, and etc), and + Container. The grid indicates possible positions (center, top, bottom, left, right, and so on), and you can adjust the alignment precisely using the X and Y values, which shift the child widget horizontally and vertically within the Container. -## Implicit Animated +## Implicit Animation This property enables the use of implicit animations for changes in the Container’s properties (like size or color). This makes transitions between property changes smoother and visually appealing. -Here's an example of Container's width and color changing without the use of Implicit Animation. +Here's an example of a Container's width and color changing without Implicit Animation.

-::: \ No newline at end of file +::: diff --git a/docs/resources/ui/widgets/basic-widgets/imgs/container-safe-area.avif b/docs/resources/ui/widgets/basic-widgets/imgs/container-safe-area.avif new file mode 100644 index 000000000..3ac14f287 Binary files /dev/null and b/docs/resources/ui/widgets/basic-widgets/imgs/container-safe-area.avif differ