Flutter动作指示器插件action_indicators的使用

Action Indicator

action_indicators 是一个用于在 Flutter 中为任何类型的 Widget 添加动画指示器的插件。它通常用于指示拖动或滑动手势的方向。每个指示器的可见性可以独立设置，通过 IndicatorInsets 来实现。

Demo

下图展示了 action_indicators 插件的效果：

使用步骤

以下是一个完整的示例，展示如何在 Flutter 应用中使用 action_indicators 插件。

1. 添加依赖

在项目的 pubspec.yaml 文件中添加 action_indicators 依赖：

dependencies:
  action_indicators: ^版本号

然后运行以下命令安装依赖：

flutter pub get

2. 导入包

在需要使用的 Dart 文件中导入 action_indicators 包：

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

3. 创建示例应用

以下是一个完整的示例代码，展示如何使用 action_indicators 插件来指示拖动手势的方向：

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Action Indicator 示例'),
        ),
        body: ActionIndicatorExample(),
      ),
    );
  }
}

class ActionIndicatorExample extends StatefulWidget {
  [@override](/user/override)
  _ActionIndicatorExampleState createState() => _ActionIndicatorExampleState();
}

class _ActionIndicatorExampleState extends State<ActionIndicatorExample> {
  Offset _offset = Offset.zero;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(
      child: Stack(
        children: [
          // 背景图片或内容
          Container(
            width: 200,
            height: 200,
            color: Colors.grey[200],
            child: Center(child: Text('拖动此处')),
          ),

          // 动画指示器
          ActionIndicator(
            insets: IndicatorInsets(
              top: _offset.dy < 0 ? 10 : 0,
              bottom: _offset.dy > 0 ? 10 : 0,
              left: _offset.dx < 0 ? 10 : 0,
              right: _offset.dx > 0 ? 10 : 0,
            ),
            child: Container(
              width: 200,
              height: 200,
              decoration: BoxDecoration(
                border: Border.all(color: Colors.blue, width: 2),
                shape: BoxShape.circle,
              ),
            ),
          ),

          // 可拖动区域
          GestureDetector(
            onPanUpdate: (details) {
              setState(() {
                _offset += details.delta;
              });
            },
            child: Container(
              width: 200,
              height: 200,
              color: Colors.transparent,
            ),
          ),
        ],
      ),
    );
  }
}