Flutter文本输入带范围选择按钮插件textfield_have_range_button的使用

在本教程中，我们将介绍如何使用 textfield_have_range_button 插件来创建一个带有范围选择按钮的文本输入框。此插件可以帮助用户快速设置数值范围，适用于购物应用、价格筛选等场景。

插件安装

首先，在您的 pubspec.yaml 文件中添加插件依赖：

dependencies:
  textfield_have_range_button: ^1.0.0

然后运行以下命令以获取依赖项：

flutter pub get

使用示例

接下来，我们将展示如何在 Flutter 应用程序中使用 textfield_have_range_button 插件。

完整示例代码

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('文本输入带范围选择按钮'),
        ),
        body: RangeTextFieldExample(),
      ),
    );
  }
}

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

class _RangeTextFieldExampleState extends State<RangeTextFieldExample> {
  String _rangeText = "0 - 100"; // 当前范围值

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(
            "当前范围: $_rangeText",
            style: TextStyle(fontSize: 18),
          ),
          SizedBox(height: 20),
          TextFieldWithRangeButton(
            onRangeSelected: (String value) {
              setState(() {
                _rangeText = value;
              });
            },
            initialRange: "0 - 100", // 初始范围值
          ),
        ],
      ),
    );
  }
}

更多关于Flutter文本输入带范围选择按钮插件textfield_have_range_button的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

wuwangju 1楼•12 天前

更多关于Flutter文本输入带范围选择按钮插件textfield_have_range_button的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

textfield_have_range_button 是一个 Flutter 插件，用于在文本输入框旁边添加范围选择按钮，方便用户选择特定的数值范围。虽然目前没有官方的 textfield_have_range_button 插件，但可以通过自定义实现类似的功能。

以下是一个简单的实现示例，展示如何在 Flutter 中创建一个带有范围选择按钮的文本输入框：

1. 创建自定义文本输入框

import 'package:flutter/material.dart';

class RangeTextField extends StatefulWidget {
  final TextEditingController controller;
  final double minValue;
  final double maxValue;
  final ValueChanged<double>? onValueChanged;

  const RangeTextField({
    Key? key,
    required this.controller,
    required this.minValue,
    required this.maxValue,
    this.onValueChanged,
  }) : super(key: key);

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

class _RangeTextFieldState extends State<RangeTextField> {
  void _incrementValue() {
    double currentValue = double.tryParse(widget.controller.text) ?? widget.minValue;
    if (currentValue < widget.maxValue) {
      currentValue++;
      widget.controller.text = currentValue.toString();
      widget.onValueChanged?.call(currentValue);
    }
  }

  void _decrementValue() {
    double currentValue = double.tryParse(widget.controller.text) ?? widget.minValue;
    if (currentValue > widget.minValue) {
      currentValue--;
      widget.controller.text = currentValue.toString();
      widget.onValueChanged?.call(currentValue);
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Row(
      children: [
        IconButton(
          icon: Icon(Icons.remove),
          onPressed: _decrementValue,
        ),
        Expanded(
          child: TextField(
            controller: widget.controller,
            keyboardType: TextInputType.number,
            decoration: InputDecoration(
              border: OutlineInputBorder(),
              labelText: 'Enter value',
            ),
          ),
        ),
        IconButton(
          icon: Icon(Icons.add),
          onPressed: _incrementValue,
        ),
      ],
    );
  }
}

2. 使用自定义文本输入框

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Range TextField Example'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: RangeTextField(
            controller: TextEditingController(),
            minValue: 0,
            maxValue: 100,
            onValueChanged: (value) {
              print('Selected value: $value');
            },
          ),
        ),
      ),
    );
  }
}