Flutter开关组件插件switch_up的使用

Flutter开关组件插件switch_up的使用

Switch Up

Switch Up 是一个带有动画的切换开关组件，可以通过自定义宽度、颜色、文字、圆角、动画等进行完全个性化设置。它还支持保存选择状态。

开始使用

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

dependencies:
  ...
  switch_up: latest_version

然后导入该包：

import 'package:switch_up/switch_up.dart';

使用示例

默认主题颜色的使用

SwitchUp<String>(
  backgroundColor: Colors.grey.shade200,
  items: const <String>['Home', 'Chat', 'Settings'],
  onChanged: (String value) {
    print(value); // 打印当前选中的值
  },
  value: 'Settings', // 设置默认选中的值
),

自定义高度、颜色和动画

SwitchUp(
  backgroundColor: Colors.grey.shade200,
  color: Colors.amber,
  radius: 0, // 设置圆角为0
  height: 50, // 设置高度为50
  curves: Curves.easeInOutBack, // 自定义动画曲线
  items: const ['Active', 'Pending'], // 可选项
  onChanged: (value) {
    print(value); // 打印选中的值
  },
  value: 'Pending', // 设置默认选中的值
),

带渐变颜色的Switch Up

SwitchUp(
  gradient: const LinearGradient(
    begin: Alignment.topLeft,
    end: Alignment.bottomRight,
    colors: [
      Color(0xFF941F37),
      Color(0xFF590012),
    ],
  ),
  curves: Curves.bounceOut, // 动画曲线
  backgroundColor: Colors.grey.shade200,
  items: const ['Male', 'Female', 'Other'], // 可选项
  onChanged: (value) {
    print(value); // 打印选中的值
  },
  value: 'Female', // 设置默认选中的值
),

自定义模型类

首先，在你的自定义模型类中实现 toString() 方法：

class States {
  final String id;
  final String name;
  final String country;

  States({required this.id, required this.name, required this.country});

  [@override](/user/override)
  String toString() {
    return name; // 返回名称作为显示文本
  }
}

然后在 SwitchUp 中使用：

SwitchUp<States>(
  backgroundColor: Colors.pink.withOpacity(.1),
  radius: 10,
  height: 60,
  gradient: const LinearGradient(
    begin: Alignment.topLeft,
    end: Alignment.bottomRight,
    colors: [
      Color(0xFFFC466B),
      Color(0xFF3F5EFB),
    ],
  ),
  curves: Curves.easeInOutQuart,
  items: states, // 自定义模型列表
  onChanged: (States value) {
    if (kDebugMode) {
      print(value); // 打印选中的值
    }
  },
  value: states[2], // 设置默认选中的值
),

完整示例代码

以下是一个完整的示例代码，展示了如何使用 SwitchUp 组件：

