Flutter边框切换开关插件border_toggle_switch的使用

Flutter边框切换开关插件border_toggle_switch的使用

Border Toggle Switch - 一个简单的、美观的底部边框切换开关小部件。它可以完全自定义所需的颜色、宽度、文本、圆角等。它还维护了选择状态，并返回选中的切换状态。

开始使用

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

dependencies:
  ...
  border_toggle_switch: ^0.0.1

然后导入该包：

import 'package:border_toggle_switch/border_toggle_switch.dart';

使用示例

示例1：带边框颜色、边框宽度、自定义高度和不同活动背景颜色的切换开关，并带有返回函数

BorderToggleSwitch(
  // 底部边框颜色
  bottomBorderColor: Colors.blue,
  // 活动状态下的标签名
  activeToggleName: "左",
  // 非活动状态下的标签名
  inActiveToggleName: "右",
  // 点击时的回调函数
  isClicked: (value) {
    debugPrint(value); // 打印当前点击的状态
  },
  // 是否显示边框
  isBorder: true,
  // 活动状态下的背景颜色
  activeBackgroundColor: Colors.white,
  // 非活动状态下的背景颜色
  inActiveBackgroundColor: Colors.black12,
  // 高度
  height: 45,
  // 边框大小
  borderSize: 3,
  // 圆角半径
  radius: 15,
  // 四个角的圆角半径
  bottomRightRadius: 15,
  bottomLeftRadius: 15,
  topRightRadius: 15,
  topLeftRadius: 15,
  // 非活动状态下的标签样式
  inActiveToggleNameStyle: const TextStyle(fontWeight: FontWeight.bold, color: Colors.black),
  // 活动状态下的标签样式
  activeToggleNameStyle: const TextStyle(fontWeight: FontWeight.bold, color: Colors.blue),
)

示例代码

以下是完整的示例代码：

import 'package:border_toggle_switch/border_toggle_switch.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(
        primarySwatch: Colors.blue,
      ),
      home: const ToggleView(),
    );
  }
}

class ToggleView extends StatefulWidget {
  const ToggleView({Key? key}) : super(key: key);
  
  [@override](/user/override)
  State<ToggleView> createState() => _ToggleViewState();
}

class _ToggleViewState extends State<ToggleView> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        padding: const EdgeInsets.all(10),
        child: Center(
          child: BorderToggleSwitch(
            bottomBorderColor: Colors.blue,
            activeToggleName: "左",
            inActiveToggleName: "右",
            isClicked: (value) {
              debugPrint(value); // 打印当前点击的状态
            },
            isBorder: true,
            activeBackgroundColor: Colors.white,
            inActiveBackgroundColor: Colors.black12,
            height: 45,
            borderSize: 3,
            radius: 15,
            bottomRightRadius: 15,
            bottomLeftRadius: 15,
            topRightRadius: 15,
            topLeftRadius: 15,
            inActiveToggleNameStyle: const TextStyle(fontWeight: FontWeight.bold, color: Colors.black),
            activeToggleNameStyle: const TextStyle(fontWeight: FontWeight.bold, color: Colors.blue),
          ),
        ),
      ),
    );
  }
}