Flutter可滑动切换开关插件swipable_toggle_switch的使用

Flutter可滑动切换开关插件swipable_toggle_switch的使用

Swipable Toggle Switch 是一个提供了带有值的可滑动切换按钮的包。它为你的滑动切换体验提供了平滑的滑动手感，并且你可以根据需要自定义背景颜色和切换颜色。

完整示例Demo

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

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

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

  // 这个widget是你的应用的根组件。
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.pink, // 设置背景颜色为粉色
      body: SafeArea(
        child: Column(
          children: [
            Expanded(
              child: Center(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    // 第一个SwipableToggleSwitch
                    SwipableToggleSwitch(
                      values: const ["°C", "°F"], // 可选值
                      width: 350, // 按钮宽度
                      onToggleCallback: (value) {}, // 切换时的回调函数
                      buttonColor: const Color(0xFF0A3157), // 按钮颜色
                      backgroundColor: const Color(0xFFB5C1CC), // 背景颜色
                      textColor: const Color(0xFFFFFFFF), // 文字颜色
                    ),
                    const SizedBox(height: 20,), // 添加间距

                    // 第二个SwipableToggleSwitch
                    SwipableToggleSwitch(
                      values: const ["Male", "Female"], // 可选值
                      width: 650, // 按钮宽度
                      onToggleCallback: (value) {}, // 切换时的回调函数
                      boxShape: BoxShape.rectangle, // 按钮形状
                      buttonColor: const Color(0xFF0A3157), // 按钮颜色
                      backgroundColor: const Color(0xFFB5C1CC), // 背景颜色
                      textColor: const Color(0xFFFFFFFF), // 文字颜色
                    ),
                    const SizedBox(height: 20,), // 添加间距

                    // 第三个SwipableToggleSwitch
                    SwipableToggleSwitch(
                      values: const ["ON", "OFF"], // 可选值
                      width: 650, // 按钮宽度
                      onToggleCallback: (value) {}, // 切换时的回调函数
                      boxShape: BoxShape.rectangle, // 按钮形状
                      buttonColor: const Color(0xFF0A3157), // 按钮颜色
                      backgroundColor: const Color(0xFFB5C1CC), // 背景颜色
                      textColor: const Color(0xFFFFFFFF), // 文字颜色
                    ),
                  ],
                ),
              )
            )
          ],
        ),
      ),
    );
  }
}

代码解释

1. 导入依赖：

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

2. 主应用类：

   class MyApp extends StatelessWidget {
     const MyApp({Key? key}) : super(key: key);
   
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         title: 'Flutter Demo',
         theme: ThemeData(
           primarySwatch: Colors.blue,
         ),
         home: const MyHomePage(title: 'Flutter Demo Home Page'),
       );
     }
   }
   

   • 创建了一个基本的MaterialApp，设置了主题和主页。

3. 主页类：

   class MyHomePage extends StatefulWidget {
     const MyHomePage({Key? key, required this.title}) : super(key: key);
     final String title;
   
     @override
     State<MyHomePage> createState() => _MyHomePageState();
   }
   

   • 创建了一个状态管理的主页。

4. 状态类：

   class _MyHomePageState extends State<MyHomePage> {
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         backgroundColor: Colors.pink,
         body: SafeArea(
           child: Column(
             children: [
               Expanded(
                 child: Center(
                   child: Column(
                     mainAxisAlignment: MainAxisAlignment.center,
                     children: [
                       SwipableToggleSwitch(
                         values: const ["°C", "°F"],
                         width: 350,
                         onToggleCallback: (value) {},
                         buttonColor: const Color(0xFF0A3157),
                         backgroundColor: const Color(0xFFB5C1CC),
                         textColor: const Color(0xFFFFFFFF),
                       ),
                       const SizedBox(height: 20,),
                       SwipableToggleSwitch(
                         values: const ["Male", "Female"],
                         width: 650,
                         onToggleCallback: (value) {},
                         boxShape: BoxShape.rectangle,
                         buttonColor: const Color(0xFF0A3157),
                         backgroundColor: const Color(0xFFB5C1CC),
                         textColor: const Color(0xFFFFFFFF),
                       ),
                       const SizedBox(height: 20,),
                       SwipableToggleSwitch(
                         values: const ["ON", "OFF"],
                         width: 650,
                         onToggleCallback: (value) {},
                         boxShape: BoxShape.rectangle,
                         buttonColor: const Color(0xFF0A3157),
                         backgroundColor: const Color(0xFFB5C1CC),
                         textColor: const Color(0xFFFFFFFF),
                       ),
                     ],
                   ),
                 )
               )
             ],
           ),
         ),
       );
     }
   }