flutter_body_part_selector 1.0.0

An interactive body selector package for Flutter that allows users to select muscles on a body diagram. Users can tap on muscles in the SVG body diagram or select them programmatically, with visual hi [...]

Flutter Body Part Selector

An interactive body selector package for Flutter that allows users to select muscles on a body diagram. Users can tap on muscles in the SVG body diagram or select them programmatically, with visual highlighting of selected muscles.

⚠️ IMPORTANT: This package includes mandatory SVG assets that must be used. Custom SVG files are not supported.

Features

• 🎯 Interactive Muscle Selection: Tap on any muscle in the body diagram to select it
• 🎨 Visual Highlighting: Selected muscles are automatically highlighted with customizable colors
• 🔄 Front/Back Views: Toggle between front and back body views
• 📱 Programmatic Control: Select muscles programmatically using the controller
• 🎛️ Customizable: Customize highlight colors and base colors
• 📦 Easy to Use: Simple API with minimal setup required - includes all required assets
• 🎨 Built-in Assets: Package includes mandatory SVG body diagrams (front and back views)

Installation

Add this to your package's pubspec.yaml file:

dependencies:
  flutter_body_part_selector: ^1.0.0

Then run:

flutter pub get

Usage

Quick Start (Recommended)

The easiest way to use this package is with the InteractiveBodyWidget:

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: InteractiveBodyWidget(
        // Asset paths are optional - package includes default assets
        onMuscleSelected: (muscle) {
          print('Selected muscle: $muscle');
        },
      ),
    );
  }
}

Advanced Usage

For more control, use InteractiveBodySvg with BodyMapController:

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

class BodySelectorExample extends StatefulWidget {
  @override
  State<BodySelectorExample> createState() => _BodySelectorExampleState();
}

class _BodySelectorExampleState extends State<BodySelectorExample> {
  final controller = BodyMapController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Interactive Body Selector'),
        actions: [
          IconButton(
            icon: const Icon(Icons.flip),
            onPressed: controller.toggleView,
            tooltip: 'Flip view',
          ),
        ],
      ),
      body: AnimatedBuilder(
        animation: controller,
        builder: (context, _) {
          return Column(
            children: [
              if (controller.selectedMuscle != null)
                Container(
                  padding: const EdgeInsets.all(16),
                  color: Colors.blue.shade900,
                  width: double.infinity,
                  child: Text(
                    'Selected: ${controller.selectedMuscle.toString()}',
                    style: const TextStyle(color: Colors.white),
                    textAlign: TextAlign.center,
                  ),
                ),
              Expanded(
                child: InteractiveBodySvg(
                  asset: controller.isFront
                      ? 'packages/flutter_body_part_selector/assets/svg/body_front.svg'
                      : 'packages/flutter_body_part_selector/assets/svg/body_back.svg',
                  selectedMuscle: controller.selectedMuscle,
                  onMuscleTap: controller.selectMuscle,
                ),
              ),
            ],
          );
        },
      ),
    );
  }
}

Using the Controller

The BodyMapController manages the state of the body selector:

final controller = BodyMapController();

// Select a muscle programmatically
controller.selectMuscle(Muscle.bicepsLeft);

// Clear selection
controller.clearSelection();

// Toggle between front and back view
controller.toggleView();

// Set specific view
controller.setFrontView();
controller.setBackView();

// Access current state
final selected = controller.selectedMuscle;
final isFront = controller.isFront;

Customization Options

Colors and Styling

InteractiveBodySvg(
  asset: 'packages/flutter_body_part_selector/assets/svg/body_front.svg',
  selectedMuscles: controller.selectedMuscles,
  onMuscleTap: controller.selectMuscle,
  highlightColor: Colors.red.withOpacity(0.7), // Custom highlight color
  baseColor: Colors.white, // Custom base color for unselected muscles
  selectedStrokeWidth: 3.0, // Stroke width for selected muscles
  unselectedStrokeWidth: 1.0, // Stroke width for unselected muscles
)

Size and Layout

InteractiveBodySvg(
  asset: 'packages/flutter_body_part_selector/assets/svg/body_front.svg',
  selectedMuscles: controller.selectedMuscles,
  onMuscleTap: controller.selectMuscle,
  width: 300, // Fixed width
  height: 600, // Fixed height
  fit: BoxFit.cover, // How to fit the SVG
  alignment: Alignment.center, // Alignment within the widget
)

Selection Behavior

InteractiveBodySvg(
  asset: 'packages/flutter_body_part_selector/assets/svg/body_front.svg',
  selectedMuscles: controller.selectedMuscles,
  onMuscleTap: controller.selectMuscle,
  enableSelection: true, // Enable/disable tap selection
  hitTestPadding: 15.0, // Padding for hit-testing (makes taps more forgiving)
  onMuscleTapDisabled: (muscle) {
    // Called when a muscle is tapped but selection is disabled
    print('Tapped $muscle but selection is disabled');
  },
)

Using InteractiveBodyWidget

The InteractiveBodyWidget provides a complete solution with built-in UI:

InteractiveBodyWidget(
  frontAsset: 'packages/flutter_body_part_selector/assets/svg/body_front.svg',
  backAsset: 'packages/flutter_body_part_selector/assets/svg/body_back.svg',
  onMuscleSelected: (muscle) {
    print('Selected: $muscle');
  },
  highlightColor: Colors.blue,
  baseColor: Colors.white,
  showFlipButton: true, // Show flip button in app bar
  showClearButton: true, // Show clear button in app bar
  backgroundColor: Colors.black, // Background color
  selectedMuscleHeader: (muscle) {
    // Custom header widget
    return Container(
      padding: EdgeInsets.all(16),
      child: Text('Selected: $muscle'),
    );
  },
)

