flutter
/

Flutter Positioned – Absolute Positioning inside Stack

Last Sync: Today

On this page

10
0%
5 min read
Remaining
5 minleft

Click any section to jump — progress syncs automatically

flutter

Flutter Positioned – Absolute Positioning inside Stack

What is the Positioned Widget?

Positioned is a widget that controls where a child of a Stack is placed. It allows you to set absolute coordinates (top, bottom, left, right) relative to the Stack’s edges, as well as optionally specify a width and height. It is only valid when used as a direct child of a Stack. Positioned gives you precise control over the placement of widgets, making it ideal for creating overlays, badges, floating action buttons, and complex UI arrangements.

Basic Usage

Wrap a child with Positioned and provide at least one of top, bottom, left, or right (or a combination). The child will be positioned relative to the corresponding edge of the Stack.

DARTRead-only
1
Stack(
  children: [
    Container(color: Colors.grey, width: 300, height: 300),
    Positioned(
      top: 50,
      left: 50,
      child: Container(width: 50, height: 50, color: Colors.red),
    ),
  ],
)

Positioning Properties

The Positioned widget has several properties to control placement and size:

    • top: Distance from the top edge of the Stack.
    • bottom: Distance from the bottom edge.
    • left: Distance from the left edge.
    • right: Distance from the right edge.
    • width: Explicit width of the child (if both left and right are given, width is ignored).
    • height: Explicit height of the child (if both top and bottom are given, height is ignored).

If you specify both top and bottom, the widget is vertically constrained between those edges; the height is determined by the space available (or the child's natural height). Similarly, left and right together stretch the widget horizontally. If you set width or height along with opposite edges, the explicit size takes precedence and the edges may be ignored (or cause an assertion if they conflict).

Examples

  1. Corner Badge

DARTRead-only
1
Stack(
  children: [
    Image.network('https://picsum.photos/200'),
    Positioned(
      top: 0,
      right: 0,
      child: Container(
        padding: EdgeInsets.all(8),
        decoration: BoxDecoration(
          color: Colors.red,
          shape: BoxShape.circle,
        ),
        child: Text('5', style: TextStyle(color: Colors.white)),
      ),
    ),
  ],
)

  1. Stretched Overlay

DARTRead-only
1
Stack(
  children: [
    Container(width: 200, height: 200, color: Colors.blue),
    Positioned(
      left: 20,
      right: 20,
      top: 50,
      child: Container(
        height: 50,
        color: Colors.white.withOpacity(0.8),
        child: Center(child: Text('Overlay')),
      ),
    ),
  ],
)

  1. Centered Floating Button (without FAB)

DARTRead-only
1
Stack(
  children: [
    Container(color: Colors.grey, width: 300, height: 300),
    Positioned(
      left: 0,
      right: 0,
      bottom: 20,
      child: Center(
        child: ElevatedButton(
          onPressed: () {},
          child: Text('Centered Button'),
        ),
      ),
    ),
  ],
)

Positioned vs Align vs Padding

    • Positioned: Absolute positioning within a Stack. You specify exact pixel offsets from edges. The Stack must be the parent.
    • Align: Positions a child within its parent based on a fraction (e.g., Alignment.topRight). It does not require a Stack and is often used with Container or SizedBox.
    • Padding: Adds space around the child, but does not change the child's position relative to the parent edges; it only adds empty space inside the parent.

Common Mistakes

    • Using Positioned outside a Stack: This causes a runtime error because Positioned only works inside a Stack.
    • Specifying conflicting constraints: For example, setting both left and right and also width can cause an assertion. Flutter prefers the explicit width/height over the edge constraints.
    • Forgetting to give the Stack a size: If the Stack itself has no size (e.g., no width/height and no positioned children that give it size), the positioned child may not be visible. Ensure the Stack has a bounded size (e.g., via a parent Container or an expanding child).
    • Not handling overflow: If a Positioned child extends beyond the Stack bounds, it may be clipped (depending on the Stack's clipBehavior). Use clipBehavior: Clip.none to allow overflow, but be mindful of UI boundaries.

Key Takeaways

    • Positioned is used inside a Stack to place children at absolute coordinates.
    • Specify top, bottom, left, right to position relative to the Stack's edges.
    • Use width and height to explicitly size the child.
    • When both opposite edges (e.g., left and right) are given, the child is stretched; explicit width overrides this.
    • Always ensure the Stack has a defined size, otherwise positioned children may not behave as expected.
    • For simple alignment without absolute coordinates, consider Align or Padding.

Try it yourself

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Positioned Demo')),
        body: Center(
          child: SizedBox(
            width: 300,
            height: 300,
            child: Stack(
              clipBehavior: Clip.none,
              children: [
                Container(color: Colors.blue),
                Positioned(
                  top: 20,
                  left: 20,
                  child: Container(width: 50, height: 50, color: Colors.red),
                ),
                Positioned(
                  bottom: 10,
                  right: 10,
                  child: Container(width: 40, height: 40, color: Colors.green),
                ),
                Positioned(
                  left: 0,
                  right: 0,
                  bottom: 0,
                  child: Container(
                    height: 50,
                    color: Colors.black.withOpacity(0.5),
                    child: Center(child: Text('Stretched Footer', style: TextStyle(color: Colors.white))),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Test Your Knowledge

Q1
of 4

Which widget must be the parent of a Positioned widget?

A
Container
B
Column
C
Stack
D
Row
Q2
of 4

How do you make a Positioned child stretch to fill the entire Stack?

A
Set `top: 0, bottom: 0, left: 0, right: 0`
B
Set `fill: true`
C
Use `Positioned.fill()` constructor
D
Both A and C
Q3
of 4

What happens if you set both `left` and `right` and also set `width`?

A
The `width` is ignored
B
The `width` overrides the stretch and may cause an assertion if constraints conflict
C
Both are applied, resulting in a stretched width
D
The child is centered
Q4
of 4

Which of the following is NOT a valid property of Positioned?

A
top
B
bottom
C
center
D
left

Frequently Asked Questions

Can I use `Positioned` to create a button that floats over a list?

Yes. Wrap the list in a Stack, then add the button as a Positioned child. Make sure the Stack has a size (e.g., it expands to the full screen via Scaffold body). You may need to give the list a fixed height or use Expanded to occupy remaining space.

How do I make a `Positioned` child fill the entire Stack?

Set top: 0, bottom: 0, left: 0, right: 0. This will stretch the child to fill the whole Stack. If you also set width or height, they will override the stretch. Alternatively, use the Positioned.fill constructor: Positioned.fill(child: ...).

Why does my `Positioned` child not appear?

Possible reasons: (1) The Stack has no size – ensure it is constrained (e.g., wrap it in a SizedBox or use Expanded). (2) The Positioned child might be behind another child due to order; the children are painted in order, so later children appear on top. (3) The coordinates might be negative or outside the Stack bounds and clipBehavior is Clip.hardEdge.

What is the difference between `Positioned` and `Positioned.fill`?

Positioned.fill is a convenience constructor that sets top: 0, bottom: 0, left: 0, right: 0. It's equivalent to a Positioned with all edges set to zero, causing the child to fill the entire Stack.

Can I use `Positioned` with `AnimatedPositioned`?

Yes, AnimatedPositioned is a version that animates changes to top, bottom, left, right, width, height. It's useful for smooth transitions.

Previous

flutter spacer widget

Next

flutter safearea widget

Related Content

Need help?

Explore our comprehensive docs or start a chat with our tech experts.