Flutter – Positioned Widget

Positioned is a widget that comes built-in with flutter SDK. Positioned does exactly what it sounds like, which is it arbitrarily positioned widgets on top of each other. It is usually used to position child widgets in Stack widget or similar. It only works for Stateless and Stateful widgets.

Constructor of Positioned Class:

It is responsible for controlling where a child of Stack is positioned.

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

Constructor of Positioned.directional class:

It is responsible for controlling where a child of Stack is positioned. But has additional properties for specifying the Text direction.

Positioned.directional(
{Key key,
@required TextDirection textDirection,
double start,
double top,
double end,
double bottom,
double width,
double height,
@required Widget child}
)

Constructor of Positioned.fill class:

It creates a Positioned object with a default value set to 0.0 for left, top, right, and bottom unless a value for them is passed.

const Positioned.fill(
{Key key,
double left: 0.0,
double top: 0.0,
double right: 0.0,
double bottom: 0.0,
@required Widget child}
)

Constructor of Positioned.fromRect class:

It is used to create a Positioned object with the values from the given Rect.

Positioned.fromRect(
{Key key,
Rect rect,
@required Widget child}
)

Constructor of Positioned.fromRelativeRect class:

It is used to create a Positioned object with the values from the given RelativeRect.

Positioned.fromRelativeRect(
{Key key,
RelativeRect rect,
@required Widget child}
)

Properties of Positioned Widget: 

• bottom: This property controls the distance that the child widgets are inset from the bottom of the Stack. It takes in a double value as the object.
• debugTypicalAncestorWidgetClass: This widget takes in a Type class as the object. In the case of an error, this gives information about what widget typically wraps this ParentdataWidget.
• height: This property takes in a double value as the object to decide the height of its child widget.
• left: This property controls the distance that the child widgets are inset from the left of the Stack. It takes in a double value as the object.
• top: The top property also takes in a double value to decide the distance between the top edge of the child widget and the Stack.
• width: This property takes in a double value to decide the width of the child widget.

Example: 

Dart

import 'package:flutter/material.dart';

// Material design library
void main() {
  runApp(

    // widget tree starts here
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('GeeksforGeeks'),
          backgroundColor: Colors.greenAccent[400],
          centerTitle: true,
        ), //AppBar
        body: Padding(
          padding: EdgeInsets.only(top: 300),
          child: Stack(
            alignment: AlignmentDirectional.center,
            children: <Widget>[

              /** Positioned WIdget **/
              Positioned(
                top: 0.0,
                child: Icon(Icons.message,
                    size: 128.0, color: Colors.greenAccent[400]), //Icon
              ), //Positioned
              /** Positioned WIdget **/

              Positioned(
                top: 0,
                right: 285,
                child: CircleAvatar(
                  radius: 16,
                  backgroundColor: Colors.red,
                  foregroundColor: Colors.white,
                  child: Text('24'),
                ), //CircularAvatar
              ), //Positioned
            ], //<Widget>[]
          ), //Stack
        ), //Padding
      ), //Scaffold
    ), //MaterialApp
  );
}

Output: 

Explanation: The parent widget in this flutter app is Padding which is employing its only property padding to print an empty space of 300 px on the top of its child widget which is Stack. The alignment is set to center in the Stack widget. Stack, as it does, is taking a list of widgets as children, here it’s taking in two Positioned widgets. The first one is containing a green-colored material design message icon, which is 128 px long in width and height. The second Positioned widget is having a red-colored CircleAvatar as its child. The text n the CircleAvatar is 24 with white color. And the result of all this is message icons showing 24 notifications.