UnconstrainedBox é seu amigo - Dica #5

[available in English here]

Olá.
Nesta dica do Flutter, quero falar um pouco sobre o widget UnconstrainedBox, você já o usou antes? Me conte nos comentários.

Para que serve?

Resumindo, é um widget que dá ao filho a liberdade de se dimensionar conforme necessário. UnconstrainedBox (como o nome sugere), não impõe restrições ao seu filho, o filho irá renderizar como se estivesse em uma tela infinita. Às vezes, ele pode transbordar quando usado com alguns widgets como PageView, então você deve ter cuidado para dar ao filho as restrições de tamanho adequadas, conforme necessário.

Aprenda pelo Exemplo

Digamos que precisamos construir um PageView onde seus filhos têm tamanhos diferentes e deve mostrar um item por vez, como você faria isso? (Deixe-me saber nos comentários).

Aqui está nosso código inicial, é apenas um PageView com três itens: um contêiner vermelho, verde e azul.

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(home: UnconstrainedBoxSample()));

class UnconstrainedBoxSample extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(title: Text('Unconstrained Box')),
      body: PageView(
        children: [
          Container(color: Colors.red),
          Container(color: Colors.green),
          Container(color: Colors.blue),
        ],
      ),
    );
  }
}

Aqui está a saída do código acima.

Como você pode ver, todos os três itens estão sendo expandidos para caber na página inteira, definir um tamanho personalizado para nossos filhos não funciona porque o PageView força-os a terem o mesmo tamanho (na direção de não rolagem) que ele.

Podemos contornar isso alterando a janela de visualização da página, mas isso teria um efeito colateral: outros itens também seriam exibidos e nossos filhos ainda seriam forçados a ter a mesma altura da PageView.

Vamos tentar isso, adicionar um controlador com uma fração de porta de visualização personalizada em sua visualização de página: controller: PageController (viewportFraction: .8) e o resultado é o seguinte.

Isso acontece porque PageView está impondo restrições para seus filhos. O padrão (viewportFraction: 1) significa que cada filho deve ter exatamente o mesmo tamanho de seu pai (o PageView). Cada vez que você diminui o viewportFraction, você está apenas diminuindo o tamanho de seus filhos.

UnconstrainedBox em ação!

Para resolver os problemas mencionados acima, devemos embrulhar cada criança em uma caixa sem restrições.

Observe que, embora estejamos usando uma caixa irrestrita, nosso item ainda tem as restrições de: não poder ser maior (em altura/largura dependendo da direção de rolagem) do que o PageView. A principal vantagem é poder ter filhos menores (em tamanho) que o PageView.

Lembre-se: como estamos usando uma caixa sem restrições, nosso filho deve ter tamanho, caso contrário, terá sua largura e altura definidas como zero (0).

Vamos atualizar nosso código, embrulhar seu segundo item em um UnconstrainedBox e dar ao contêiner um tamanho, nosso código agora se parece com este:

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(home: UnconstrainedBoxSample()));

class UnconstrainedBoxSample extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(title: Text('Unconstrained Box')),
      body: PageView(
        children: [
          Container(color: Colors.red),
          UnconstrainedBox(   // NEW
              child: Container(
                height: 400,  // NEW
                width: 250,   // NEW
                color: Colors.green,
              ),
          ),   // NEW
          Container(color: Colors.blue),
        ],
      ),
    );
  }
}

Aqui está o resultado do código acima:

Finalmente, nosso segundo filho agora tem a liberdade de se dimensionar conforme necessário, desde que não ultrapasse o tamanho do PageView. Este widget vem com algumas propriedades úteis como alignment e constrainedAxis.

• alignment: permite que você alinhe o filho em seu espaço restante. O padrão é Alignment.center.

• constrainedAxis: permite especificar um eixo para restringir o filho, ou seja, permite definir em que direção seu widget ainda deve ser restringido. O padrão é null, o que significa que nenhum dos eixos será restringido.

Este widget nos dá liberdade e a habilidade de construir ótimas animações e UI usando em conjunto com PageView e outros widgets.

É tudo por hoje. Curta, compartilhe e inscreva-se para obter mais dicas do Flutter. Comente se você tiver alguma dúvida ou problema.