Flutter开关切换插件fk_toggle的使用

Flutter开关切换插件fk_toggle的使用

插件简介

fk_toggle 是一个简单的Flutter切换按钮小部件，支持显示文本标签和图标，并且可以设置多个值进行切换，而不仅仅是两个值。此外，您还可以自定义大小和颜色。

特性

• Toggle Items：提供切换事件回调。
• 显示文本：可以在切换按钮上显示文本。
• 显示图标：可以在切换按钮上显示图标。
• 自定义大小和颜色：可以根据需要自定义切换按钮的大小和颜色。

安装方法

1. 在 pubspec.yaml 文件中添加依赖：

   dependencies:
     fk_toggle: ^0.1.4
   

2. 使用命令行安装依赖：

   $ flutter pub get
   

3. 在项目中导入插件：

   import 'package:fk_toggle/fk_toggle.dart';
   

使用示例

以下是一个完整的示例代码，展示了如何使用 fk_toggle 插件创建不同的切换按钮：

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        scaffoldBackgroundColor: const Color(0xfff5f5f5),
        primarySwatch: Colors.blue,
      ),
      home: const FkToggleSample(),
    );
  }
}

class FkToggleSample extends StatelessWidget {
  const FkToggleSample({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 定义切换事件回调
    final OnSelected selected = ((index, instance) {
      ScaffoldMessenger.of(context).hideCurrentSnackBar();
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('Select $index, toggle ${instance.labels[index]}')),
      );
    });

    // 创建多个 FkToggle 实例
    final toggles = [
      FkToggle(
        width: 50,
        height: 30,
        labels: const ['1', '2'],
        onSelected: selected,
      ),
      FkToggle(
        width: 100,
        height: 50,
        labels: const ['one', 'two'],
        fontSize: 24,
        cornerRadius: 4,
        onSelected: selected,
      ),
      FkToggle(
        width: 50,
        height: 30,
        labels: const ['1', '2', '3', '4', '5'],
        onSelected: selected,
      ),
      FkToggle(
        width: 60,
        height: 50,
        labels: const ['ON', 'OFF'],
        cornerRadius: 30,
        onSelected: selected,
      ),
      FkToggle(
        width: 60,
        height: 40,
        icons: const [
          Icon(Icons.add_reaction),
          Icon(Icons.add_reaction_outlined),
        ],
        labels: const ['', ''],
        onSelected: selected,
      ),
      FkToggle(
        width: 120,
        height: 50,
        labels: const ['Orange', 'White'],
        selectedColor: Colors.orange,
        backgroundColor: Colors.white,
        onSelected: selected,
      ),
      FkToggle(
        width: 100,
        height: 50,
        icons: const [
          Icon(Icons.add_reaction),
        ],
        labels: const ['', 'smile'],
        onSelected: selected,
      ),
      FkToggle(
        width: 120,
        height: 50,
        selectedColor: Colors.red,
        backgroundColor: Colors.white,
        enabledElementColor: Colors.yellow,
        disabledElementColor: Colors.grey,
        icons: const [
          Icon(Icons.sentiment_satisfied_alt),
          Icon(Icons.emoji_emotions),
        ],
        labels: const ['Smile', 'Good'],
        onSelected: selected,
      ),
    ];

    return Scaffold(
      appBar: AppBar(title: const Text('Sample Toggle Switches')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment: MainAxisAlignment.center,
          children: toggles
              .map((e) => Padding(
                    padding: const EdgeInsets.all(10.0),
                    child: e,
                  ))
              .toList(),
        ),
      ),
    );
  }
}