How to Create an AI-Based Language Learning App in FlutterFlow

Create two Firestore sub-collections under each user document. Collection 1: 'vocabulary' — one document per learned word with fields: word (String), translation (String), language (String), difficulty (Integer 1-5), interval (Integer, days until next review), easeFactor (Double, SM-2 ease factor, starts at 2.5), dueDate (Timestamp, next review date), repetitions (Integer, number of successful reviews), lastReviewedAt (Timestamp), exampleSentence (String). Collection 2: 'progress' — one document per skill area (vocabulary, grammar, listening, speaking) with fields: skillName (String), level (Integer 1-10), totalSessions (Integer), lastSessionAt (Timestamp), streakDays (Integer). This schema supports both spaced repetition scheduling and overall progress visualization.

Create a 'Conversation Practice' page with a chat-style interface: a ListView of message bubbles (alternating user and AI), a TextField at the bottom for user input, and a Send button. Store the conversation history in a Page State variable (List of Maps with 'role' and 'content' keys). Create a Cloud Function named 'languageTutor' that accepts: userMessage (String), conversationHistory (List), userLevel (String: 'beginner', 'intermediate', 'advanced'), targetLanguage (String). The function builds a system prompt tailored to the user's level before calling OpenAI's chat completions API. Call this Cloud Function from a 'sendMessage' Custom Action in FlutterFlow. Add the AI response to the conversation history and scroll to the bottom of the ListView.

1// Cloud Function: languageTutor
2// Proxies OpenAI calls with level-adaptive system prompts
3const functions = require('firebase-functions');
4const admin = require('firebase-admin');
5
6const SYSTEM_PROMPTS = {
7  beginner: `You are a friendly language tutor for complete beginners learning {language}.
8- Use ONLY simple vocabulary (A1-A2 level)
9- Keep sentences short (max 8 words)
10- After every AI turn, provide a vocabulary tip: 'New word: [word] = [translation]'
11- If the student makes an error, gently correct it once and move on
12- Never use idioms or complex grammar`,
13  intermediate: `You are a conversational language tutor for intermediate learners of {language}.
14- Use B1-B2 vocabulary and natural sentence structures
15- Engage in real conversation on everyday topics
16- Correct grammar errors by repeating the correct form naturally in your response
17- Introduce 1-2 new expressions per conversation turn`,
18  advanced: `You are a challenging language tutor for advanced {language} learners.
19- Use native-level vocabulary, idioms, and complex structures
20- Discuss nuanced topics (culture, current events, abstract concepts)
21- Provide corrections only for significant errors
22- Challenge the learner with follow-up questions that require complex responses`,
23};
24
25exports.languageTutor = functions.https.onCall(
26  async (data, context) => {
27    if (!context.auth) {
28      throw new functions.https.HttpsError('unauthenticated', 'Login required');
29    }
30    const { userMessage, history, userLevel, targetLanguage } = data;
31    const systemPrompt = (SYSTEM_PROMPTS[userLevel] || SYSTEM_PROMPTS.beginner)
32      .replace(/{language}/g, targetLanguage);
33    const messages = [
34      { role: 'system', content: systemPrompt },
35      ...history.slice(-10), // keep last 10 turns for context
36      { role: 'user', content: userMessage },
37    ];
38    const apiKey = functions.config().openai.key;
39    const response = await fetch('https://api.openai.com/v1/chat/completions', {
40      method: 'POST',
41      headers: {
42        'Authorization': `Bearer ${apiKey}`,
43        'Content-Type': 'application/json',
44      },
45      body: JSON.stringify({
46        model: 'gpt-4o-mini',
47        messages,
48        max_tokens: 300,
49        temperature: 0.7,
50      }),
51    });
52    const json = await response.json();
53    return { reply: json.choices[0].message.content };
54  }
55);

Create a Custom Function named 'calculateSM2' that implements the SM-2 algorithm. It takes the current ease factor, interval, repetitions count, and user's quality rating (0-5, where 0=complete blackout, 5=perfect recall) and returns the new ease factor, interval, and due date. The SM-2 formula: if quality >= 3, the card is a pass — new interval = previous interval x ease factor (rounded up); new ease factor = old ease factor + 0.1 - (5-quality) x (0.08 + (5-quality) x 0.02). If quality < 3, reset interval to 1 day and repetitions to 0. After each vocabulary quiz answer, call this function and update the Firestore vocabulary document with the new scheduling values.

1// Custom Function: calculateSM2
2// Returns new spaced repetition scheduling values
3Map<String, dynamic> calculateSM2(
4  double easeFactor,
5  int interval,
6  int repetitions,
7  int quality, // 0-5: 0=forgot, 3=correct with difficulty, 5=easy
8) {
9  double newEF = easeFactor;
10  int newInterval;
11  int newReps;
12
13  if (quality >= 3) {
14    // Correct response
15    if (repetitions == 0) {
16      newInterval = 1;
17    } else if (repetitions == 1) {
18      newInterval = 6;
19    } else {
20      newInterval = (interval * easeFactor).round();
21    }
22    newReps = repetitions + 1;
23    newEF = easeFactor +
24        (0.1 - (5 - quality) * (0.08 + (5 - quality) * 0.02));
25    if (newEF < 1.3) newEF = 1.3; // minimum ease factor
26  } else {
27    // Incorrect — reset
28    newInterval = 1;
29    newReps = 0;
30    newEF = easeFactor; // ease factor unchanged on failure
31  }
32
33  final dueDate = DateTime.now().add(Duration(days: newInterval));
34  return {
35    'easeFactor': newEF,
36    'interval': newInterval,
37    'repetitions': newReps,
38    'dueDate': dueDate.toIso8601String(),
39  };
40}

Create a 'Vocabulary Quiz' page. On page load, query Firestore: collection 'vocabulary' (sub-collection of current user) where dueDate <= now, ordered by dueDate ascending, limited to 20 words. Store the result as a Page State variable 'quizQueue' (list of vocabulary documents). Display the first word in the queue as a quiz card — show the word in the target language, wait for the user to tap 'Show Answer', then reveal the translation. Show 4 rating buttons: Forgot (0), Hard (3), Good (4), Easy (5) — matching SM-2 quality scores. On rating tap: call calculateSM2 Custom Function, update Firestore document with new scheduling values, remove the word from quizQueue, advance to the next card. When quizQueue is empty, show a completion screen with today's session stats.

Create a 'My Progress' page showing learning statistics. Add a streak counter at the top (query Firestore progress document, compute streak from lastSessionAt and current date). Add a vocabulary stats section: total words learned (count of vocabulary sub-collection documents), due for review today (count where dueDate <= now), mastered words (count where interval > 30 days). Add a simple bar chart or LinearProgressIndicator for each skill level (vocabulary, grammar, conversation). Below the stats, show the last 7 days of activity using a row of colored day indicators (green = studied, grey = missed). Update the progress document at the end of each quiz or conversation session.