套件詳情v2.0.0

flutter_toggle_tab

用於在 Flutter 上建立美觀且可自訂的切換標籤小部件的程式庫

AndroidiOSWebmacOSWindowsLinux

pub.dev API 文件原始碼

近 30 天下載: 1.1萬
喜歡數: 121
Pub 分數: 160

安裝套件

flutter pub add flutter_toggle_tab

套件介紹

根據套件公開資料產生的選型評估，僅供參考。

一個 Flutter 套件，讓開發者能夠建立視覺上吸引人且高度可自訂的切換標籤小部件。它提供一個彈性、易於使用的介面，用於實作具有平滑動畫和跨所有主要平台的響應式行為的分段控制。非常適合用於內容過濾、在不同檢視之間切換或在乾淨現代的使用者介面上選擇選項。該程式庫支援自訂樣式、對齊方式和動態內容呈現，適用於簡單與複雜的各種使用情境。

適用情境

依類別篩選資料
在應用檢視之間切換
建立表單輸入選擇器
實作主題切換
建構導航標籤
自訂分段控制項

主要特色

高度可自訂的外觀
平滑的動畫過渡
跨平台相容性
對動態內容的支援
與現有組件的輕鬆整合
響應式設計處理

適合對象

開發現代 UI 的開發者
需要分段選擇的應用程式
尋求視覺精緻的設計人員
多平台專案
注重可重用組件的團隊

使用建議

需要了解 Flutter 布局原則
可能需要額外的樣式來支援複雜主題
大量標籤頁帶來的效能影響
有限的內建可存取性功能
未針對極高頻率的更新進行優化

原始 README

以下為關聯原始碼儲存庫的 README 原文快照，最新內容請造訪原始碼儲存庫。

Flutter Tab Toggle

A Beautiful and Simple Toggle Tab widget. It can be fully customized with desired icons, width, colors, text, corner radius, etc. It also maintains selection state.

Getting Started

In the pubspec.yaml of your flutter project, add the following dependency:

dependencies:
  flutter_toggle_tab: "^latestVersion"

Import it:

import 'package:flutter_toggle_tab/flutter_toggle_tab.dart';

Usage Examples

Basic tab/toggle switch


// Here default theme colors are used for activeBgColor, activeFgColor, inactiveBgColor and inactiveFgColor
FlutterToggleTab
(
  width: 90, // width in percent
  borderRadius: 30,
  height: 50,
  selectedIndex: _tabTextIndexSelected,
  selectedBackgroundColors: [Colors.blue, Colors.blueAccent],
  selectedTextStyle: TextStyle(
  color: Colors.white,
  fontSize: 18,
  fontWeight: FontWeight.w700),
  unSelectedTextStyle: TextStyle(
  color: Colors.black87,
  fontSize: 14,
  fontWeight: FontWeight.w500),
  dataTabs: _listTextTabToggle,
  selectedLabelIndex: (index) {
    setState(() {
        _tabTextIndexSelected = index;
    });
  },
  isScroll:false,
)

Basic tab/toggle switch with Custom Counter Widget


// Here default theme colors are used for activeBgColor, activeFgColor, inactiveBgColor and inactiveFgColor
FlutterToggleTab
(
  width: 90, // width in percent
  borderRadius: 30,
  height: 50,
  selectedIndex: _tabTextIndexSelected,
  selectedBackgroundColors: [Colors.blue, Colors.blueAccent],
  selectedTextStyle: TextStyle(
  color: Colors.white,
  fontSize: 18,
  fontWeight: FontWeight.w700),
  unSelectedTextStyle: TextStyle(
  color: Colors.black87,
  fontSize: 14,
  fontWeight: FontWeight.w500),
  dataTabs: _listTextTabToggleCounter,
  selectedLabelIndex: (index) {
    setState(() {
        _tabTextIndexSelected = index;
    });
  },
  isScroll:false,
)

Basic tab/toggle switch with Icon

FlutterToggleTab
(
  width: 50,
  borderRadius: 15,
  selectedTextStyle: TextStyle(
  color: Colors.white,
  fontSize: 18,
  fontWeight: FontWeight.w600),
  unSelectedTextStyle: TextStyle(
  color: Colors.blue,
  fontSize: 14,
  fontWeight: FontWeight.w400),
  dataTabs: _listGenderText,
  selectedIndex: _tabTextIconIndexSelected,
  selectedLabelIndex: (index) {
    setState(() {
      _tabTextIconIndexSelected = index;
    });
  },
)

Basic tab/toggle switch with Icon Only and add margin on selected item

FlutterToggleTab
(
  width: 40,
  borderRadius: 15,
  selectedIndex: _tabIconIndexSelected,
  selectedTextStyle: TextStyle(
  color: Colors.white,
  fontSize: 18,
  fontWeight: FontWeight.w600),
  unSelectedTextStyle: TextStyle(
  color: Colors.grey,
  fontSize: 14,
  fontWeight: FontWeight.w400),
  dataTabs: _listIconTabToggle,
  selectedLabelIndex: (index) {
    setState(() {
      _tabIconIndexSelected = index;
    });
  },
  marginSelected: EdgeInsets.symmetric(horizontal: 4,vertical:4),
)

Update selected tab Programmatically

FlutterToggleTab
(
  width: 90,
  borderRadius: 15,
  selectedIndex: _tabSelectedIndexSelected,
  selectedTextStyle: TextStyle(
  color: Colors.white,
  fontSize: 18,
  fontWeight: FontWeight.w600),
  unSelectedTextStyle: TextStyle(
  color: Colors.grey,
  fontSize: 14,
  fontWeight: FontWeight.w400),
  dataTabs: _listTextSelectedToggle,
  selectedLabelIndex: (index) {
    setState(() {
      _tabSelectedIndexSelected = index;
    });
  },
)

Available Parameters

Param	isRequired
List<DataTab> dataTabs	Yes
Function(int) selectedLabelIndex	Yes
TextStyle selectedTextStyle default:Theme.of(context).textTheme.bodyMedium,	No
TextStyle unSelectedTextStyle default:Theme.of(context).textTheme.bodyMedium,	No
int selectedIndex (listener for index selected) see on example	Yes
double width (in Percent of width Screen) default: 100	No
double height (double) default: 45	No
double iconSize	No
double borderRadius (double) default 30	No
List<Color> selectedBackgroundColors default : [ Theme.of(context).primaryColor]	No
List<Color> unSelectedBackgroundColors default [ Color(0xffe0e0e0)]	No
Alignment begin default : Alignment.topCenter	No
Alignment end default : Alignment.bottomCenter	No
bool isScroll default : true	No
EdgeInsets marginSelected default : EdgeInsets.zero	No
bool isShadowEnable default : true	No
bool isInnerShadowEnable default : true	No