Buscar pacotes, repositórios e categorias de apps

ducafecatGuia do ecossistema Flutter
Capa de container_tab_indicator
Detalhes do pacotev0.3.0

container_tab_indicator

Crie seu próprio indicador de guia usando propriedades familiares como o Container.

AndroidiOSWebmacOSWindowsLinux
pub.dev Documentação da API Código-fonte
Downloads em 30 dias
6,8 mil
Curtidas
44
Pontos Pub
160

Instalar pacote

flutter pub add container_tab_indicator

Visão geral do pacote

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

ContainerTabIndicator é um pacote Flutter que permite aos desenvolvedores criar indicadores de guia personalizados usando propriedades familiares do Container, como cor, borda, preenchimento e margem. Ele oferece uma maneira flexível e intuitiva de projetar indicadores de guia sem depender dos widgets padrão do Material ou Cupertino. Ideal para aplicativos que exigem estilos visuais únicos ou branding consistente entre plataformas, suporta todas as principais plataformas Flutter, incluindo Android, iOS, Web, macOS, Windows e Linux.

Casos de uso

  • UIs de guia personalizadas
  • Consistência da marca
  • Designs de guia multiplataforma
  • indicadores de guia não materiais
  • Estilo de indicador dinâmico

Principais recursos

  • Estilo semelhante a contêiner
  • Independente de plataforma
  • Integração fácil
  • Controle flexível de layout
  • Suporta animações
  • Boilerplate mínimo

Indicado para

  • Designers procurando controle visual
  • Desenvolvedores criando navegação personalizada
  • Aplicativos com interfaces personalizadas
  • Aplicações multiplataforma
  • Equipes evitando padrões do Material

Considerações

  • Limitado ao uso do indicador de guia
  • Sem suporte embutido a animação
  • Requer posicionamento manual
  • Não adequado para layouts de guias complexos
  • Depende da estrutura pai TabBar

README original

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

ContainerTabIndicator

pub package

Add customized ContainerTabIndicator as an indicator for your TabBar. You can manipulate width, height, color, radius, border and positioning within Tab.

class ContainerTabIndicator extends Decoration {
  final double width;
  final double widthFraction;
  final double height;
  final double heightFraction;
  final EdgeInsetsGeometry padding;
  final Color color;
  final BorderRadius radius;
  final double borderWidth;
  final Color borderColor;
  ...
}

Example

The full example code can be found here.

import 'package:container_tab_indicator/container_tab_indicator.dart';

...

TabBar(
  tabs: [
    Text('First', style: TextStyle(color: Colors.black)),
    Text('Second', style: TextStyle(color: Colors.black)),
  ],
  indicator: ContainerTabIndicator(
    width: 16,
    height: 16,
    radius: BorderRadius.circular(8.0),
    padding: const EdgeInsets.only(left: 36),
    borderWidth: 2.0,
    borderColor: Colors.black,
  ),
),

example

Contributing

This package is still in early stages. To see the upcoming features, check the Issue board. If you notice any bugs not present in issues, please file a new issue. If you are willing to fix or enhance things yourself, you are very welcome to make a pull request.

Categorias

Guia

Repositório-fonte

Projetos que usam este pacote