Learning an abugida writing system like Devanagari presents distinct pedagogical hurdles for children and beginner language learners. Unlike Latin alphabets where vowels and consonants are placed sequentially, Devanagari attaches vowel modifiers (matras) above, below, before, or after base consonants.

When learning to read Hindi, students must master:

  1. Primary Vowels (Swar) and Consonants (Vyanjan).
  2. The 14 modifying Matras attached to base consonants.
  3. Hindi numerals (१ to १००) and their irregular verbal names.
  4. Everyday conversational phrases.

Akshar was designed as an offline-first, distraction-free Flutter learning companion. Here is the technical breakdown of how its data structures, layout ribbons, and adaptive flashcard screens were engineered.

1. Information Architecture & State Model

Like our other educational apps, Akshar strictly rejects heavyweight state management frameworks (Bloc/Riverpod/Redux) in favor of localized StatefulWidget hierarchies and immutable data structures:

akshar/
├── lib/
│   ├── models/
│   │   ├── hindi_word.dart       # HindiWord(hindi, phonetic, english, matra)
│   │   └── hindi_number.dart     # HindiNumber(value, numeral, word, phonetic)
│   ├── data/
│   │   ├── hindi_words.dart      # Catalog of ~130 base and matra-specific words
│   │   ├── hindi_numbers.dart    # Full 1 to 100 numerals and pronunciations
│   │   └── hindi_phrases.dart    # Categorized conversational sentences
│   └── screens/
│       ├── home_screen.dart           # 4-tile balanced navigation dashboard
│       ├── alphabet_screen.dart       # Vowel & Consonant character matrices
│       ├── translation_screen.dart    # Practice screen with matra sidebar ribbon
│       ├── numbers_groups_screen.dart # Tabbed 10-group numeral explorer
│       └── phrases_screen.dart        # Sentence deck with adaptive typography

2. Word & Matra Modeling

Every practice word in the catalog links its base spelling, phonetic transliteration, English definition, and associated vowel mark:

class HindiWord {
  final String hindi;      // e.g. 'किताब'
  final String phonetic;   // e.g. 'kitaab'
  final String? english;   // e.g. 'book'
  final String? matra;     // e.g. 'i' (matches Matras.all[n].phonetic)

  const HindiWord({
    required this.hindi,
    required this.phonetic,
    this.english,
    this.matra,
  });
}

Using phonetic strings rather than brittle integer enums allows new matras (such as Chandra Bindu or Halant) to be registered without cascading migrations across existing datasets.

3. The Translation Practice Screen & Matra Ribbon

The translation screen tests reading comprehension by presenting a Hindi word and prompting the student to type or select its English meaning.

+─────────────────────────────────────────────+────────+
|  [ <- ]           अभ्यास (Practice)         |  (ा)   | <-- 88px Matra Ribbon
+─────────────────────────────────────────────+  (ि)   |
|                                             |  (ी)   | Filters words
|                कबूतर                         |  (ु)   | by vowel mark
|                                             |  (ू)   |
|         [ English / Phonetic Input ]        |  (े)   |
|                                             |  (ै)   |
|           [ जाँचो / Check Button ]          |  (ो)   |
|                                             |  (ौ)   |
+─────────────────────────────────────────────+        |
|  [👁️ Press & Hold: Dual Phonetic + English] |  (ं)   |
+─────────────────────────────────────────────+────────+

1. The 88px Matra Filter Ribbon

A vertical right-hand drawer ribbon lists all 14 matras. Tapping a matra immediately slices the active study deck to only words featuring that specific vowel sign, allowing children to practice focused sound clusters (e.g. practicing short Chhoti I vs long Badi EE).

2. Dual Press-and-Hold Peek

Rather than a binary “Show Answer” button that ruins recall testing, the peek button requires continuous pressure. Releasing the button hides the answer immediately. The peek card renders both the Latin phonetic pronunciation and English translation simultaneously:

GestureDetector(
  onTapDown: (_) => setState(() => _isPeeking = true),
  onTapUp: (_) => setState(() => _isPeeking = false),
  onTapCancel: () => setState(() => _isPeeking = false),
  child: Container(
    padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 14),
    decoration: BoxDecoration(
      color: Colors.amber.shade100,
      borderRadius: BorderRadius.circular(12),
    ),
    child: Text(_isPeeking ? '${word.phonetic} • ${word.english}' : 'दबाकर देखें (Hold to Peek)'),
  ),
)

4. Hindi Numerals 1–100: Tabbed Decades

Unlike English where numbers 20 through 99 follow regular tens-plus-units conventions (“twenty-one”, “thirty-four”), Hindi numbers between 1 and 100 are largely irregular and must be memorized individually.

We evaluated four UI patterns (flashcards, a giant 100-tile grid, 3D flip cards, and tabbed decades). Testing showed that a full 100-cell grid overwhelmed children, while single flashcards made comparative scanning impossible.

We selected NumbersGroupsScreen:

  • 10 horizontal category tabs: १–१०, ११–२०, २१–३०, $\dots$, ९१–१००.
  • Each tab renders a clean 2-column grid of 10 cards.
  • Each card displays the Devanagari numeral (४२), the Arabic equivalent (42), the Devanagari word (बयालीस), and the phonetic guide (bayaalees).

5. Phrases Screen & Adaptive Text Sizing

Sentences in Hindi vary dramatically in length, from simple two-word greetings (नमस्ते!) to multi-clause questions (आपका नाम क्या है?).

To prevent ugly text clipping on smaller 5-inch phone screens, the sentence viewer dynamically calculates its font scale based on character count:

double calculateAdaptiveFontSize(String text) {
  if (text.length < 15) return 32.0;
  if (text.length < 30) return 24.0;
  return 18.0;
}

Paired with automatic deck shuffling on entry and a warm saffron-to-amber color scheme, the app provides a focused environment for mastering the foundations of Hindi.