O widget AppBar é essencial para qualquer aplicativo móvel. É usado para mostrar informações importantes, como título da página, guias, imagens e ações que podem ser executadas na página.
Abordamos como personalizar o AppBar em um aplicativo Flutter . Mas e se você quiser animar o AppBar quando um usuário rolar para cima e para baixo?
Por exemplo, o AppBar pode mostrar uma imagem de perfil completa quando o usuário rola para cima e faz a transição lenta para mostrar apenas o nome do usuário o usuário rola para baixo. Esse efeito é chamado de barra de aplicativo flutuante. No Flutter, isso pode ser feito usando o widget chamado SliverAppBar .
Neste tutorial, mostraremos como implementar o widget SliverAppBar em um aplicativo Flutter, percorrendo alguns exemplos práticos.
Aqui está o que cobriremos:
O que é SliverAppBar? Personalizando o comportamento flutuante Adicionando AppBar dentro de SliverAppBar Adicionando TabBar com SliverAppBar Ouvindo o status de SliverAppBar (expandido/recolhido)
O que é SliverAppBar?
No Flutter, SliverAppBar é o sucessor do widget AppBar , que permite criar o efeito de barra de aplicativo flutuante . O SliverAppBar expande o AppBar quando a tela é rolada para cima e recolhida ao rolar para baixo.
Você também pode remover ou ocultar completamente o AppBar quando o usuário está rolando para baixo em uma longa lista. SliverAppBar tem muitas opções de personalização para que você possa ajustá-lo às suas necessidades.
Se você é um aprendiz visual, confira este rápido tutorial em vídeo:
Aqui está o código mínimo para colocar o SliverAppBar em funcionamento:
return Scaffold (//1 body: CustomScrollView (slivers:
Para adicionar CustomScrollView , coloque CustomScrollView na seção do corpo do Widget de andaime. Isso é usado para sincronizar a posição de rolagem da AppBar e da lista.
Existem vários widgets que podem ser adicionados a CustomScrollView, e SliverAppBar é um deles.
SliverAppBar fornece todos os recursos do widget AppBar normal com a adição de animá-lo. FlexibleSpace é usado para mostrar qualquer widget quando o AppBar é expandido. expansionHeight é usado para definir a altura de FlexibleSpaceBar do widget.
SliverList mostra a lista de itens. Não podemos usar a classe ListView normal porque CustomScrollView aceita o widget do tipo sliver.
Aqui está a saída:
Fonte da imagem da praia: vecteezy.com .
Veja como o código se traduz no design:
Personalizando o comportamento flutuante
O comportamento padrão irá ocultar o SliverAppBar ao rolar para baixo e expandir quando o primeiro item na lista é alcançado ao rolar para cima. No entanto, SliverAppBar tem opções para personalizar esse comportamento.
SliverAppBar tem três propriedades importantes conhecidas como fixada, instantânea e flutuante. Definir a combinação desses três parâmetros permite que o SliverAppBar funcione como você precisa.
Vamos demonstrar como essas propriedades funcionam observando um exemplo prático.
fixado: verdadeiro, instantâneo: false, floating: false:
Definir apenas um valor fixado como true mantém o SliverAppBar no topo ao rolar para baixo. SliverAppBar se expande apenas quando o primeiro item da lista é alcançado ao rolar para cima.
fixado: verdadeiro, snap: verdadeiro, flutuante: verdadeiro:
Quando todos os parâmetros são definidos como verdadeiros, SliverAppBar permanece no topo ao rolar para baixo e se expande totalmente rolar um pouco para cima, mesmo que o primeiro item da lista não seja alcançado.
fixado: verdadeiro, snap: false, floating: true:
Quando apenas o valor snap é definido como false, o SliverAppBar permanece no topo enquanto rola para baixo. A imagem de fundo começa a se expandir conforme rolamos para cima e para com nossa rolagem.
fixado: falso, snap: falso, flutuante: verdadeiro:
Definir apenas o valor flutuante como verdadeiro oculta o SliverAppBar ao rolar para baixo e começa a mostrar a imagem de fundo conforme rolamos para cima.
fixada: false, snap: true, floating: true:
Se desejar mantenha SliverAppBar oculto ao rolar para baixo e mostre a imagem de fundo completa ao rolar um pouco para cima, mesmo quando o primeiro item da lista não for mostrado. você pode definir apenas o snap e o flutuante como verdadeiros.
Adicionando AppBar dentro do SliverAppBar
É importante notar que SliverAppBar não é um substituto completo para o AppBar normal. A beleza de escrever aplicativos no Flutter é que você pode misturar e combinar widgets para criar algo novo.
Por exemplo, você pode se deparar com uma situação em que precisa mostrar um AppBar contendo uma caixa de pesquisa dentro do SliverAppBar.
Vejamos um exemplo. Abaixo está um aplicativo de comércio eletrônico em que a imagem do banner fica oculta ao rolar para baixo e a caixa de pesquisa permanece presa na parte superior.
Veja como fazer isso:
Scaffold (body: CustomScrollView (slivers:
A lista de itens é mostrada no SliverGrid . Como usamos CutomScrollView, não podemos usar o destino GridView aqui.
Adicionando TabBar com SliverAppBar
O TabBar é usado para mostrar diferentes categorias de conteúdo ou recursos disponíveis para os usuários. Em alguns casos, você pode querer mostrar o TabBar com SliverAppBar.
Vamos ver como adicionar o TabBar e fazê-lo se comportar como no exemplo a seguir:
Scaffold (body: DefaultTabController (comprimento: 3, filho: NestedScrollView (headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {return
O widget NestedScrollView é usado para retornar o cabeçalho como uma combinação de SliverAppBar e Widgets SliverPersistentHeader . SliverAppBar usa internamente SliverPersistentHeader para o efeito de encolhimento e crescimento. Você pode usar este widget para mostrar as guias abaixo do SliverAppBar.
TabBarView é fornecido no parâmetro body do widget NestedScrollView.
Veja como o código acima se traduz no design:
Fixando a TabBar
Se você olhar com atenção, o TabBar está oculto ao rolar para baixo. Para melhorar a experiência do usuário, você deve sempre manter a TabBar visível na parte superior ao rolar para baixo.
Definir o valor fixado como verdadeiro em SliverPersistentHeader resolverá este problema.
SliverPersistentHeader (delegado: MySliverPersistentHeaderDelegate (TabBar (guias: […],),), fixada: verdadeiro,)
Veja como funciona:
Ouvindo o status do SliverAppBar (expandido ou recolhido)
Se desejar escute o status do SliverAppBar para determinar se ele está expandido ou recolhido, você pode usar o valor retornado para alterar as configurações do SliverAppBar. Por exemplo, você pode alterar a cor do texto do título quando ele é expandido.
late ScrollController _scrollController;//———-@override void initState () {//TODO: implemente initState super.initState (); _scrollController=ScrollController ()..addListener (() {setState (() {_textColor=_isSliverAppBarExpanded? Colors.white: Colors.blue;});}); }//———-bool get _isSliverAppBarExpanded {return _scrollController.hasClients && _scrollController.offset> (200-kToolbarHeight); }//———-Scaffold (body: CustomScrollView (controlador: _scrollController, slivers:…,),); ScrollController é criado e atribuído a CustomScrollView O ouvinte é adicionado a ScrollController para calcular se SliverAppBar é expandido ou não. O valor retornado pelo ouvinte é usado para definir a cor do texto para o título. título “Goa” quando SliverAppBar é expandido:
Conclusão
Se você chegou até aqui, deve ter todo o conhecimento necessário para adicionar o SliverAppBar em seu aplicativo Flutter.
O código completo usado para este exemplo está disponível em GitHub .
