Flutter标签切换插件flutter_toggle_tab的使用

发布于 1周前 作者 itying888 来自 Flutter

Flutter标签切换插件flutter_toggle_tab的使用

简介

flutter_toggle_tab 是一个美观且简单的Tab/Toggle切换插件。它支持自定义图标、宽度、颜色、文本和圆角等属性，并能保持选择状态。

pub package

开始使用

添加依赖

在项目的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  flutter_toggle_tab: "^latestVersion"

导入包

在需要使用的Dart文件中导入插件：

import 'package:flutter_toggle_tab/flutter_toggle_tab.dart';

使用示例

基础Tab/Toggle切换

FlutterToggleTab(
  width: 90, // 宽度百分比
  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,
)

包含计数器的小部件

FlutterToggleTab(
  width: 90, // 宽度百分比
  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,
)

包含图标的Tab/Toggle切换

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;
    });
  },
)

图标Tab/Toggle切换并为选中的项添加边距

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),
)

程序化更新选中的Tab

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;
    });
  },
)

参数说明

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

示例Demo

以下是完整的示例代码，您可以直接运行来查看效果：

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_toggle_tab/flutter_toggle_tab.dart';

void main() {
  runApp(MyApp());
  SystemChrome.setSystemUIOverlayStyle(
    const SystemUiOverlayStyle(
      statusBarColor: Colors.transparent,
      statusBarIconBrightness: Brightness.dark,
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final ValueNotifier<int> _tabIndexBasicToggle = ValueNotifier(1);
  final ValueNotifier<int> _tabIndexBasicToggleCounter = ValueNotifier(1);
  final ValueNotifier<int> _tabIndexTextWithIcon = ValueNotifier(0);
  final ValueNotifier<int> _tabIndexIconButton = ValueNotifier(0);
  final ValueNotifier<int> _tabIndexUpdateProgrammatically = ValueNotifier(0);

  List<DataTab> get _listTextTabToggle => [
        DataTab(title: "Tab A (10)"),
        DataTab(title: "Tab B (5)"),
        DataTab(title: "Tab C (19)"),
      ];

  late final _listTextTabToggleCounter = [
    DataTab(
      title: "Tab A",
      counterWidget: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 4),
        child: DecoratedBox(
          decoration: const BoxDecoration(color: Colors.red, shape: BoxShape.circle),
          child: Padding(
            padding: const EdgeInsets.all(6),
            child: Text(
              "1",
              style: Theme.of(context).textTheme.labelSmall?.copyWith(color: Colors.white),
            ),
          ),
        ),
      ),
    ),
    DataTab(title: "Tab B (5)"),
    DataTab(title: "Tab C (19)"),
  ];

  List<DataTab> get _listTextSelectedToggle => [
        DataTab(title: "Select A (10)"),
        DataTab(title: "Select B (5)"),
        DataTab(title: "Select C (19)"),
      ];

  List<DataTab> get _listIconTabToggle => [
        DataTab(icon: Icons.person),
        DataTab(icon: Icons.pregnant_woman),
      ];

  List<DataTab> get _listGenderText => [
        DataTab(title: "Male", icon: Icons.person),
        DataTab(title: "Female", icon: Icons.pregnant_woman),
      ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Flutter Tab Toggle"),
        elevation: 0,
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.symmetric(vertical: 36, horizontal: 8),
        child: Column(
          children: <Widget>[
            _basicTabToggle(),
            ..._divider(),
            _basicTabToggleWithCounter(),
            ..._divider(),
            _textWithIcon(),
            ..._divider(),
            _iconButton(),
            ..._divider(),
            _updateProgrammatically(),
          ],
        ),
      ),
    );
  }

  List<Widget> _divider() => [
        SizedBox(height: heightInPercent(3, context)),
        const Divider(thickness: 2),
        SizedBox(height: heightInPercent(3, context)),
      ];

  Widget _basicTabToggle() => Column(
        children: [
          /// Basic Toggle Sample
          SizedBox(height: heightInPercent(3, context)),
          const Text(
            "Basic Tab Toggle",
            style: TextStyle(fontSize: 20, fontStyle: FontStyle.italic),
          ),
          SizedBox(height: heightInPercent(3, context)),
          ValueListenableBuilder(
            valueListenable: _tabIndexBasicToggle,
            builder: (context, currentIndex, _) {
              return FlutterToggleTab(
                width: 90,
                borderRadius: 30,
                height: 50,
                selectedIndex: currentIndex,
                selectedBackgroundColors: const [
                  Colors.blue,
                  Colors.blueAccent,
                ],
                selectedTextStyle: const TextStyle(
                  color: Colors.white,
                  fontSize: 18,
                  fontWeight: FontWeight.w700,
                ),
                unSelectedTextStyle: const TextStyle(
                  color: Colors.black87,
                  fontSize: 14,
                  fontWeight: FontWeight.w500,
                ),
                dataTabs: _listTextTabToggle,
                selectedLabelIndex: (index) => _tabIndexBasicToggle.value = index,
                isScroll: false,
              );
            },
          ),
          TextButton(
            onPressed: () => _tabIndexBasicToggle.value = 2,
            child: const Text("Change to Index 2"),
          ),
          SizedBox(height: heightInPercent(3, context)),
          ValueListenableBuilder(
            valueListenable: _tabIndexBasicToggle,
            builder: (context, currentIndex, _) => Text(
              "Index selected : $currentIndex",
              style: const TextStyle(fontSize: 20),
            ),
          ),
        ],
      );

  Widget _basicTabToggleWithCounter() => Column(
        children: [
          /// Basic Toggle Sample
          SizedBox(height: heightInPercent(3, context)),
          const Text(
            "Basic Tab Toggle with Counter Widget",
            style: TextStyle(fontSize: 20, fontStyle: FontStyle.italic),
          ),
          SizedBox(height: heightInPercent(3, context)),
          ValueListenableBuilder(
            valueListenable: _tabIndexBasicToggleCounter,
            builder: (context, currentIndex, _) {
              return FlutterToggleTab(
                width: 90,
                borderRadius: 30,
                height: 50,
                selectedIndex: currentIndex,
                selectedBackgroundColors: const [
                  Colors.blue,
                  Colors.blueAccent,
                ],
                selectedTextStyle: const TextStyle(
                  color: Colors.white,
                  fontSize: 18,
                  fontWeight: FontWeight.w700,
                ),
                unSelectedTextStyle: const TextStyle(
                  color: Colors.black87,
                  fontSize: 14,
                  fontWeight: FontWeight.w500,
                ),
                dataTabs: _listTextTabToggleCounter,
                selectedLabelIndex: (index) => _tabIndexBasicToggleCounter.value = index,
                isScroll: false,
              );
            },
          ),
          TextButton(
            onPressed: () => _tabIndexBasicToggleCounter.value = 0,
            child: const Text("Change to Index 0"),
          ),
          SizedBox(height: heightInPercent(3, context)),
          ValueListenableBuilder(
            valueListenable: _tabIndexBasicToggleCounter,
            builder: (context, currentIndex, _) => Text(
              "Index selected : $currentIndex",
              style: const TextStyle(fontSize: 20),
            ),
          ),
        ],
      );

  Widget _textWithIcon() => Column(
        children: [
          /// Text with icon sample
          SizedBox(height: heightInPercent(3, context)),
          const Text(
            "Text With Icon",
            style: TextStyle(fontSize: 20, fontStyle: FontStyle.italic),
          ),
          Padding(
            padding: const EdgeInsets.all(16),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                const Text(
                  "Select your sex : ",
                  style: TextStyle(fontSize: 20),
                ),
                ValueListenableBuilder(
                  valueListenable: _tabIndexTextWithIcon,
                  builder: (context, currentIndex, _) => FlutterToggleTab(
                    width: 50,
                    borderRadius: 15,
                    selectedTextStyle: const TextStyle(
                      color: Colors.white,
                      fontSize: 18,
                      fontWeight: FontWeight.w600,
                    ),
                    unSelectedTextStyle: const TextStyle(
                      color: Colors.blue,
                      fontSize: 14,
                      fontWeight: FontWeight.w400,
                    ),
                    dataTabs: _listGenderText,
                    selectedIndex: currentIndex,
                    selectedLabelIndex: (index) => _tabIndexTextWithIcon.value = index,
                  ),
                ),
              ],
            ),
          ),

          /// Icon with Text Button Sample
          SizedBox(height: heightInPercent(3, context)),
          ValueListenableBuilder(
            valueListenable: _tabIndexTextWithIcon,
            builder: (context, currentIndex, _) => Text(
              "Selected sex : ${_listGenderText[currentIndex].title} ",
              style: const TextStyle(fontSize: 20),
            ),
          ),
        ],
      );

  Widget _iconButton() => Column(
        children: [
          /// Icon button sample
          const Text(
            "With Icon Only and Implement margin for selected item",
            textAlign: TextAlign.center,
            style: TextStyle(fontSize: 20, fontStyle: FontStyle.italic),
          ),
          Padding(
            padding: const EdgeInsets.all(16),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                const Text(
                  "Select your sex : ",
                  style: TextStyle(fontSize: 20),
                ),
                ValueListenableBuilder(
                  valueListenable: _tabIndexIconButton,
                  builder: (context, currentIndex, _) => FlutterToggleTab(
                    width: 40,
                    borderRadius: 15,
                    selectedIndex: currentIndex,
                    selectedTextStyle: const TextStyle(
                      color: Colors.white,
                      fontSize: 18,
                      fontWeight: FontWeight.w600,
                    ),
                    unSelectedTextStyle: const TextStyle(
                      color: Colors.grey,
                      fontSize: 14,
                      fontWeight: FontWeight.w400,
                    ),
                    dataTabs: _listIconTabToggle,
                    iconSize: 40,
                    selectedLabelIndex: (index) => _tabIndexIconButton.value = index,
                    marginSelected: const EdgeInsets.symmetric(
                      horizontal: 4,
                      vertical: 4,
                    ),
                  ),
                ),
              ],
            ),
          ),
          ValueListenableBuilder(
            valueListenable: _tabIndexIconButton,
            builder: (context, currentIndex, _) => Text(
              "Selected sex index: $currentIndex",
              style: const TextStyle(fontSize: 20),
            ),
          ),
        ],
      );

  Widget _updateProgrammatically() => Column(
        children: [
          const Text(
            "Update selected programmatically  ",
            style: TextStyle(fontSize: 20, fontStyle: FontStyle.italic),
          ),
          Padding(
            padding: const EdgeInsets.all(16),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                const Text(
                  "Select your sex : ",
                  style: TextStyle(fontSize: 20),
                ),
                SizedBox(height: heightInPercent(3, context)),
                ValueListenableBuilder(
                  valueListenable: _tabIndexUpdateProgrammatically,
                  builder: (context, currentIndex, _) => FlutterToggleTab(
                    width: 85,
                    borderRadius: 15,
                    selectedIndex: currentIndex,
                    selectedTextStyle: const TextStyle(
                      color: Colors.white,
                      fontSize: 18,
                      fontWeight: FontWeight.w600,
                    ),
                    unSelectedTextStyle: const TextStyle(
                      color: Colors.grey,
                      fontSize: 14,
                      fontWeight: FontWeight.w400,
                    ),
                    dataTabs: _listTextSelectedToggle,
                    selectedLabelIndex: (index) {
                      _tabIndexUpdateProgrammatically.value = index;
                    },
                  ),
                ),
                TextButton(
                  onPressed: () => _tabIndexUpdateProgrammatically.value = 2,
                  child: const Text("Select C"),
                ),
              ],
            ),
          ),
          SizedBox(height: heightInPercent(3, context)),
          ValueListenableBuilder(
            valueListenable: _tabIndexUpdateProgrammatically,
            builder: (context, currentIndex, _) => Text(
              "Selected sex index: $currentIndex ",
              style: const TextStyle(fontSize: 20),
            ),
          ),
        ],
      );

  double heightInPercent(double percent, BuildContext context) {
    final toDouble = percent / 100;
    return MediaQuery.of(context).size.height * toDouble;
  }
}

