Positioned Widget

What is Positioned Widget?

The Positioned widget is to control position of child in a Stack.

Default Constructor

The default constructor creates a widget that controls where a child of a Stack is positioned.

Positioned(
  top:
  left:
  child:
)

Constructor Parameters

It contains many input parameters which can be configured to change its behavior and appearance.

The top parameter is to draw a border line to the top side of the widget.

The left parameter is to draw a border line to the left side of the widget.

The child parameter is to add the child widget below the Positioned widget in a tree.

Code snippet

This code snippet shows how to configure Positioned widget.

Positioned(
      left: 20,
      top: 20,
      child: Container(
        height: 100,
        width: 120,
        child: FlutterLogo(),
      ),
    );

Demo Code

This example shows positioned Container widget left 20 pixels and top 20 pixels inside the stack. Positioned FlatButton widget left 20 pixels and top 80 pixels inside the stack below Container.

import 'package:flutter/material.dart';

class PositionedDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Positioned(
          left: 20,
          top: 20,
          child: Container(
              height: 50,
              width: 88,
              decoration: BoxDecoration(
                border: Border.all(width: 0.1),
              ),
              child: FlutterLogo()),
        ),
        Positioned(
          left: 20,
          top: 80,
          child: FlatButton(
            color: Colors.blue,
            child: Text('Animate'),
            onPressed: () {},
          ),
        ),
      ],
    );
  }
}

// This Widget is the main application widget.
class MyApp extends StatelessWidget {
  static const String _title = 'Positioned';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: Center(
          child: Material(child: PositionedDemo()),
        ),
      ),
    );
  }
}

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