Flutter触觉反馈插件flutter_haptic的使用

Flutter触觉反馈插件flutter_haptic的使用

flutter_haptic

Flutter插件用于调用移动设备原生的触觉功能。

需求

Flutter

  • flutter >= 2.0.0
  • dart >=2.12.0 <3.0.0 (null safety)

iOS

  • iOS 13.0 或更高版本

Android

  • minSdkVersion 26 或更高版本
  • 该插件还需要在Android设备上具有VIBRATE权限。 (由于无法在插件中直接使用HapticFeedback,我们通过模仿Vibrater来实现这一功能。)

如何使用

// 触觉反馈成功
Haptic.onSuccess();

// 触觉反馈失败
Haptic.onFailure();

// 触觉反馈选择
Haptic.onSelection();

更多详细信息,请查看我们的示例

引用


示例代码

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_haptic/haptic.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Haptic Plugin Example'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(20),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              // 成功按钮
              _horizontallyStretchedButton(context, 'on Success', () {
                Haptic.onSuccess(); // 触觉反馈成功
              }),
              // 失败按钮
              _horizontallyStretchedButton(context, 'on Failure', () {
                Haptic.onFailure(); // 触觉反馈失败
              }),
              // 选择按钮
              _horizontallyStretchedButton(context, 'on Selection', () {
                Haptic.onSelection(); // 触觉反馈选择
              }),
            ],
          ),
        ),
      ),
    );
  }

  // 水平拉伸按钮
  Widget _horizontallyStretchedButton(BuildContext context, String title, VoidCallback onPressed) {
    return Row(
      children: [
        Expanded(
          child: SizedBox(
            height: 44,
            child: MaterialButton(
              color: Theme.of(context).primaryColor,
              onPressed: onPressed,
              child: Text(
                title,
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 16,
                ),
              ),
            ),
          ),
        ),
      ],
    );
  }
}

更多关于Flutter触觉反馈插件flutter_haptic的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

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


当然,以下是如何在Flutter项目中使用flutter_haptic插件来实现触觉反馈的示例代码。这个插件允许你在用户与应用程序交互时提供物理触觉反馈,以增强用户体验。

步骤 1: 添加依赖

首先,你需要在pubspec.yaml文件中添加flutter_haptic依赖。

dependencies:
  flutter:
    sdk: flutter
  flutter_haptic: ^x.y.z  # 请替换为最新版本号

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

步骤 2: 导入插件

在你的Dart文件中(例如main.dart),导入flutter_haptic插件。

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

步骤 3: 使用触觉反馈

你可以通过调用HapticFeedback.success(), HapticFeedback.error(), HapticFeedback.lightImpact(), HapticFeedback.mediumImpact(), 或 HapticFeedback.heavyImpact() 来触发不同类型的触觉反馈。

下面是一个简单的示例,展示如何在按钮点击时提供触觉反馈:

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Haptic Feedback Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Haptic Feedback Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Press the buttons below to feel haptic feedback',
              style: TextStyle(fontSize: 20),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                // 提供成功触觉反馈
                HapticFeedback.success();
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(content: Text('Success Feedback')),
                );
              },
              child: Text('Success Feedback'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                // 提供错误触觉反馈
                HapticFeedback.error();
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(content: Text('Error Feedback')),
                );
              },
              child: Text('Error Feedback'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                // 提供轻度冲击力触觉反馈
                HapticFeedback.lightImpact();
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(content: Text('Light Impact Feedback')),
                );
              },
              child: Text('Light Impact Feedback'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                // 提供中度冲击力触觉反馈
                HapticFeedback.mediumImpact();
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(content: Text('Medium Impact Feedback')),
                );
              },
              child: Text('Medium Impact Feedback'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                // 提供重度冲击力触觉反馈
                HapticFeedback.heavyImpact();
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(content: Text('Heavy Impact Feedback')),
                );
              },
              child: Text('Heavy Impact Feedback'),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中,我们创建了一个简单的Flutter应用,其中包含五个按钮,每个按钮都会在点击时触发不同类型的触觉反馈,并通过ScaffoldMessenger显示一个SnackBar以确认反馈已触发。

请确保在真实设备上测试触觉反馈,因为模拟器可能无法正确模拟触觉反馈。

回到顶部