Flutter价格滑动选择插件flutter_price_slider的使用

flutter_price_slider

flutter_price_slider 是一个提供价格滑动选择组件的插件，类似于币安的价格选择器。它可用于选择价格的百分比。

示例

你可以通过以下链接查看在线演示：

如何使用

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

dependencies:
  flutter_price_slider: ^x.x.x

然后，导入该库并使用组件：

import 'package:flutter_price_slider/flutter_price_slider.dart';

接下来，创建一个简单的示例：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text("Flutter price slider"),
        ),
        body: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Expanded(
              child: Container(
                color: Color(0xFFfffffe), // 背景色
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text(
                      "Light mode", // 显示文本
                      style: Theme.of(context).textTheme.headline4,
                    ),
                    SizedBox(height: 10), // 间距
                    FlutterPriceSlider(
                      width: 200, // 滑动条宽度
                      selectedBoxColor: Color(0xFF2ebd85), // 选中框颜色
                      unselectedBoxColor: Color(0xFFf9f9f9), // 未选中框颜色
                      selectedTextColor: Color(0xFF000000), // 选中文字颜色
                      unselectedTextColor: Color(0XFF7d8896), // 未选中文字颜色
                      onSelected: (proportion) { // 回调函数
                        print("onSelected: $proportion");
                      },
                    ),
                  ],
                ),
              ),
            ),
            Expanded(
              child: Container(
                color: Color(0xFF20262f), // 背景色
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text(
                      "Dark mode", // 显示文本
                      style: Theme.of(context).textTheme.headline4?.copyWith(
                            color: Colors.white70, // 文字颜色
                          ),
                    ),
                    SizedBox(height: 10), // 间距
                    FlutterPriceSlider(
                      width: 200, // 滑动条宽度
                      selectedBoxColor: Color(0xFF2dbd85), // 选中框颜色
                      unselectedBoxColor: Color(0xFF29303d), // 未选中框颜色
                      selectedTextColor: Color(0xFFf1f4f6), // 选中文字颜色
                      unselectedTextColor: Color(0XFF7f8997), // 未选中文字颜色
                      onSelected: (proportion) { // 回调函数
                        print("onSelected: $proportion");
                      },
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

更多关于Flutter价格滑动选择插件flutter_price_slider的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

nodeper 1楼

更多关于Flutter价格滑动选择插件flutter_price_slider的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

flutter_price_slider 是一个用于在 Flutter 应用中实现价格范围滑动选择的插件。它允许用户通过拖动滑块来选择价格范围，通常用于电子商务应用中的价格筛选功能。

安装

首先，你需要在 pubspec.yaml 文件中添加 flutter_price_slider 插件依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_price_slider: ^0.0.1  # 请查看最新版本

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

基本用法

下面是一个简单的示例，展示如何使用 flutter_price_slider 来创建一个价格滑动选择器：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: PriceSliderExample(),
    );
  }
}

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

class _PriceSliderExampleState extends State<PriceSliderExample> {
  double _minPrice = 0;
  double _maxPrice = 100;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Price Slider Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            Text(
              'Price Range: \$${_minPrice.toStringAsFixed(2)} - \$${_maxPrice.toStringAsFixed(2)}',
              style: TextStyle(fontSize: 18),
            ),
            SizedBox(height: 20),
            FlutterPriceSlider(
              min: 0,
              max: 100,
              lowerValue: _minPrice,
              upperValue: _maxPrice,
              divisions: 100,
              onChanged: (double lower, double upper) {
                setState(() {
                  _minPrice = lower;
                  _maxPrice = upper;
                });
              },
            ),
          ],
        ),
      ),
    );
  }
}