How to use positioned widget in flutter?


Flutter - Stack and Postioned Widget

This Recommends checking out our previous post on, the usage of Stack widget( 2 min read ). I am waiting….

Ok Done? So let’s get started.


How to use Postioned Widget in flutter?

Positioned Widget, as the name suggests It is something related to position of some widget. Right !! Positioned widget allow us to control where a child of Stack is positioned, within Stack.

So referring to our previous example, of a Stack with three colored container in it. Let’s wrap them up into a Positioned widget.

The following code will draw three containers on the mobile screen, with green, red and indigo colored containers respectively.

...
Stack(
  children: <Widget>[
    Positioned(
      top: 20,
      left: 20,
      height: 200,
      width: 200,
      child: Container(
        width: 100,
        height: 100,
        color: Colors.green[300],
        child: Text(
          'Green',
          style: TextStyle(
            color: Colors.white,
            fontSize: 20
          ),
        ),
      ),
    ),
    Positioned(
      top: 60,
      left: 50,
      width: 200,
      height: 200,
      child: Container(
        width: 90,
        height: 90,
        color: Colors.red[400],
        child: Text(
          'Red',
          style: TextStyle(color: Colors.white, fontSize: 20),
        ),
      ),
    ),
    Positioned(
      top: 100,
      left: 75,
      width: 200,
      height: 200,
      child: Container(
        width: 80,
        height: 80,
        color: Colors.indigo[300],
        child: Text(
          'Blue',
          style: TextStyle(color: Colors.white, fontSize: 20),
        ),
      ),
    ),
  ],
),
...


Positioned Widget Options

  1. top : The distance that the child’s top edge.
  2. left : The distance that the child’s left edge.
  3. width : Width of the child. *This overrides the Child Container height if any
  4. height : Height of the child. *This overrides the Child Container height if any
  5. right : The distance that the child’s right edge.
  6. bottom : The distance that the child’s bottom edge.


App Preview

stack-app-flutter

Recommended Posts

Default Enum in Rails 6
Rails 6 provides a way to define default enum value. Let’s see how it works...
Ruby 2.7 adds Enumerable#tally
After introducing the Enumerable#tally method in Ruby 2.7-preview updates. #tally as the name suggests gives...
How to rename column name in Rails
Rails rename_column Rails provides a simple method rename_column which can be used in a migration....