How to use the positioned widget in Flutter

Key takeaways:

  • The Positioned widget enables exact placement of child widgets within a Stack using parameters like top, left, right, and bottom, offering fine-grained control over layouts.

  • The AnimatedPositioned helps to create smooth transitions between positions for dynamic and visually appealing animations in your UI.

  • The Positioned.fill constructor simplifies layouts by making child widgets occupy the entire space within a Stack, eliminating the need for manually setting edge properties.

  • Implement FractionalOffset for relative positioning and use responsive techniques like MediaQuery or percentage-based layouts to ensure adaptability across screen sizes while maintaining code clarity.

The Positioned widget is a layout widget in Flutter that helps us position child widgets within a Stack widget. It allows us to specify the exact coordinates (top, left, right, bottom) of a child widget relative to the Stack's edges. This is particularly useful for creating custom designs and layouts.

Syntax

The Positioned widget provides a constructor with various parameters to customize its behavior and layout.

const Positioned({
  Key? key,
  double? left,
  double? top,
  double? right,
  double? bottom,
  double? width,
  double? height,
  required Widget child
})

Let's take a closer look at each parameter and its purpose.

  • key: A unique identifier for the widget, used for widget management.

  • left: Distance from the left edge of the Stack.

  • top: Distance from the top edge of the Stack.

  • right: Distance from the right edge of the Stack.

  • bottom: Distance from the bottom edge of the Stack.

  • width: Optional width for the positioned widget.

  • height: Optional height for the positioned widget.

  • child: The child widget is to be positioned within the Stack.

Coding example

We can follow the instructions given below to add a Positioned widget in UI.

Import the necessary packages

To use the Positioned widget, we need to import the necessary packages in our Dart file.

import 'package:flutter/material.dart';

Basic syntax

The basic syntax of using the Positioned widget is as follows:

Positioned(
  top: /* value */,
  left: /* value */,
  right: /* value */,
  bottom: /* value */,
  child: /* Your Widget */,
)

Positioning widgets within a Stack

To use the Positioned widget, we'll typically need to place it as a child of a Stack widget. The Stack widget allows us to overlay multiple widgets on top of each other. The Positioned widget then determines the exact position of its child within the Stack.

Stack(
  children: [
    /* Other Widgets */,
    Positioned(
      top: /* value */,
      left: /* value */,
      child: /* Your Widget */,
    ),
  ],
)

Using Positioned.fill

In some cases, you might want the child widget to take up the entire space available within the Stack. The Positioned.fill constructor allows you to accomplish this by automatically setting the top, left, right, and bottom properties to 0. Here's an example:

Positioned.fill(
  child: Container(
    color: Colors.blue,
  ),
),

This will make the Container fill the entire area of the Stack.

Animating with AnimatedPositioned

Flutter also provides AnimatedPositioned, which allows you to animate the movement of widgets from one position to another smoothly. This widget is useful when you need dynamic, animated changes to the position of a widget. Here's an example:

AnimatedPositioned(
  top: _isMoved ? 200.0 : 50.0,
  left: _isMoved ? 100.0 : 10.0,
  duration: const Duration(seconds: 1),
  child: Container(
    color: Colors.red,
    width: 100,
    height: 100,
  ),
),

In this example, when _isMoved is toggled, the widget animates smoothly between the two positions.

Applying the FractionalOffset for relative positioning

We can use the FractionalOffset to position a child widget relative to the size of the Stack. This is useful for achieving responsive layouts.

Stack(
  children: [
    Positioned(
      top: null,
      left: null,
      right: 0.0,
      bottom: 0.0,
      child: Container(
        width: 50,
        height: 50,
        color: Colors.green,
      ),
    ),
  ],
)

We get the following code by putting together the code explained above:

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('Educative Positioned Answer')),
        body: PositionedExample(),
      ),
    );
  }
}

class PositionedExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Container(
          color: Colors.gray[300],
          width: double.infinity,
          height: double.infinity,
        ),
        Positioned(
          top: 20,
          left: 20,
          child: Container(
            width: 100,
            height: 100,
            color: Colors.blue,
          ),
        ),
        Positioned(
          top: 150,
          right: 30,
          child: Container(
            width: 150,
            height: 200,
            color: Colors.red,
          ),
        ),
        Positioned(
          bottom: 20,
          left: 50,
          child: Container(
            width: 80,
            height: 120,
            color: Colors.green,
          ),
        ),
        Positioned(
          bottom: 60,
          right: 80,
          child: Container(
            width: 120,
            height: 80,
            color: Colors.orange,
          ),
        ),
      ],
    );
  }
}
Complete implementation