Available Muscles

The package supports the following muscles:

Front View

• Traps (Left/Right)
• Delts (Left/Right)
• Chest (Left/Right)
• Abs
• Lats Front (Left/Right)
• Triceps (Left/Right)
• Biceps (Left/Right)
• Biceps Brachialis (Left/Right)
• Forearms (Left/Right)
• Quads (Left/Right)
• Calves (Left/Right)

Back View

• Lats Back (Left/Right)
• Lower Lats Back (Left/Right)
• Glutes (Left/Right)
• Hamstrings (Left/Right)
• Triceps (Left/Right)
• Delts (Left/Right)
• Traps (Left/Right)

Assets

IMPORTANT: This package includes the required SVG body diagrams (front and back views) that are mandatory for the package to work correctly. You must use the package assets - custom SVG files are not supported.

The package assets are pre-configured with the correct muscle IDs and mappings. Using custom assets will result in incorrect behavior.

Using Package Assets

The package includes default SVG assets that are automatically used by InteractiveBodyWidget. You don't need to specify asset paths:

// Simplest usage - assets are included automatically
InteractiveBodyWidget(
  onMuscleSelected: (muscle) {
    print('Selected: $muscle');
  },
)

If you need to specify asset paths explicitly (for InteractiveBodySvg or custom paths):

InteractiveBodySvg(
  asset: 'packages/flutter_body_part_selector/assets/svg/body_front.svg',
  // ...
)

Note: The package assets are automatically included when you add this package to your pubspec.yaml. No additional asset configuration is required in your app's pubspec.yaml.

API Reference

InteractiveBodyWidget

A complete widget with built-in controller and UI. Perfect for quick integration.

Properties:

• frontAsset (String?, optional): Path to the front body SVG. Defaults to 'packages/flutter_body_part_selector/assets/svg/body_front.svg' if not specified. Custom SVG files are not supported.
• backAsset (String?, optional): Path to the back body SVG. Defaults to 'packages/flutter_body_part_selector/assets/svg/body_back.svg' if not specified. Custom SVG files are not supported.
• onMuscleSelected (Function(Muscle)?, optional): Callback when a muscle is selected
• onSelectionCleared (VoidCallback?, optional): Callback when selection is cleared
• selectedMuscles (Set
• initialIsFront (bool, default: true): Initial view (front or back)
• highlightColor (Color?, optional): Color for highlighting selected muscles
• baseColor (Color?, optional): Base color for unselected muscles
• selectedStrokeWidth (double, default: 2.0): Stroke width for selected muscles
• unselectedStrokeWidth (double, default: 1.0): Stroke width for unselected muscles
• enableSelection (bool, default: true): Enable/disable selection
• fit (BoxFit, default: BoxFit.contain): How to fit the SVG
• hitTestPadding (double, default: 10.0): Padding for hit-testing
• width (double?, optional): Fixed width
• height (double?, optional): Fixed height
• alignment (Alignment, default: Alignment.center): Alignment of SVG
• showFlipButton (bool, default: true): Show flip button in app bar
• showClearButton (bool, default: true): Show clear button in app bar
• appBar (PreferredSizeWidget?, optional): Custom app bar
• backgroundColor (Color?, optional): Background color
• selectedMuscleHeader (Widget Function(Muscle)?, optional): Custom header widget

InteractiveBodySvg

The core widget for displaying the interactive body diagram.

Properties:

• asset (String, required): MUST be the package asset path: 'packages/flutter_body_part_selector/assets/svg/body_front.svg' or 'packages/flutter_body_part_selector/assets/svg/body_back.svg'. Custom SVG files are not supported.
• selectedMuscles (Set
• onMuscleTap (Function(Muscle)?, optional): Callback when a muscle is tapped
• highlightColor (Color?, optional): Color for highlighting selected muscles (default: Colors.blue with opacity)
• baseColor (Color?, optional): Base color for unselected muscles (default: Colors.white)
• selectedStrokeWidth (double, default: 2.0): Stroke width for selected muscles
• unselectedStrokeWidth (double, default: 1.0): Stroke width for unselected muscles
• enableSelection (bool, default: true): Enable/disable tap selection
• fit (BoxFit, default: BoxFit.contain): How to fit the SVG
• hitTestPadding (double, default: 10.0): Padding for hit-testing
• width (double?, optional): Fixed width
• height (double?, optional): Fixed height
• alignment (Alignment, default: Alignment.center): Alignment of SVG
• onMuscleTapDisabled (Function(Muscle)?, optional): Callback when muscle is tapped but selection is disabled

BodyMapController

Controller for managing the body selector state.

Methods:

• selectMuscle(Muscle): Select a muscle
• clearSelection(): Clear the current selection
• toggleView(): Toggle between front and back view
• setFrontView(): Set view to front
• setBackView(): Set view to back

Properties:

• selectedMuscles (Set
• isFront (bool): Whether showing front view

Muscle

Enum representing all available muscles. See the "Available Muscles" section above for the complete list.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License.

Support

If you encounter any issues or have questions, please file an issue on the GitHub repository.