Flutter - Positioned Widget - GeeksforGeeks

10 Aug, 2021
Positioned is a widget that comes built-in with flutter SDK. Postioned 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.
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}
)
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}
)
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}
)
It is used to create a Positioned object with the values from the given Rect.
Positioned.fromRect(
{Key key,
Rect rect,
@required Widget child}
)
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 libraryvoid 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.
anikakapoor
android
Flutter
Flutter-widgets
Dart
Flutter
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Flutter - DropDownButton Widget
Flutter - Custom Bottom Navigation Bar
Flutter - Checkbox Widget
Flutter - BoxShadow Widget
ListView Class in Flutter
Flutter - DropDownButton Widget
Flutter - Custom Bottom Navigation Bar
Flutter Tutorial
Flutter - Checkbox Widget
Flutter - BoxShadow Widget