Flutter – Widget de pila

Stack widget es un widget integrado en flutter SDK que nos permite crear una capa de widgets colocándolos uno encima del otro. Muchas veces, un diseño simple de filas y columnas no es suficiente, necesitamos una forma de superponer un widget sobre el otro, por ejemplo, es posible que deseemos mostrar texto sobre una imagen, por lo que para abordar esta situación tenemos Widget de pila. El widget Stack tiene dos tipos de elementos secundarios, uno está posicionado y está envuelto en el widget Positioned y el otro no está posicionado y no está envuelto en el widget Positioned . Para todos los widgets no posicionados, la propiedad de alineación se establece en la esquina superior izquierda. Los widgets secundarios posicionados se ubican en la parte superior derechaPropiedades , izquierda e inferior . Los widgets secundarios de Stack se imprimen para que el widget superior se convierta en el inferior de la pantalla y viceversa. Podemos usar la propiedad clave del widget Stack para cambiar ese orden o para asignar un orden diferente. 

Constructor de la clase Stack:

Stack(
{Key key,
AlignmentGeometry alignment: AlignmentDirectional.topStart,
TextDirection textDirection,
StackFit fit: StackFit.loose,
Overflow overflow: Overflow.clip,
Clip clipBehavior: Clip.hardEdge,
List<Widget> children: const <Widget>[]}
)

Propiedades del widget de pila:

• alineación: esta propiedad toma un parámetro de geometría de alineación y controla cómo se alineará en la pila un widget secundario que no está posicionado o que está parcialmente posicionado .
• clipBehaviour: esta propiedad decide si el contenido se recortará o no.
• fit: esta propiedad decide cómo los niños no posicionados en la pila llenarán el espacio disponible.
• desbordamiento: esta propiedad controla si la parte de desbordamiento del contenido será visible o no,
• textDirection: Con esta propiedad podemos elegir la dirección del texto de derecha a izquierda. o de izquierda a derecha.

Ejemplo 1:

import 'package:flutter/material.dart';
 
void main() {
  runApp(MaterialApp(
          home: Scaffold(
              appBar: AppBar(
                title: Text('GeeksforGeeks'),
                backgroundColor: Colors.greenAccent[400],
              ), //AppBar
              body: Center(
                child: SizedBox(
                  width: 300,
                  height: 300,
                  child: Center(
                    child: Stack(
                      children: <Widget>[
                        Container(
                          width: 300,
                          height: 300,
                          color: Colors.red,
                        ), //Container
                        Container(
                          width: 250,
                          height: 250,
                          color: Colors.black,
                        ), //Container
                        Container(
                          height: 200,
                          width: 200,
                          color: Colors.purple,
                        ), //Container
                      ], //<Widget>[]
                    ), //Stack
                  ), //Center
                ), //SizedBox
              ) //Center
              ) //Scaffold
          ) //MaterialApp
      );
}

Producción:

Explicación: Echando un vistazo al código de esta aplicación flutter, podemos ver que el widget principal para esta aplicación es Scaffold. En la parte superior del árbol de widgets, tenemos el widget AppBar con el título Widget de texto que dice » GeeksforGeeks » y el color de fondo de la barra de la aplicación es greenAccent [400]. En el cuerpo de la aplicación, el widget principal es Center seguido por SizedBox de 300 de altura y 300 de ancho . SizedBox también tiene un Center secundario que a su vez contiene el widget Stack . en la pilawidget, tenemos una lista de widgets secundarios que contienen tres widgets de contenedor . El primer widget de contenedor tiene una altura y un ancho de 300, lo mismo que SizedBox, con un color rojo. El Segundo Contenedor tiene un ancho y alto de 250 con color negro. El tercer Contenedor tiene un ancho y una altura de 200 con un color púrpura. Ahora, al mirar la aplicación, podemos ver que los tres contenedores que son elementos secundarios de Stack están apilados uno encima del otro con los contenedores rojos en la parte inferior, el púrpura en la parte superior y el negro en el medio. Todos estos tres contenedores son widgets no posicionados en Stackpor lo que la propiedad de alineación para ellos se establece en Alignment.topRight, por lo que podemos verlos todos alineados en la esquina superior derecha.

Ejemplo 2:

import 'package:flutter/material.dart';
 