Below is the line-by-line explanation of the above code.

  • Line 1: We import the Flutter Material library, which provides various UI components and widgets used in the app.

  • Line 7: We define a StatelessWidget class named MyApp, meaning the widget does not manage state.

  • Line 10: We return a MaterialApp widget, which serves as the root of the application and wraps the entire app in Material Design.

  • Line 11: We define the home property of MaterialApp as a Scaffold widget, which provides the basic structure of the UI (app bar, body, etc.).

  • Line 12: We create an AppBar widget at the top of the screen with a title displaying "Educative Positioned Answer."

  • Line 13: We set the body of the Scaffold to be the PositionedExample widget, which will contain a layout with positioned elements.

  • Line 19: We define a StatelessWidget class named PositionedExample, which will display the UI using the Stack and Positioned widgets.

  • Line 22: We return a Stack widget, which allows for overlapping children widgets, positioned relative to each other.

  • Line 24–28: We add a Container as the first child of the Stack. It has a gray background color and occupies the full width and height of the screen (double.infinity).

  • Line 29–37: We position a Container (blue, 100x100 pixels) 20 pixels from the top and left edges of the Stack.

  • Line 38–46: We position a Container (red, 150x200 pixels) 150 pixels from the top and 30 pixels from the right edge of the Stack.

  • Line 47–55: We position a Container (green, 80x120 pixels) 20 pixels from the bottom and 50 pixels from the left edge of the Stack.

  • Line 56–62: We position a Container (orange, 120x80 pixels) 60 pixels from the bottom and 80 pixels from the right edge of the Stack.

After running the above code, we can see the following output:

Positioning different containers using Positioned widget in Stack widget
Positioning different containers using Positioned widget in Stack widget

Best practices for using Positioned

  • Avoid overusing Positioned: While Positioned is helpful for custom layouts, but overusing it can lead to complicated code and layouts that are hard to maintain. Consider using other layout widgets like Align or Padding if your design doesn’t require exact positioning.

  • Handling overflow: When positioning widgets, especially with fixed coordinates, ensure that the widgets don’t overflow outside the screen or container. This can cause unexpected behavior or parts of your UI being hidden. You can use OverflowBox to manage such cases.

  • Responsive layouts: Be mindful of using fixed positions (left, top, etc.) on varying screen sizes. For better responsiveness, consider using percentage-based positioning with widgets like FractionallySizedBox or techniques like MediaQuery to adapt layouts based on screen dimensions.

  • Performance considerations: If your app requires animating the position of widgets frequently, consider using AnimatedPositioned for smoother transitions and reduced performance overhead.

Ready to build stunning Android apps? Beginning Flutter: Android Mobile App Development takes you from designing contact profiles to integrating APIs and publishing your app, all with Flutter's powerful UI framework.

Conclusion

The Positioned widget is a powerful tool in Flutter that offers fine control over the placement of child widgets within a Stack. By leveraging the various parameters, such as top, left, right, and bottom, developers can create custom layouts with precision. Features like Positioned.fill allow widgets to take up all available space, while AnimatedPositioned introduces smooth transitions for dynamic UI updates. Additionally, using techniques like FractionalOffset can ensure responsive designs. When used effectively and sparingly, the Positioned widget can greatly enhance the flexibility and control of your app’s layout, making it a valuable component for achieving complex, custom designs.

Frequently asked questions

Haven’t found what you were looking for? Contact Us

How to center a positioned widget in Flutter

To center a Positioned widget within a Stack in Flutter, you can use the combination of the left, right, top, and bottom properties to achieve a central position. By setting equal values for these properties or using alignment techniques, you can center the widget. Alternatively, you can wrap the widget with a Center or Align widget and omit the Positioned widget if the main goal is centering.

Example methods:

  • Set left and right or top and bottom equally.
  • Use Align with alignment: Alignment.center inside the Stack.

How to use stack and positioned widgets

To use Stack and Positioned widgets in Flutter:

  • Stack widget: The Stack widget allows you to place multiple widgets on top of each other. It’s useful for creating complex, layered layouts where widgets can overlap.

  • Adding children to Stack: You can add multiple child widgets inside the Stack. Each child can either be positioned freely or follow the natural stacking order.

  • Positioned widget: The Positioned widget is used within the Stack to place a child at specific coordinates (top, left, right, bottom) relative to the stack’s edges, giving precise control over placement.

This combination is ideal for creating flexible, custom layouts where elements need to be positioned dynamically.

How do you use the alignment widget in Flutter?

The Align widget in Flutter is used to position a child widget within its parent, based on the specified alignment. It gives you control over the placement of a widget within its container or parent widget, regardless of the parent’s size. Here’s how it works:

  • Wrap the Child widget: Place the widget you want to position inside an Align widget.

  • Set the alignment property: Use the alignment property to specify where the child should be positioned. Flutter provides predefined constants like Alignment.center, Alignment.topLeft, Alignment.bottomRight, or you can create custom alignment using Alignment(x, y).

  • Effect on the layout: The Align widget resizes to match the dimensions of its parent, and the child is positioned according to the specified alignment within that space.

This is useful for precise positioning of widgets without relying on the Positioned widget or manual margin adjustments.

Free Resources

Copyright ©2025 Educative, Inc. All rights reserved