import 'dart:developer';

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:switch_up/switch_up.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Switch Up',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        primaryColor: const Color(0xFFfc8e28),
      ),
      home: const MyHomePage(title: 'Switch Up'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<States> states = [
    States(id: '1', name: 'Maharashtra', country: 'India'),
    States(id: '2', name: 'Gujarat', country: 'India'),
    States(id: '3', name: 'Goa', country: 'India'),
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 30.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const SizedBox(height: 50),
              SwitchUp<String>(
                backgroundColor: Colors.grey.shade200,
                items: const <String>['Home', 'Chat', 'Settings'],
                onChanged: (String value) {
                  if (kDebugMode) {
                    print(value);
                  }
                },
                value: 'Settings',
              ),
              const SizedBox(height: 50),
              SwitchUp(
                backgroundColor: Colors.grey.shade200,
                color: Colors.amber,
                radius: 0,
                height: 50,
                items: const ['Active', 'Pending'],
                onChanged: (value) {
                  log(value);
                },
                value: 'Pending',
              ),
              const SizedBox(height: 50),
              SwitchUp(
                gradient: const LinearGradient(
                  begin: Alignment.topLeft,
                  end: Alignment.bottomRight,
                  colors: [
                    Color(0xFF941F37),
                    Color(0xFF590012),
                  ],
                ),
                curves: Curves.bounceOut,
                backgroundColor: Colors.grey.shade200,
                items: const ['Male', 'Female', 'Other'],
                onChanged: (value) {
                  log(value);
                },
                value: 'Female',
              ),
              const SizedBox(height: 50),
              SwitchUp(
                backgroundColor: Colors.grey.shade200,
                radius: 40,
                gradient: const RadialGradient(
                  radius: 10,
                  colors: [
                    Color(0xFF941F37),
                    Color(0xFF590012),
                  ],
                ),
                curves: Curves.easeInOutQuart,
                items: const ['Normal', 'Bold', 'Italic'],
                onChanged: (value) {
                  log(value);
                },
                value: 'Bold',
              ),
              const SizedBox(height: 50),
              SwitchUp<States>(
                backgroundColor: Colors.pink.withOpacity(.1),
                radius: 10,
                height: 60,
                gradient: const LinearGradient(
                  begin: Alignment.topLeft,
                  end: Alignment.bottomRight,
                  colors: [
                    Color(0xFFFC466B),
                    Color(0xFF3F5EFB),
                  ],
                ),
                curves: Curves.easeInOutQuart,
                items: states,
                onChanged: (States value) {
                  if (kDebugMode) {
                    print(value);
                  }
                },
                value: states[2],
              ),
              const SizedBox(height: 50),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  Expanded(
                    child: SwitchUp(
                      backgroundColor: Colors.grey.shade200,
                      height: 50,
                      radius: 40,
                      items: const ['Male', 'Female', 'Other'],
                      onChanged: (value) {
                        log(value);
                      },
                      value: 'Other',
                      curves: Curves.ease,
                    ),
                  ),
                  const SizedBox(width: 10),
                  Expanded(
                    child: SwitchUp(
                      backgroundColor: Colors.grey.shade200,
                      color: Colors.amber,
                      radius: 0,
                      height: 50,
                      items: const ['Active', 'Pending'],
                      onChanged: (value) {
                        log(value);
                      },
                      value: 'Pending',
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class States {
  final String id;
  final String name;
  final String country;

  States({required this.id, required this.name, required this.country});

  [@override](/user/override)
  String toString() {
    return name;
  }
}

更多关于Flutter开关组件插件switch_up的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

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


switch_up 是一个 Flutter 插件，用于创建自定义的开关组件。它提供了多种样式和配置选项，可以帮助你轻松地实现各种开关效果。以下是如何使用 switch_up 插件的基本步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 switch_up 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  switch_up: ^1.0.0  # 请使用最新版本

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

2. 导入包

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

import 'package:switch_up/switch_up.dart';

3. 使用 SwitchUp 组件

SwitchUp 组件的基本用法如下：

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _isSwitched = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('SwitchUp Example'),
      ),
      body: Center(
        child: SwitchUp(
          value: _isSwitched,
          onChanged: (bool value) {
            setState(() {
              _isSwitched = value;
            });
          },
        ),
      ),
    );
  }
}

4. 自定义 SwitchUp 组件

SwitchUp 提供了多种自定义选项，例如颜色、大小、形状等。以下是一些常见的自定义配置：

SwitchUp(
  value: _isSwitched,
  onChanged: (bool value) {
    setState(() {
      _isSwitched = value;
    });
  },
  activeColor: Colors.green,  // 开启状态的颜色
  inactiveColor: Colors.red,  // 关闭状态的颜色
  thumbColor: Colors.white,   // 滑块的颜色
  width: 100.0,               // 开关的宽度
  height: 50.0,               // 开关的高度
  borderRadius: 25.0,         // 圆角半径
  animationDuration: Duration(milliseconds: 300),  // 动画持续时间
);
回到顶部