How to Create a Role-Playing Game Character Builder in FlutterFlow

In Firestore, create a characters collection with fields: userId (String), name (String), className (String), level (Integer, default 1), avatarUrl (String), stats (Map — contains keys: strength, agility, intelligence, stamina, charisma, luck, each with Integer values), derivedStats (Map — contains: hp, maxHp, attack, defense, magic, speed), skills (Array of Strings — skill IDs), totalPointsSpent (Integer), createdAt (Timestamp). In FlutterFlow's Firestore panel, import the schema. The stats Map approach stores all six stats in one field rather than six separate fields — this makes batch updates efficient and lets you iterate over all stats in Custom Functions.

Create a ClassSelection page. Add four Page State variables: selectedClass (String, default 'warrior'), classBaseStats (Map — stores the base stat bonuses for the selected class), currentPage (Integer, default 0). Add a PageView widget. Inside it, create four class cards — one per page. Each card has a class illustration Image, a class name Text, a description Text, and a list of base stat bonuses (e.g., Warrior: +3 Strength, +2 Stamina). When the PageView's page changes, update selectedClass and load the corresponding base stats into classBaseStats. Add Next and Previous buttons below the PageView that call ScrollTo actions targeting the PageView. Add a Select This Class button that navigates to the StatsAllocation page, passing selectedClass and classBaseStats as parameters.

Create a StatsAllocation page with parameters: selectedClass (String) and classBaseStats (Map). Add Page State variables: strength (Integer, default 1), agility (Integer, default 1), intelligence (Integer, default 1), stamina (Integer, default 1), charisma (Integer, default 1), luck (Integer, default 1), pointsRemaining (Integer — set default to totalPointPool, e.g., 20). Add six Slider widgets, one per stat. Each Slider has a min of 1 and a max that is dynamically calculated as the stat's current value plus pointsRemaining — this prevents the slider from exceeding the available pool. Bind each Slider to its Page State variable. On each Slider's On Change action: calculate the delta (newValue minus currentValue), update the stat variable, and subtract the delta from pointsRemaining. Display pointsRemaining prominently so users can see how many points they have left.

1// Custom Function: calculateDerivedStats
2// Arguments: strength (int), agility (int), intelligence (int),
3//            stamina (int), charisma (int), luck (int), className (String)
4// Return type: String (JSON)
5import 'dart:convert';
6
7String calculateDerivedStats(
8  int strength, int agility, int intelligence,
9  int stamina, int charisma, int luck, String className,
10) {
11  final hp = 50 + (stamina * 10) + (strength * 5);
12  final attack = (strength * 3) + (agility * 2);
13  final defense = (stamina * 2) + (strength * 1);
14  final magic = (intelligence * 4) + (luck * 2);
15  final speed = (agility * 3) + (luck * 1);
16  return json.encode({
17    'hp': hp, 'maxHp': hp,
18    'attack': attack, 'defense': defense,
19    'magic': magic, 'speed': speed,
20  });
21}

Create a SkillTree page. Add a Backend Query fetching from a skills Firestore collection, filtered by className equals the selected class parameter. The skills collection has fields: id (String), name (String), description (String), iconUrl (String), requiredLevel (Integer), prerequisiteSkillId (String — for unlocking chains), className (String). Add a GridView showing 3 columns of skill cards. Each card shows the skill icon, name, and a lock/unlock indicator based on whether the user's level meets requiredLevel. On tap of an unlocked skill, add it to a Page State variable selectedSkills (List of Strings). Show the selected state with a highlight overlay using Conditional Visibility. Cap the maximum selectable skills using a Conditional on the tap action that checks selectedSkills length before adding.

On the final confirmation screen, show a summary of the character: class, stats, derived stats, and selected skills. The Save Character button calls a Firebase Cloud Function named validateAndSaveCharacter instead of writing directly to Firestore. The Cloud Function receives the character data, recalculates the total points spent (sum of all stat values minus 6, since minimum is 1 for each stat), verifies it does not exceed the allowed pool (e.g., 20), checks that selectedSkills belong to the chosen class, and then writes the document to Firestore. In FlutterFlow, create an API call targeting this Cloud Function. On success, navigate to the character's profile screen. On failure, show a Snack Bar with the validation error.