通过以上内容，您应该能够很好地理解和使用 flutter_toggle_tab 插件。如果有任何问题或需要进一步的帮助，请随时提问！


更多关于Flutter标签切换插件flutter_toggle_tab的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter标签切换插件flutter_toggle_tab的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是一个关于如何使用 flutter_toggle_tab 插件在 Flutter 应用中实现标签切换的代码示例。flutter_toggle_tab 插件允许你创建带有切换动画的标签栏。

首先，确保你已经在 pubspec.yaml 文件中添加了 flutter_toggle_tab 依赖项：

dependencies:
  flutter:
    sdk: flutter
  flutter_toggle_tab: ^x.y.z  # 替换为最新版本号

然后运行 flutter pub get 来获取依赖项。

接下来，你可以按照以下步骤在你的 Flutter 应用中使用 flutter_toggle_tab：

1. 导入包

在你的 Dart 文件中导入 flutter_toggle_tab 包：

import 'package:flutter/material.dart';
import 'package:flutter_toggle_tab/flutter_toggle_tab.dart';

2. 创建主应用

创建一个包含 ToggleTabBar 和 ToggleTabView 的主应用：

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ToggleTabScaffold(
        appBar: AppBar(
          title: Text('Flutter Toggle Tab Example'),
        ),
        defaultTab: 0,  // 默认选中的标签索引
        tabs: [
          ToggleTab(icon: Icons.home, title: 'Home'),
          ToggleTab(icon: Icons.search, title: 'Search'),
          ToggleTab(icon: Icons.settings, title: 'Settings'),
        ],
        builder: (BuildContext context, int index) {
          switch (index) {
            case 0:
              return Center(child: Text('Home Page'));
            case 1:
              return Center(child: Text('Search Page'));
            case 2:
              return Center(child: Text('Settings Page'));
            default:
              return Container();
          }
        },
      ),
    );
  }
}

3. 运行应用

现在你可以运行你的 Flutter 应用，应该会看到一个带有标签切换功能的简单应用。每个标签都有对应的页面内容，并且切换时会有动画效果。

注意事项

  • ToggleTabScaffold 是 flutter_toggle_tab 提供的用于包裹整个标签切换结构的 Widget。
  • ToggleTab 用于定义每个标签的图标和标题。
  • builder 函数根据当前选中的标签索引返回相应的页面内容。

自定义和扩展

你可以进一步自定义 ToggleTabScaffold 的属性，比如添加背景颜色、修改动画效果等。flutter_toggle_tab 提供了很多自定义选项，你可以查阅其官方文档获取更多信息。

这个示例展示了如何使用 flutter_toggle_tab 插件在 Flutter 应用中实现标签切换功能。希望这对你有所帮助！

回到顶部