插件详情v3.2.0

flutter_advanced_segment

一个高级的分段控件，可以通过大量属性进行完全自定义，快来试试吧，享受其中！

AndroidiOSWebmacOSWindowsLinux

pub.dev API 文档源代码

近 30 天下载: 7120
喜欢数: 118
Pub 分数: 150

安装插件

flutter pub add flutter_advanced_segment

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

一个高度可定制的 Flutter 段落小部件，专为增强标签导航而设计，提供广泛的样式和配置选项。支持所有主要平台，包括 Android、iOS、Web、macOS、Windows 和 Linux。开发者可以通过众多属性自定义段落的外观和行为，使其无缝集成到各种 UI 设计中。非常适合创建直观、交互性强的界面，具有平滑的过渡效果和响应式反馈。

适合场景

自定义标签导航
表单字段分组
动态内容切换
用户偏好选择器
交互式仪表板筛选器
多状态选择控件

主要特点

完全可自定义的外观
跨平台兼容性
平滑过渡动画
广泛的属性配置
支持横向和纵向布局
响应式设计适应性

适合对象

开发复杂 UI 的开发者
需要灵活标签组件的设计人员
需要动态段交互的应用程序
需要严格UI一致性的项目
使用 Flutter 开发多平台应用的团队

使用建议

可能需要额外的样式知识
大量片段带来的性能影响
有限的内置主题
未针对非常大的数据集进行优化
需要仔细的状态管理
嵌套实现中的潜在复杂性

原始 README

以下为关联源码仓库的 README 原文快照，最新内容请访问源码仓库。

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

所属分类

标签页

源码仓库

alex-melnyk/flutter_advanced_segment

flutter_advanced_segment

☆ 23 星标⑂ 11 复刻

DartSwiftfluttersegment

使用此插件的项目

暂无相关数据。