Stack widget é um widget embutido no flutter SDK que nos permite criar uma camada de widgets, colocando-os em cima uns dos outros. Muitas vezes, um layout simples de linha e coluna não é suficiente, precisamos de uma maneira de sobrepor um widget sobre o outro, por exemplo, podemos querer mostrar algum texto sobre uma imagem, então, para resolver tal situação, temos Widget de pilha. A pilha elemento tem dois tipos de uma criança é posicionada que está envolvido na Posicionado widget e o outro é não - posicionado qual não é envolvida no Posicionado widget. Para todos os widgets não posicionados, a propriedade de alinhamento é definida no canto superior esquerdo. Os widgets filhos posicionados são posicionados através do topo , direita, propriedades esquerda e inferior . Os widgets filhos do Stack são impressos de forma que o widget na parte superior se torne o mais na parte inferior da tela e vice-versa. Podemos usar a propriedade key do widget Stack para alterar essa ordem ou atribuir uma ordem diferente. 

Construtor da classe 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>[]}
)

Propriedades do Stack Widget:

• alinhamento: esta propriedade recebe um parâmetro de geometria de alinhamento e controla como um widget filho não posicionado ou parcialmente posicionado será alinhado na pilha .
• clipBehaviour: Esta propriedade decide se o conteúdo será recortado ou não.
• fit: esta propriedade decidiu como os filhos não posicionados na pilha preencherão o espaço disponível para ela.
• overflow: esta propriedade controla se a parte de overflow do conteúdo será visível ou não,
• textDirection: Com esta propriedade, podemos escolher a direção do texto da direita para a esquerda. ou da esquerda para a direita.

Exemplo 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
          ) //MaterilApp
      );
}

Saída:

Explicação: Dando uma olhada no código deste aplicativo flutter, podemos ver que o widget pai para este aplicativo é o Scaffold. No topo da árvore de widgets, temos o widget AppBar com widget de texto de título ' GeeksforGeeks ' e a cor de fundo da barra de aplicativos é greenAccent [400]. No corpo do aplicativo, o widget pai é Center seguido pelo SizedBox de altura 300 e largura 300. SizedBox também tem um Center filho que, por sua vez, mantém o widget Stack . Na pilhawidget, temos uma lista de widgets filhos contendo três widgets de Container . O primeiro widget Container está tendo uma altura e largura de 300, a mesma do SizedBox, com uma cor vermelha. O Segundo Container está tendo uma largura e altura de 250 com a cor preta. O terceiro recipiente tem largura e altura de 200 com uma cor roxa. Agora, olhando para o aplicativo, podemos ver que todos os três contêineres filhos do Stack estão empilhados uns sobre os outros, com os contêineres vermelhos na parte inferior do roxo na parte superior e os pretos no meio. Todos esses três contêineres são widgets não posicionados no Stackportanto, a propriedade de alinhamento para eles é definida como Alignment.topRight, portanto, podemos ver todos eles alinhados ao canto superior direito.

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

Saída:

Explicação: Neste aplicativo, adicionamos preenchimento e um widget filho de Te xt é cada um dos contêineres com a cor do texto sendo branco. No primeiro Container , o texto é 'One' e o alinhamento é definido como Alignment.topRight, o que coloca o widget Text no canto superior direito. No segundo Container, o texto é 'Two', e o alinhamento é definido como Alignment.bottem left, o que coloca o filho que é o Texto no canto inferior esquerdo. No terceiro contêiner , adicionamos uma imagem de fundo mostrando os GeeksforGeekslogotipo usando a propriedade de decoração no contêiner. O texto neste contêiner é 'GeeksforGeeks' e o alinhamento é definido como centro inferior, o que coloca o teste acima da imagem na parte central inferior do contêiner. 

É assim que podemos usar o widget Stack para mostrar o texto (ou qualquer outro widget) na parte superior de outro widget.

Exemplo 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
          ) //MaterilApp
      );
}

Saída:

Explicação: Neste aplicativo, envolvemos o Container roxo e o preto com um widget Posicionado , portanto, esses widgets filhos agora são widgets posicionados. No widget Stack , a propriedade fit é definida como S tackFit.expand, o que forçará todos os widgets filhos a ocuparem o espaço máximo disponível para eles. A propriedade clip é definida como antiAliasWithSaveLayer, o que evita quaisquer bordas vazadas. E o estouro é definido como visível, para tornar visíveis as partes que transbordam. Agora que empacotamos os contêineres com o widget Posicionado , precisamos especificar sua posição. Para o recipiente preto, as propriedades superior e esquerda são definidas como 80 cada, o que faz com que transbordem de SizedBox e do recipiente vermelho . Mas como o estouro está definido como visível, podemos ver a parte transbordando do recipiente preto. E para o recipiente roxo , a parte superior e a esquerda são definidas como 20 cada, o que o torna um pouco deslocado em comparação com o primeiro exemplo.

Portanto, é assim que o widget Stack pode ser usado. Mas também podemos obter um resultado semelhante ou igual com o widget CustomSingleChildLayout e o widget CustomMultiChildLayout .