Flutter滑动按钮组件插件slider_button_component的使用

Flutter滑动按钮组件插件slider_button_component的使用

特性

  • 可定制的子部件
  • 可调整的圆角半径、高度和宽度
  • 多种颜色选项，包括背景色、基色、高亮色和按钮颜色
  • 可选的标签和图标
  • 支持光晕效果和振动反馈
  • 禁用功能并带有提示信息

属性

属性名 类型 描述 默认值
child Widget? 按钮内的可定制子部件。 null
radius double 按钮圆角半径。 100.0
height double 按钮高度。 70.0
width double 按钮宽度。 270.0
buttonSize double? 滑动按钮大小。 null
buttonWidth double? 滑动按钮宽度。 null
backgroundColor Color 按钮背景颜色。 Color(0xffe0e0e0)
baseColor Color 光晕效果的基础颜色。 Colors.black87
highlightedColor Color 光晕效果的高亮颜色。 Colors.white
buttonColor Color 滑动按钮的颜色。 kBlueDark
label Widget? 在按钮内显示的标签。 null
alignLabel Alignment 按钮内标签的对齐方式。 Alignment.center
boxShadow BoxShadow? 滑动按钮的阴影。 null
icon Widget? 在滑动按钮内显示的图标。 null
shimmer bool 启用或禁用光晕效果。 true
vibrationFlag bool 启用或禁用振动反馈。 false
disable bool 启用或禁用按钮。 false
onSlideCompleted VoidCallback 当滑动完成时的回调函数。 required
messageTooltip String 按钮禁用时的提示信息。 ''

安装

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

dependencies:
  button_slide_component: ^1.0.4

示例代码

以下是一个完整的示例代码，展示了如何使用 slider_button_component 插件。

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:slider_button_component/slider_button_component.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MainApp(),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Center(
              child: ButtonSlideComponent(
                width: MediaQuery.of(context).size.width - 15,
                vibrationFlag: true,
                icon: Container(
                  width: 24.0, // 设置圆形的宽度
                  height: 24.0, // 设置圆形的高度
                  decoration: const BoxDecoration(
                    color: Colors.white, // 设置圆形的颜色
                    shape: BoxShape.circle, // 设置容器形状为圆形
                    boxShadow: [
                      BoxShadow(
                        color: Colors.black26, // 阴影的颜色
                        blurRadius: 10.0, // 阴影的模糊半径
                        offset: Offset(0, 5), // 阴影的偏移量
                      ),
                    ],
                  ),
                  child: const Icon(Icons.ac_unit_sharp),
                ),
                label: Text(
                  'Slide to Submit',
                  style: GoogleFonts.inter(
                    fontSize: 14,
                    height: 20 / 14,
                    letterSpacing: 0.1,
                    fontWeight: FontWeight.w500,
                  ),
                ),
                onSlideCompleted: () {
                  debugPrint('item completed');
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

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

1 回复

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


slider_button_component 是一个用于 Flutter 的滑动按钮组件，通常用于实现类似“滑动解锁”或“滑动确认”的功能。这个组件允许用户通过滑动按钮来触发某些操作。

以下是如何使用 slider_button_component 的基本步骤：

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  slider_button_component: ^1.0.0  # 请确保使用最新版本

然后运行 flutter pub get 来安装依赖。

2. 导入包

在你的 Dart 文件中导入 slider_button_component：

import 'package:slider_button_component/slider_button_component.dart';

3. 使用 SliderButton 组件

你可以在你的 Flutter 应用中使用 SliderButton 组件。以下是一个简单的示例：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Slider Button Example'),
        ),
        body: Center(
          child: SliderButton(
            width: 300.0,
            height: 50.0,
            buttonWidth: 60.0,
            buttonColor: Colors.blue,
            backgroundColor: Colors.grey[300],
            label: Text(
              "Slide to unlock",
              style: TextStyle(
                color: Colors.black,
                fontSize: 16.0,
              ),
            ),
            icon: Icon(Icons.arrow_forward, color: Colors.white),
            action: () {
              // 滑动完成后的操作
              print("Button slid!");
            },
          ),
        ),
      ),
    );
  }
}
回到顶部