muscle_map #

Interactive Flutter muscle maps for workout and fitness apps. Display male or female body diagrams, select muscle groups, and visualize workout intensity.

Fork of muscle_selector by EmilCes. This package extends the original with intensity mapping, additional muscle groups, and bug fixes.

Features #

• Interactive SVG-based human body diagrams (full body, front only, back only)
• Male and female body variants sharing the same muscle ids, so they can be swapped at runtime
• MusclePickerMap — tap muscles to select/deselect them; get a callback with the selected set
• MuscleIntensityMap — display muscles colored by workout intensity (light / medium / hard)
• Custom muscle colors, intensity palettes, outline strokes, loading states, and crossfades
• Bundled SVG assets and cached parsing; no network requests are needed to display a map

Installation #

Add to your pubspec.yaml:

dependencies:
  muscle_map: ^1.3.0

Then run:

flutter pub get

Requires Dart 3.2.6 or later, below Dart 4, and a compatible Flutter SDK. The body SVGs are bundled with the package; no asset entries are needed in your app.

Usage #

MusclePickerMap #

Lets users tap muscles to select them. Returns a Set<Muscle> on every change.

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

MusclePickerMap(
  map: Maps.BODY,           // see Body Maps below
  onChanged: (muscles) {
    print(muscles);         // Set<Muscle>
  },
  strokeColor: Colors.black,
  selectedColor: Colors.blue,
  actAsToggle: true,        // tap again to deselect
  initialSelectedGroups: ['chest', 'biceps'],
)

MuscleIntensityMap #

Displays muscles colored by intensity level. Pass an initialSelectedGroups map of group name → MuscleIntensity.

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

MuscleIntensityMap(
  map: Maps.FEMALE_BODY,
  initialSelectedGroups: {
    'chest':     MuscleIntensity.light,
    'biceps':    MuscleIntensity.hard,
    'triceps':   MuscleIntensity.hard,
    'shoulders': MuscleIntensity.medium,
  },
  onChanged: (muscles) {},
  strokeColor: Colors.black,
)

Body Maps #

Corresponding male and female views expose the same muscle IDs and group keys. Both widgets accept all six maps:

MusclePickerMap(map: Maps.FEMALE_FRONT_BODY, onChanged: (muscles) {})

Helpers for building a switcher:

Maps.male                        // [BODY, FRONT_BODY, BACK_BODY]
Maps.female                      // [FEMALE_BODY, FEMALE_FRONT_BODY, FEMALE_BACK_BODY]
Maps.isFemale(map)               // true for any female map
Maps.familyOf(map)               // the full / front / back trio of that body
Maps.toggleGender(Maps.BACK_BODY) // -> Maps.FEMALE_BACK_BODY

Changing map reloads the diagram and reinitializes its selection from initialSelectedGroups or initialSelectedMuscles. To retain selected groups when switching views or bodies, keep those group keys in your app's state and pass them through initialSelectedGroups for the new map. A front-only or back-only view displays only the regions present in that view.

The diagrams are stylized exercise-selection maps. Female variants include revised body proportions, hair, hip/glute contours, and hands while preserving the muscle-region contract.

Customization #

For example, color individual regions in a picker:

MusclePickerMap(
  map: Maps.FEMALE_FRONT_BODY,
  initialSelectedGroups: ['chest'],
  muscleColors: {
    'chest1': Colors.teal,
    'chest2': Colors.teal,
  },
  strokeColor: Colors.black,
  onChanged: (muscles) {},
)

Muscle Groups #

The following group keys can be used with initialSelectedGroups:

chest, shoulders, obliques, abs, abductor, biceps, calves, forearm, glutes, harmstrings, lats, upper_back, quads, trapezius, triceps, adductors, lower_back, neck

Use the legacy spelling harmstrings when targeting the hamstrings group. Group keys such as chest select multiple regions; individual IDs such as chest1 and chest2 identify paths in the SVGs.

Example #

The example app demonstrates selection, intensity colors, styling options, and the Male / Female and Full / Front / Back controls. From a checkout of this repository, run:

cd example
flutter pub get
flutter run

Development #

Run the package checks from the repository root:

flutter test
flutter pub publish --dry-run

The map tests check bundled assets, matching muscle IDs, parseable paths, compatible geometry bounds, and the body-switching helpers. See tool/README.md for regenerating the female SVGs.

Credits #

Forked from muscle_selector by EmilCes.

License #

See LICENSE.