Flutter肌肉选择器插件muscle_selector的使用

Flutter肌肉选择器插件muscle_selector的使用

Human Body Muscle Selector for Flutter.

开始使用

本指南将帮助你了解如何在你的Flutter项目中使用muscle_selector插件。此插件允许用户从人体图上选择特定的肌肉。

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

dependencies:
  muscle_selector: ^x.x.x

然后运行flutter pub get以安装该包。

完整示例

以下是一个完整的示例，展示了如何使用muscle_selector插件来创建一个可以选取人体肌肉的界面。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      home: HomeView(),
      theme: ThemeData.light(),
    );
  }
}

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

class _HomeViewState extends State<HomeView> {
  Set<Muscle>? selectedMuscles;
  final GlobalKey<MusclePickerMapState> _mapKey = GlobalKey();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        actions: [
          // 清除选择按钮
          IconButton(
            icon: const Icon(Icons.delete, color: Colors.red),
            onPressed: () {
              _mapKey.currentState?.clearSelect(); // 清除当前选择
              setState(() {
                selectedMuscles = null;
              });
            },
          ),
        ],
      ),
      body: Center(
        child: InteractiveViewer(
          scaleEnabled: true,
          panEnabled: true,
          constrained: true,
          child: Padding(
            padding: const EdgeInsets.only(right: 30.0),
            child: Align(
              alignment: Alignment.center,
              child: Transform.scale(
                scale: 1.2,
                child: MusclePickerMap(
                  key: _mapKey, // 设置key以便操作
                  width: MediaQuery.of(context).size.width, // 设置宽度
                  height: MediaQuery.of(context).size.height, // 设置高度
                  map: Maps.BODY, // 选择人体图
                  isEditing: false, // 是否可编辑
                  initialSelectedGroups: const ['chest', 'glutes', 'neck', 'lower_back'], // 初始选中组
                  onChanged: (muscles) { // 当选择发生变化时的回调
                    setState(() {
                      selectedMuscles = muscles;
                    });
                  },
                  actAsToggle: true, // 是否作为切换模式
                  dotColor: Colors.black, // 点的颜色
                  selectedColor: Colors.lightBlueAccent, // 选中颜色
                  strokeColor: Colors.black, // 边框颜色
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

更多关于Flutter肌肉选择器插件muscle_selector的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

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


当然，以下是一个关于如何在Flutter项目中使用muscle_selector插件的示例代码。这个插件允许用户在一个界面上选择人体的不同肌肉区域。首先，你需要确保你的Flutter项目已经配置好，并且已经添加了muscle_selector插件到你的pubspec.yaml文件中。

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

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

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

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

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

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

class MuscleSelectorScreen extends StatefulWidget {
  @override
  _MuscleSelectorScreenState createState() => _MuscleSelectorScreenState();
}

class _MuscleSelectorScreenState extends State<MuscleSelectorScreen> {
  String selectedMuscle = 'None';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Muscle Selector Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Selected Muscle: $selectedMuscle',
              style: TextStyle(fontSize: 20),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                showDialog(
                  context: context,
                  builder: (BuildContext context) {
                    return AlertDialog(
                      title: Text('Select a Muscle'),
                      content: MuscleSelector(
                        onMuscleSelected: (Muscle muscle) {
                          setState(() {
                            selectedMuscle = muscle.name;
                          });
                          Navigator.of(context).pop();
                        },
                      ),
                      actions: <Widget>[
                        TextButton(
                          onPressed: () {
                            Navigator.of(context).pop();
                          },
                          child: Text('Cancel'),
                        ),
                      ],
                    );
                  },
                );
              },
              child: Text('Select Muscle'),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，包含一个主屏幕MuscleSelectorScreen。在这个屏幕上，我们显示了一个按钮，用户可以点击这个按钮来打开一个对话框，对话框中包含了MuscleSelector小部件。当用户选择一个肌肉区域时，onMuscleSelected回调会被触发，更新selectedMuscle状态，并关闭对话框。

注意，Muscle类是由muscle_selector插件定义的，它包含了肌肉的名称和其他可能的属性。你可以根据插件的文档来进一步定制和扩展这个示例。

确保在实际使用时检查muscle_selector插件的文档和最新版本，因为API可能会有所变化。

回到顶部