Flutter重量选择插件weight_slider的使用

✨ Demo

🚀 使用方法

1. 添加依赖

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

dependencies:
  weight_slider: ^版本号

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

flutter pub get

2. 导入包并在代码中使用

以下是完整的示例代码：

import 'package:flutter/material.dart';
import 'package:weight_slider/weight_slider.dart'; // 引入weight_slider插件

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '重量选择示例',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(
        title: '重量选择器',
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  int weight = 70; // 当前选中的重量值

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title), // 设置应用标题
      ),
      body: Center(
        child: Padding(
          padding: EdgeInsets.all(64), // 设置内边距
          child: WeightSlider(
            weight: weight, // 当前选中的重量
            minWeight: 40, // 最小重量
            maxWeight: 120, // 最大重量
            onChange: (val) => setState(() => this.weight = val), // 更新重量时调用setState
            unit: 'kg', // 可选参数，单位显示为“kg”
          ),
        ),
      ),
    );
  }
}

eggper 1楼

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

weight_slider 是一个用于 Flutter 的重量选择插件，它允许用户通过滑动滑块来选择重量。这个插件通常用于健身、健康或体重管理类应用中，让用户可以方便地选择或调整体重。

安装

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

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

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

基本用法

以下是一个简单的示例，展示如何使用 weight_slider 插件：

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

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

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

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

class _WeightSliderExampleState extends State<WeightSliderExample> {
  double _weight = 70.0; // 初始重量

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Weight Slider Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Selected Weight: ${_weight.toStringAsFixed(1)} kg',
              style: TextStyle(fontSize: 24),
            ),
            SizedBox(height: 20),
            WeightSlider(
              weight: _weight,
              minWeight: 30,
              maxWeight: 150,
              onChange: (double value) {
                setState(() {
                  _weight = value;
                });
              },
            ),
          ],
        ),
      ),
    );
  }
}