flutter_elegant_number_button 是一个用于在 Flutter 应用中创建优雅数字按钮的插件。它允许用户通过点击按钮来增加或减少数字，并且可以自定义样式和行为。以下是如何使用 flutter_elegant_number_button 插件的详细步骤。

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 flutter_elegant_number_button 插件的依赖。

dependencies:
  flutter:
    sdk: flutter
  flutter_elegant_number_button: ^1.0.0  # 请检查最新版本

然后运行 flutter pub get 来获取依赖。

2. 导入包

在你的 Dart 文件中导入 flutter_elegant_number_button 包。

import 'package:flutter_elegant_number_button/flutter_elegant_number_button.dart';

3. 使用 ElegantNumberButton

你可以在你的 widget 树中使用 ElegantNumberButton 来创建一个数字按钮。

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

class _MyHomePageState extends State<MyHomePage> {
  int _currentValue = 0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Elegant Number Button Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Current Value:',
              style: TextStyle(fontSize: 20),
            ),
            Text(
              '$_currentValue',
              style: TextStyle(fontSize: 40, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 20),
            ElegantNumberButton(
              initialValue: _currentValue,
              minValue: 0,
              maxValue: 100,
              decimalPlaces: 0,
              onChanged: (value) {
                setState(() {
                  _currentValue = value.toInt();
                });
              },
            ),
          ],
        ),
      ),
    );
  }
}

4. 参数说明

• initialValue: 初始值。
• minValue: 最小值。
• maxValue: 最大值。
• decimalPlaces: 小数位数。
• onChanged: 当值发生变化时的回调函数。

5. 自定义样式

你可以通过传递 buttonStyle 参数来自定义按钮的样式。

ElegantNumberButton(
  initialValue: _currentValue,
  minValue: 0,
  maxValue: 100,
  decimalPlaces: 0,
  buttonStyle: ElegantNumberButtonStyle(
    increaseButtonBackgroundColor: Colors.green,
    decreaseButtonBackgroundColor: Colors.red,
    buttonTextStyle: TextStyle(color: Colors.white, fontSize: 20),
  ),
  onChanged: (value) {
    setState(() {
      _currentValue = value.toInt();
    });
  },
),

6. 运行应用

现在你可以运行你的 Flutter 应用，并查看 ElegantNumberButton 的效果。

7. 其他功能

flutter_elegant_number_button 还支持其他功能，例如禁用按钮、设置步长等。你可以查看插件的文档以获取更多详细信息。

8. 示例代码

以下是一个完整的示例代码：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Elegant Number Button Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

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

class _MyHomePageState extends State<MyHomePage> {
  int _currentValue = 0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Elegant Number Button Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Current Value:',
              style: TextStyle(fontSize: 20),
            ),
            Text(
              '$_currentValue',
              style: TextStyle(fontSize: 40, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 20),
            ElegantNumberButton(
              initialValue: _currentValue,
              minValue: 0,
              maxValue: 100,
              decimalPlaces: 0,
              buttonStyle: ElegantNumberButtonStyle(
                increaseButtonBackgroundColor: Colors.green,
                decreaseButtonBackgroundColor: Colors.red,
                buttonTextStyle: TextStyle(color: Colors.white, fontSize: 20),
              ),
              onChanged: (value) {
                setState(() {
                  _currentValue = value.toInt();
                });
              },
            ),
          ],
        ),
      ),
    );
  }
}