Flutter – Widget posicionado

Positioned es un widget que viene integrado con flutter SDK. Postioned hace exactamente lo que parece, es decir, coloca widgets arbitrariamente uno encima del otro. Por lo general, se usa para colocar widgets secundarios en Stack widget o similar. Solo funciona para widgets Stateless y Stateful .

Constructor de clase posicionada:

Es responsable de controlar dónde se posiciona un elemento secundario de Stack.

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

Constructor de la clase Positioned.direction:

Es responsable de controlar dónde se posiciona un elemento secundario de Stack. Pero tiene propiedades adicionales para especificar la dirección del texto.

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

Constructor de la clase Positioned.fill:

Crea un fondo izquierdo superior derecho

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 de la clase Positioned.fromRect:

Se utiliza para crear

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

Constructor de la clase Positioned.fromRelativeRect:

Se utiliza para crear

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

Propiedades del widget posicionado: 

• bottom: esta propiedad controla la distancia a la que se insertan los widgets secundarios desde la parte inferior de la pila. Toma un valor doble como objeto.
• debugTypicalAncestorWidgetClass: este widget toma una clase de tipo como objeto. En el caso de un error, esto brinda información sobre qué widget normalmente envuelve este ParentdataWidget.
• altura: esta propiedad toma un valor doble como objeto para decidir la altura de su widget secundario.
• izquierda: esta propiedad controla la distancia a la que se insertan los widgets secundarios desde la izquierda de la pila. Toma un valor doble como objeto.
• top: la propiedad top también toma un valor doble para decidir la distancia entre el borde superior del widget secundario y la pila .
• ancho: esta propiedad toma un valor doble para decidir el ancho del widget secundario.

Ejemplo: 

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
  );
}

Producción: 

Explicación: el widget principal en esta aplicación flutter es Padding , que emplea su única propiedad padding para imprimir un espacio vacío de 300 px en la parte superior de su widget secundario, que es Stack . La alineación se establece en el centro en el widget Pila . Stack , como lo hace, está tomando una lista de widgets como hijos, aquí está tomando dos widgets posicionados . El primero contiene un ícono de mensaje de diseño de material de color verde, que tiene 128 px de ancho y alto. El segundo widget posicionado tiene un CircleAvatar de color rojo como hijo. El texto en el CircleAvatares 24 con color blanco. Y el resultado de todo esto son iconos de mensajes que muestran 24 notificaciones.