Detalhes do pacotev3.2.0

flutter_advanced_segment

Um widget de segmento avançado, que pode ser totalmente personalizado com uma série de propriedades. Experimente e aproveite!

AndroidiOSWebmacOSWindowsLinux

pub.dev Documentação da API Código-fonte

Downloads em 30 dias: 7,1 mil
Curtidas: 118
Pontos Pub: 150

Instalar pacote

flutter pub add flutter_advanced_segment

Visão geral do pacote

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

Um widget de segmento altamente personalizável para Flutter, projetado para aprimorar a navegação por guias com opções extensas de estilo e configuração. Suporta todas as principais plataformas, incluindo Android, iOS, Web, macOS, Windows e Linux. Os desenvolvedores podem personalizar a aparência e o comportamento dos segmentos com inúmeras propriedades, permitindo integração perfeita em diversos designs de interface. Ideal para criar interfaces intuitivas e interativas com transições suaves e feedback responsivo.

Casos de uso

Navegação de guia personalizada
Agrupamento de campos de formulário
Alternância de conteúdo dinâmico
seletores de preferência do usuário
Filtros de painel interativo
Controles de seleção multiestados

Principais recursos

Aparência totalmente personalizável
Compatibilidade multiplataforma
Animações de transição suave
Configuração extensa de propriedades
Suporte para layouts horizontal e vertical
Adaptabilidade de design responsivo

Indicado para

Desenvolvedores construindo interfaces complexas
Designers que precisam de componentes de guia flexíveis
Aplicativos que exigem interações dinâmicas de segmentos
Projetos com necessidades de consistência rigorosa da interface
Equipes usando Flutter para aplicativos multiplataforma

Considerações

Pode exigir conhecimento adicional sobre estilos
Impacto no desempenho com muitos segmentos
Temas internos limitados
Não otimizado para conjuntos de dados muito grandes
Requer gerenciamento cuidadoso do estado
Complexidade potencial em implementações aninhadas

README original

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

flutter_advanced_segment

An advanced segment widget, that can be fully customized with bunch of properties, just try it and enjoy!

Examples

Regular Segment

final _controller = ValueNotifier('all');
//...
AdvancedSegment(
  controller: _controller,
  segments: const {
    'all': 'All',
    'starred': 'Starred',
  },
),

Colorized Segment

AdvancedSegment(
  controller: _controller,
  segments: const {'all': 'All', 'starred': 'Starred'},
  decoration: BoxDecoration(
    color: const Color(0xFFFF6B35),
    borderRadius: BorderRadius.circular(4),
  ),
  sliderColor: const Color(0xFFD63B0E),
  activeStyle: const TextStyle(
    color: Colors.white,
    fontWeight: FontWeight.w600,
  ),
  inactiveStyle: TextStyle(
    color: Colors.white.withValues(alpha: 0.7),
  ),
),

Gradient Decoration

AdvancedSegment(
  controller: _controller,
  segments: const {'all': 'All', 'starred': 'Starred'},
  decoration: BoxDecoration(
    gradient: const LinearGradient(
      colors: [Color(0xFFFF2D55), Color(0xFFFF9500)],
    ),
    borderRadius: BorderRadius.circular(16),
  ),
  sliderColor: Colors.white,
  activeStyle: const TextStyle(
    color: Color(0xFFFF2D55),
    fontWeight: FontWeight.w700,
  ),
  inactiveStyle: TextStyle(
    color: Colors.white.withValues(alpha: 0.85),
  ),
),

Custom Slider Decoration

AdvancedSegment(
  controller: _controller,
  segments: const {'all': 'All', 'starred': 'Starred'},
  decoration: BoxDecoration(
    color: const Color(0xFF2C2C2E),
    borderRadius: BorderRadius.circular(50),
  ),
  sliderDecoration: BoxDecoration(
    color: const Color(0xFFBF5AF2),
    borderRadius: BorderRadius.circular(50),
    border: Border.all(
      color: const Color(0xFFDA8FFF),
      width: 1.5,
    ),
  ),
  activeStyle: const TextStyle(
    color: Colors.white,
    fontWeight: FontWeight.w700,
  ),
  inactiveStyle: TextStyle(
    color: Colors.white.withValues(alpha: 0.5),
  ),
),

AdvancedSegment Parameters

Parameter	Description	Type	Default
`controller`	Controls segments selection	ValueNotifier
`segments`	Map of presented segments	Map<K, V>	required
`activeStyle`	Active segment text style	TextStyle	fontWeight: FontWeight.w600
`inactiveStyle`	Inactive segment text style	TextStyle
`decoration`	Layout decoration (color, border, borderRadius, gradient, etc.)	BoxDecoration	color: 0x42000000, borderRadius: 8.0
`sliderColor`	Color of the slider thumb	Color	Colors.white
`sliderOffset`	Gap between slider and layout	double	2.0
`itemPadding`	Padding of each item	EdgeInsets	EdgeInsets.symmetric(h: 15, v: 10)
`animationDuration`	Selection animation duration	Duration	Duration(milliseconds: 250)
`shadow`	Slider shadow	List<BoxShadow>	BoxShadow(blurRadius: 8.0)
`sliderDecoration`	Custom slider decoration (overrides sliderColor, borderRadius, shadow)	BoxDecoration
`enableDrag`	Whether drag gesture is enabled	bool	true

Categorias

Guia

Repositório-fonte

alex-melnyk/flutter_advanced_segment

flutter_advanced_segment

☆ 23 Estrelas⑂ 11 Forks

DartSwiftfluttersegment

Projetos que usam este pacote

Ainda não há dados.