cupertino_tabbar

Visão geral do pacote

Orientação gerada a partir de informações públicas. Apenas para referência.

Um widget Flutter personalizável e simples que replica a barra de abas do estilo iOS 13, oferecendo uma experiência nativa em várias plataformas. Suporta animações suaves, ícones personalizados, rótulos e opções de estilização para corresponder aos princípios de design modernos do iOS. O widget é leve e fácil de integrar, sendo ideal para aplicativos que buscam uma estética iOS consistente no Android e outras plataformas. É particularmente útil para aplicações com navegação intensiva que exigem uma interface de abas limpa e minimalista.

Casos de uso

Navegação do estilo iOS em aplicativos multiplataforma
Barras de guia personalizadas com transições animadas
Navegação inferior simples, mas elegante
Aplicativos voltados para consistência da experiência do usuário no iOS
Substituindo a barra de guias padrão por visualizações aprimoradas

Principais recursos

imitação do design do iOS 13
Aparência altamente personalizável
Suporte a animação suave
Suporta ícones e rótulos
Compatibilidade multiplataforma
Integração fácil com projetos Flutter existentes

Indicado para

Desenvolvedores procurando componentes de interface do usuário nativos para iOS
Projetos que exigem navegação de guias minimalista
Aplicativos multiplataforma com foco no design do iOS
Equipes priorizando consistência visual
Iniciantes do Flutter explorando personalização da barra de guias

Considerações

Limitado ao estilo estético do iOS 13
Pode exigir estilos adicionais para plataformas não iOS
Não adequado para layouts de guias complexos
Melhor usado em conjunto com CupertinoTheme
Impacto potencial no desempenho com muitas abas

README original

Snapshot do README original do repositório-fonte vinculado. Consulte o repositório para o conteúdo mais recente.

A highly customisable and simple widget for having iOS 13 style tab bars.

It is highly recommended to read the documentation and run the example project on a real device to fully understand and inspect the full range of capabilities.

Media | Description | Installation | How-to-Use

Recent

[useShadow] is added. If set to true, a shadow will be displayed under the indicator that is much more similar to the actual iOS version. See Media for examples.
[allowScrollable], [fittedWhenScrollable], [animateWhenScrollable], [animateUntilScrolled], [outerHorizontalPadding] and [outerVerticalPadding] are added. These all work towards making an easy-to-use scrollable tab bar. Please refer to the documentation and the examples for instructions and see Media for examples.

Warning

Variables previously named as [horizontalPadding], [verticalPadding] and [expand] are now named [innerHorizontalPadding], [innerVerticalPadding] and [allowExpand].

Media

Watch on Youtube:

v1.1.0

v1.0.0

Description

This is a highly customisable and simple widget for having iOS 13 style tab bars.

How-to-Use

Simply create a CupertinoTabBar as shown in the example:

CupertinoTabBar(
  Colors.black                  //_backgroundColor
  Colors.white                  //_foregroundColor
  [...],                        //_widgets
  cupertinoTabBarValueGetter,   //_valueGetter
  (int index) {                 //_onTap
    setState(() {
      cupertinoTabBarValue = index;
    });
  },
  {Key key,
  useSeparators             : false,
  innerHorizontalPadding    : 10.0,
  innerVerticalPadding      : 10.0,
  borderRadius              : const BorderRadius.all(const Radius.circular(10.0)),
  curve                     : Curves.linearToEaseOut,
  duration                  : const Duration(milliseconds: 350),
  allowExpand               : false,
  allowScrollable           : false,
  fittedWhenScrollable      : false,
  animateWhenScrollable     : false,
  animateUntilScrolled      : false,
  outerHorizontalPadding    : 10.0,,
  outerVerticalPadding      : 0})
)

int cupertinoTabBarValue = 0;
int cupertinoTabBarValueGetter() => cupertinoTabBarValue;

Further Explanations:

For a complete set of descriptions for all parameters and methods, see the documentation.

Do not set both [allowExpand] and [allowScrollable] to true.

Notes

Any help, suggestion or criticism is appreciated!

Cheers.

Buscar pacotes, repositórios e categorias de apps