Flutter计数器按钮插件increment_button的使用

增量按钮插件 increment_button

一个简单的 Flutter 插件，用于实现滑动按钮功能。

开始使用

添加依赖

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

dependencies:
  increment_button: ^0.1.0

导入插件

在你的 Dart 文件中导入 increment_button 插件：

import 'package:increment_button/increment_button.dart';

简单使用

下面是一个简单的示例代码，展示了如何使用 increment_button 插件：

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

void main() {
  runApp(MaterialApp(home: IncrementButtonDemo()));
}

class IncrementButtonDemo extends StatefulWidget {
  const IncrementButtonDemo({Key? key}) : super(key: key);

  [@override](/user/override)
  _IncrementButtonDemoState createState() => _IncrementButtonDemoState();
}

class _IncrementButtonDemoState extends State<IncrementButtonDemo> {
  String result = "Let's slide!";
  int i = 0;
  int delta = 0;

  // 这是从 https://medium.com/flutter-community/what-do-you-know-about-aniamtedswitcher-53cc3a4bebb8 获取的动画代码
  // 它与组件本身无关，只是为了更好地展示组件的功能。
  _transitionBuilder(Widget child, Animation<double> animation, String key) {
    {
      final inAnimation =
          Tween<Offset>(begin: Offset(1.0, 0.0), end: Offset(0.0, 0.0))
              .animate(animation);
      final outAnimation =
          Tween<Offset>(begin: Offset(-1.0, 0.0), end: Offset(0.0, 0.0))
              .animate(animation);

      if (delta > 0) {
        if (child.key == ValueKey(key)) {
          return ClipRect(
            child: SlideTransition(
              position: inAnimation,
              child: child,
            ),
          );
        } else {
          return ClipRect(
            child: SlideTransition(
              position: outAnimation,
              child: child,
            ),
          );
        }
      } else {
        if (child.key == ValueKey(key)) {
          return ClipRect(
            child: SlideTransition(
              position: outAnimation,
              child: child,
            ),
          );
        } else {
          return ClipRect(
            child: SlideTransition(
              position: inAnimation,
              child: child,
            ),
          );
        }
      }
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Increment Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            AnimatedSwitcher(
              duration: const Duration(milliseconds: 450),
              transitionBuilder: (Widget child, Animation<double> animation) {
                return _transitionBuilder(child, animation, i.toString());
              },
              child: Padding(
                  key: ValueKey(i.toString()),
                  padding: const EdgeInsets.all(8),
                  child: Text(
                    i.toString(),
                    style: Theme.of(context).textTheme.headline3,
                  )),
            ),
            Text('Swipe this button to left or right.'),
            SizedBox(height: 16.0),
            IncrementButton(
              width: MediaQuery.of(context).size.width,
              buttonWidth: 45.0,
              color: Theme.of(context).colorScheme.secondary.withOpacity(0.5),
              buttonColor: Theme.of(context).primaryColor,
              label: Center(child: Text('🏀')),
              onDelta: (change) {
                setState(() {
                  delta = change;
                  i = i + change;
                  result = 'New value is $i ';
                });
              },
            ),
            SizedBox(height: 16.0),
            Text('Result:\n$result', textAlign: TextAlign.center)
          ],
        ),
      ),
    );
  }
}