搜索插件、代码仓与 APP 分类

插件详情v1.0.5

xlive_switch

一个带有自定义UI和设计的开关小部件插件,设计风格类似于Dribbble上Oleg Frolov的作品

近 30 天下载
28
喜欢数
47
Pub 分数
25

安装插件

flutter pub add xlive_switch

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

一个受 Oleg Frolov 在 Dribbble 上的设计启发的 Flutter 开关控件插件,提供流畅、可自定义的切换效果,具有平滑动画和现代美学。它为默认 Switch 控件提供了视觉上更吸引人的替代方案,特别适合注重现代 UI/UX 的应用。该包支持自定义颜色、大小和过渡效果,使开发者能够匹配品牌或设计系统需求。专为性能和简洁性而构建,可无缝集成到 Flutter 项目中。

适合场景

  • 现代用户界面中的自定义切换开关
  • 通过动画切换按钮提升应用视觉吸引力
  • 设计设置或偏好屏幕
  • 创建交互式开关控件
  • 实施品牌化开关组件

主要特点

  • Dribbble 风格的现代设计
  • 平滑的动画过渡
  • 可自定义的颜色和大小
  • 与 Flutter 的轻松集成
  • 支持有状态的切换行为

适合对象

  • 寻求精致开关组件的UI设计师
  • 开发注重美学的应用程序的开发者
  • 需要品牌化交互元素的项目
  • Flutter 初学者探索控件自定义
  • 需要深色/浅色模式切换的应用程序

使用建议

  • 有限的平台特定行为
  • 无内置可访问性标签
  • 需要手动处理焦点和语义
  • 未针对复杂表单交互进行优化
  • 对方向布局的支持仅限于基本对齐

原始 README

以下为关联源码仓库的 README 原文快照,最新内容请访问源码仓库。

xlive_switch

A Xlive Switcher plugin for Flutter

Getting Started

This plugin is based on Oleg Frolov's animation design which I found on Dribbble: https://dribbble.com/shots/5429846-Switcher-XLIV

Thanks Oleg Forlov for this beautiful design.

Design:

Demo:

Usage

To use plugin, just import package import 'package:xlive_switch/xlive_switch.dart';

You can change the color of the switch follow by these attributes:

  • activeColor: background color when value is true
  • unActiveColor: background color when value is false
  • thumbColor: your thumb color

Example

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

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool _value = true;

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              XlivSwitch(
                value: _value,
                onChanged: _changeValue,
              ),
              Text('Current value: $_value'),
            ],
          ),
        ),
      ),
    );
  }

  void _changeValue(bool value) {
    setState(() {
      _value = value;
    });
  }
}

所属分类

源码仓库

使用此插件的项目

暂无相关数据。