插件详情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