void main() {
  runApp(MaterialApp(
          home: Scaffold(
              appBar: AppBar(
                title: Text('GeeksforGeeks'),
                backgroundColor: Colors.greenAccent[400],
              ), //AppBar
              body: Center(
                child: SizedBox(
                  width: 300,
                  height: 300,
                  child: Center(
                    child: Stack(
                      children: <Widget>[
                        Container(
                          width: 300,
                          height: 300,
                          color: Colors.red,
                          padding: EdgeInsets.all(15.0),
                          alignment: Alignment.topRight,
                          child: Text(
                            'One',
                            style: TextStyle(color: Colors.white),
                          ), //Text
                        ), //Container
                        Container(
                          width: 250,
                          height: 250,
                          color: Colors.black,
                          padding: EdgeInsets.all(15.0),
                          alignment: Alignment.bottomLeft,
                          child: Text(
                            'Two',
                            style: TextStyle(color: Colors.white),
                          ), //Text
                        ), //Container
                        Container(
                          height: 200,
                          width: 200,
                          padding: EdgeInsets.all(15.0),
                          alignment: Alignment.bottomCenter,
                          decoration: BoxDecoration(
                            image: DecorationImage(
                                image: NetworkImage(
                                    "https://pbs.twimg.com/profile_images/1304985167476523008/QNHrwL2q_400x400.jpg") //NetworkImage
                                ), //DecorationImage
                          ), //BoxDecoration
                          child: Text(
                            "GeeksforGeeks",
                            style:
                                TextStyle(color: Colors.white, fontSize: 20.0),
                          ), //Text
                        ), //Container
                      ], //<Widget>[]
                    ), //Stack
                  ), //Center
                ), //SizedBox
              ) //Center
              ) //Scaffold
          ) //MaterialApp
      );
}

Producción:

Explicación: en esta aplicación, hemos agregado relleno y un widget de texto secundario es cada uno de los contenedores con el color del texto blanco. En el primer contenedor , el texto es ‘Uno’ y la alineación se establece en Alignment.topRight, lo que coloca el widget de texto en la esquina superior derecha. En el segundo Contenedor, el texto es ‘Dos’, y la alineación se establece en Alineación.abajo a la izquierda, lo que coloca al elemento secundario, que es el Texto , en la esquina inferior izquierda. En el tercer Contenedor , hemos agregado una imagen de fondo que muestra GeeksforGeekslogo usando la propiedad de decoración en el contenedor. El texto de este contenedor es «GeeksforGeeks» y la alineación se establece en la parte inferior central, lo que coloca la prueba sobre la imagen en la parte inferior central del contenedor. 

Así es como podemos usar el widget Stack para mostrar el texto (o cualquier otro widget) encima de otro widget.

Ejemplo 3:

import 'package:flutter/material.dart';
 
void main() {
  runApp(MaterialApp(
          home: Scaffold(
              appBar: AppBar(
                title: Text('GeeksforGeeks'),
                backgroundColor: Colors.greenAccent[400],
              ), //AppBar
              body: Center(
                child: SizedBox(
                  width: 300,
                  height: 300,
                  child: Center(
                    child: Stack(
                      fit: StackFit.expand,
                      clipBehavior: Clip.antiAliasWithSaveLayer,
                      overflow: Overflow.visible,
                      children: <Widget>[
                        Container(
                          width: 300,
                          height: 300,
                          color: Colors.red,
                        ), //Container
                        Positioned(
                          top: 80,
                          left: 80,
                          child: Container(
                            width: 250,
                            height: 250,
                            color: Colors.black,
                          ),
                        ), //Container
                        Positioned(
                          left: 20,
                          top: 20,
                          child: Container(
                            height: 200,
                            width: 200,
                            color: Colors.purple,
                          ),
                        ), //Container
                      ], //<Widget>[]
                    ), //Stack
                  ), //Center
                ), //SizedBox
              ) //Center
              ) //Scaffold
          ) //MaterialApp
      );
}

Producción:

Explicación: En esta aplicación, hemos envuelto el Contenedor morado y el negro con un widget Posicionado , por lo que estos widgets secundarios ahora son widgets posicionados. En el widget Stack , la propiedad fit se establece en S tackFit.expand , lo que obligará a todos sus widgets secundarios a ocupar el máximo espacio disponible para ellos. La propiedad del clip se establece en antiAliasWithSaveLayer, lo que evita los bordes sangrantes. Y el desbordamiento se establece en visible, para que las partes desbordadas sean visibles. Ahora que hemos envuelto contenedores con el widget Posicionado , necesitamos especificar su posición. Para el Contenedor negro, las propiedades superior e izquierda se establecen en 80 cada una, lo que hace que se desborde fuera de SizedBox y el Contenedor rojo . Pero como el desbordamiento se establece en visible, podemos ver la parte desbordada del Contenedor negro. Y para el Contenedor morado , la parte superior e izquierda están configuradas en 20 cada una, lo que lo hace un poco desplazado en comparación con el primer ejemplo.

Entonces, así es como se puede usar el widget Stack . Pero también podemos lograr un resultado similar o igual con el widget CustomSingleChildLayout y el widget CustomMultiChildLayout .