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.

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';

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:

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

Learn in-demand tech skills in half the time

PRODUCTS

Mock Interview

New

Courses

Skill Paths

Projects

Assessments

How to use the positioned widget in Flutter

Syntax

Coding example

Import the necessary packages

Basic syntax

Positioning widgets within a `Stack`

Using `Positioned.fill`

Animating with `AnimatedPositioned`

Applying the `FractionalOffset` for relative positioning

Best practices for using `Positioned`

Conclusion

Frequently asked questions

How to center a positioned widget in Flutter

How to use stack and positioned widgets

How do you use the alignment widget in Flutter?

How to use the positioned widget in Flutter

Syntax

Coding example

Import the necessary packages

Basic syntax

Positioning widgets within a Stack

Using Positioned.fill

Animating with AnimatedPositioned

Applying the FractionalOffset for relative positioning

Best practices for using Positioned

Conclusion

Frequently asked questions

How to center a positioned widget in Flutter

How to use stack and positioned widgets

How do you use the alignment widget in Flutter?

Positioning widgets within a `Stack`

Using `Positioned.fill`

Animating with `AnimatedPositioned`

Applying the `FractionalOffset` for relative positioning

Best practices for using `Positioned`