Stack Widget in Flitter

The Stack widget in Flitter allows you to overlay multiple child widgets on top of each other. This is particularly useful for creating complex layouts where elements need to be positioned relative to each other, such as placing text over an image or creating layered UIs.

Overview

Stack positions its children relative to the edges of its box. The stack itself becomes as large as possible to fit its children, unless constrained by its parent.

Key Properties

  • children: A list of child widgets to be stacked.
  • alignment: Determines how to align the non-positioned or partially-positioned children in the stack.
  • fit: Determines how the non-positioned children should be sized.
  • clipBehavior: Determines whether to clip children that extend outside the stack’s bounds.

Basic Usage

Here’s a simple example of how to use a Stack:

import { Stack, Container, Positioned, Text } from "@meursyphus/flitter";

const myStack = Stack({
  children: [
    Container({ width: 300, height: 300, color: "lightblue" }),
    Positioned({
      top: 10,
      left: 10,
      child: Text("Top Left"),
    }),
    Positioned({
      bottom: 10,
      right: 10,
      child: Text("Bottom Right"),
    }),
  ],
});

This creates a light blue container with text positioned in the top-left and bottom-right corners.

Visual Representation

┌────────────────────────────────┐
│ Top Left                       │
│                                │
│                                │
│                                │
│                                │
│                                │
│                                │
│                       Bottom Right
└────────────────────────────────┘

Advanced Usage

Combining with Positioned Widget

The Positioned widget is often used with Stack to precisely position children:

import { Stack, Container, Positioned } from "@meursyphus/flitter";

const advancedStack = Stack({
  children: [
    Container({ width: 300, height: 300, color: "lightgrey" }),
    Positioned({
      left: 20,
      top: 20,
      child: Container({ width: 100, height: 100, color: "red" }),
    }),
    Positioned({
      right: 40,
      bottom: 40,
      child: Container({ width: 150, height: 150, color: "blue" }),
    }),
  ],
});

Visual representation:

┌────────────────────────────────┐
│ ┌────────┐                     │
│ │        │                     │
│ │  Red   │                     │
│ │        │                     │
│ └────────┘                     │
│                                │
│                   ┌───────────┐│
│                   │           ││
│                   │   Blue    ││
│                   │           ││
│                   └───────────┘│
└────────────────────────────────┘

Using Alignment

You can use the alignment property to position non-positioned children:

import { Stack, Container, Alignment } from "@meursyphus/flitter";

const alignedStack = Stack({
  alignment: Alignment.center,
  children: [
    Container({ width: 300, height: 300, color: "lightgrey" }),
    Container({ width: 150, height: 150, color: "red" }),
  ],
});

This will center the red container within the light grey container.

Best Practices

  1. Use Positioned wisely: While Positioned gives you precise control, overusing it can lead to layouts that don’t adapt well to different screen sizes.

  2. Consider responsiveness: Remember that Stacks can behave differently on different screen sizes. Test your layout on various devices.

  3. Mind the order: Children are painted in the order they appear in the children list. The last child will be on top.

  4. Combine with other widgets: Stack works well with other layout widgets. For example, you can use a Stack inside a Container to add padding or constraints.

Conclusion

The Stack widget is a powerful tool for creating complex, overlapping layouts in Flitter. By understanding how to use Stack effectively, along with its companion Positioned widget, you can create rich, layered user interfaces. Remember to use it judiciously and always consider how your layout will adapt to different screen sizes and orientations.

Flex, Row, and Column Text