Stack in Flutter

Create Free Backend With Appwrite

Stack In Flutter

Imagine you’re making a sandwich. You put one ingredient on top of another, right? In Flutter, the Stack works similarly. It lets you put one thing (like a button or an image) on top of another. It’s super useful when you want things to overlap in your app’s design.

When to Use Stack

  • Buttons Over Pictures: Like a play button on a video thumbnail.
  • Text on Images: Like captions on photos.
  • Cool Designs: For when you want to mix things up from the usual top-down look.
Info

Note: The first one is at the bottom, and each new one goes on top. In a Stack, your first widget is at the bottom, and others are layered over it.

Example 1: Basic Stack Implementation

Here’s how you can create a basic Stack with overlaid elements:

Stack(
  alignment: Alignment.center,
  children: [
    Container(
      width: 100,
      height: 100,
      color: Colors.blue,
    ),
    const Text('I’m on top!'),
  ],
)
Run Online

Example 2: Profile Picture with Online Status Indicator

In this example, you will learn to create a circular profile picture with a small green dot at the bottom to indicate the user is online.

Stack(
  alignment: Alignment.bottomRight,
  children: [
    const CircleAvatar(
      radius: 40,
      backgroundImage: NetworkImage(
        'https://avatars.githubusercontent.com/u/33576285?v=4'
      ),
    ),
    DecoratedBox(
      decoration: BoxDecoration(
        color: Colors.green,
        shape: BoxShape.circle,
        border: Border.all(color: Colors.white, width: 3),
      ),
      child: const SizedBox(width: 20, height: 20),
    ),
  ],
)
Run Online

Positioned Widget

The Positioned widget is a special type of widget used inside a Stack widget to control the position of a child widget. It has the following useful properties:

Property Description
top Distance from the top edge of the stack.
bottom Distance from the bottom edge of the stack.
left Distance from the left edge of the stack.
right Distance from the right edge of the stack.

You can see the demo of the Positioned widget in example 3 and 4.

Example 3: Product Image with Discount Badge

In this example, you will learn to create a product image with a discount badge at the top right corner.

Stack(
  children: [
    Image.network('https://images.pexels.com/photos/19060954/pexels-photo-19060954/free-photo-of-iphone-15-pro-max.jpeg'),
    Positioned(
      top: 10,
      right: 10,
      child: Container(
        padding: const EdgeInsets.all(8),
        color: Colors.red,
        child: const Text(
          '20% OFF',
          style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
        ),
      ),
    ),
  ],
)
Run Online

Example 4: Overlay Text on Image

In this example, you will learn to overlay text on an image.

Stack(
  children: [
    Image.network(
      'https://images.pexels.com/photos/19060954/pexels-photo-19060954/free-photo-of-iphone-15-pro-max.jpeg'
    ),
    Positioned(
      bottom: 10,
      left: 10,
      child: DecoratedBox(
        decoration: BoxDecoration(
          color: Colors.black,
          borderRadius: BorderRadius.circular(4),
        ),
        child: const Padding(
          padding: EdgeInsets.all(8),
          child: Text(
            'iPhone 15 Pro Max',
            style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
          ),
        ),
      ),
    ),
  ],
)
Run Online