Flutter身体部位选择插件select_body_parts的使用

特性

允许用户使用现代UI选择身体部位。

开始使用

在终端运行以下命令来添加插件：

flutter pub add select_body_parts

或者，在你的pubspec.yaml文件的dependencies部分添加：

dependencies:
  select_body_parts: ^0.0.1

使用方法

该插件包含一个BodyPartProvider类，开发者可以通过这个类访问已选择的身体部位。此外，前部和后部的身体部位被分离出来，以实现更好的模块化设计。

示例代码

以下是使用select_body_parts插件的完整示例代码：

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:select_body_parts/body_part_provider.dart';
import 'package:select_body_parts/back_body.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    // 提供BodyPartProvider实例
    return MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (context) => BodyPartProvider())
      ],
      child: const MaterialApp(
        home: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    // 获取BodyPartProvider实例
    final provider = Provider.of<BodyPartProvider>(context);

    // 获取已选择的身体部位
    String selectecParts = provider.selectedMuscles.join(", ");

    return Scaffold(
      backgroundColor: Colors.black45,
      body: Center(
        child: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              // 显示身体后部图
              const BackBody(),
              Padding(
                padding: const EdgeInsets.all(15.0),
                child: Text(
                  "Selected Parts:\n$selectecParts",
                  textAlign: TextAlign.center,
                  style: const TextStyle(color: Colors.blue, fontSize: 17)
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，其中包含一个MyHomePage页面。通过BodyPartProvider类，我们可以选择并显示用户所选的身体部位。

songsunli 1楼•3 个月前

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

当然，以下是如何在Flutter项目中集成和使用select_body_parts插件的示例代码。这个插件允许用户从预设的身体部位列表中选择一个或多个部位。

第一步：添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  select_body_parts: ^最新版本号  # 请替换为实际的最新版本号

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

第二步：导入插件

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

import 'package:select_body_parts/select_body_parts.dart';

第三步：使用插件

以下是一个完整的示例，展示如何在Flutter应用中使用select_body_parts插件：

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

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

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<BodyPart> selectedBodyParts = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Select Body Parts Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            Text(
              'Selected Body Parts:',
              style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 16),
            Expanded(
              child: ListView.builder(
                itemCount: selectedBodyParts.length,
                itemBuilder: (context, index) {
                  return Chip(
                    label: Text(selectedBodyParts[index].name),
                    onDeleted: () {
                      setState(() {
                        selectedBodyParts.removeAt(index);
                      });
                    },
                  );
                },
              ),
            ),
            SizedBox(height: 16),
            ElevatedButton(
              onPressed: () async {
                final result = await SelectBodyParts.showPicker(
                  context: context,
                  multipleSelect: true, // 设置为true以允许多选
                );

                if (result != null) {
                  setState(() {
                    selectedBodyParts = result;
                  });
                }
              },
              child: Text('Select Body Parts'),
            ),
          ],
        ),
      ),
    );
  }
}

说明

添加依赖：在pubspec.yaml中添加select_body_parts插件。
导入插件：在需要使用插件的Dart文件中导入它。
使用插件：
- 创建一个按钮，点击按钮时调用SelectBodyParts.showPicker方法。
- 允许用户选择身体部位（多选或单选，取决于multipleSelect参数）。
- 用户选择后，将结果保存在selectedBodyParts列表中，并在UI中显示。

确保你已经按照上述步骤正确集成和使用select_body_parts插件。这个示例代码展示了如何集成插件并在UI中显示用户选择的身体部位。