Flutter: SliverAppBar com cabeçalho elástico

Publicado em 12/05/2023 por cacpnrj

Tempo de leitura: 2 minutes

O Flutter incorpora seu próprio header elástico dentro do SliverAppBar, vou mostrar como funciona.

Basta atribuir true à propriedade stretch que agora traz o SliverAppBar e em FlexibleSpace usamos o widget FlexibleSpaceBar, que agora também traz uma nova propriedade chamada stretchModes que indica os efeitos que ela adicionará quando rolarmos.

Os modos são:

StretchMode.zoomBackground -> O widget de plano de fundo será expandido para preencher o espaço extra.
StretchMode.blurBackground -> O fundo ficará desfocado usando um efeito [ImageFilter.blur].
StretchMode.fadeTitle -> O título desaparecerá à medida que o usuário rolar a tela.

CustomScrollView(
 physics: const BouncingScrollPhysics(),
 slivers: [
   SliverAppBar(
     expandedHeight: 300,
     flexibleSpace: FlexibleSpaceBar(
       title: const Text('Teste do Scroll'),
       stretchModes: const [
         StretchMode.zoomBackground,
         StretchMode.blurBackground,
         StretchMode.fadeTitle,
       ],
       background: Image.network('sua_image.png',
       fit: BoxFit.cover),
     ),
   )
 ],
);

Aqui o exemplo usando Stretch Mode.zoom Background

Usando StretchMode.zoomBackground e StretchMode.blurBackground,

Finalmente usando todos os 3 modos ao mesmo tempo.

Outra coisa interessante que traz é que podemos lançar uma ação quando rolamos nosso widget. A propriedade que usaremos será onStretchTrigger, onde podemos executar qualquer ação.

Por padrão, o gatilho é chamado quando a rolagem excede 100,0 pixels, mas podemos substituir isso usando a nova propriedade stretchTriggerOffset.

CustomScrollView(
  physics: const BouncingScrollPhysics(),
  slivers: [
    SliverAppBar(
      expandedHeight: 300,
      stretch: true,
      // Mude o offset aqui
      stretchTriggerOffset: 150.0,
      onStretchTrigger: () {
        // Chamada da ação
        return;
      },
      flexibleSpace: FlexibleSpaceBar(
        title: const Text('Teste do Scroll'),
        stretchModes: const [
          StretchMode.zoomBackground,
          StretchMode.blurBackground,
          StretchMode.fadeTitle,
        ],
        background: Image.network('sua_image.png',
        fit: BoxFit.cover),
      ),
    )
  ],
 );

Brincando com esse widget consegui replicar um design que encontrei na web, esse é o resultado:

Conclusão

Espero ter ajudado caso você queira adicionar este widget em seu projeto. Como você pode ver, a equipe do Flutter está trabalhando duro para implementar um grande número de widgets úteis, mas que muitos de nós não sabemos.

Twittar

0 Compart.