套件詳情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

使用此套件的專案

暫無相關資料。