Devlog #4 — Splash Screen + Setup Screen (˶ᵔᗜᵔ˶)ﾉﾞ
Hello everyone!! This is my last devlog for that 80 hrs ( busy with school stuffs) . BEfore it had only 15 language in a big dart file now i did it better and debugged for 3 hrs and had like 28 json files to make it devlog presentable .This one covers the splash screen and the setup screen.
The Splash Screen
the splash screen is the first thing you see when you open Tutorio. The Tutorio logo fades in smoothly on a white background over 1.5 seconds, with a “LOADING…” label and a blue progress bar fading in underneath. Stays for 3 seconds then moves to login. I wrapped the progress bar in a ClipRRect to give it rounded edges instead of the ugly default sharp corners, and made sure to check mounted before navigating so it doesn’t crash if the user somehow exits early.
The Setup Screen
After login and signup, new users hit the setup screen before accessing anything else. This is genuinely the most important part of Tutorio’s whole concept — because the app is built specifically for international students, I need to know who you are before the AI can actually help you properly.
The screen is split into two steps using a PageView with NeverScrollableScrollPhysics so users can only move forward using the button, not by swiping. Step 2 captures the student profile — grade, school system , home country, learning style, daily study time, and target SAT score. All six required. Once done it saves to Firestore under the user’s UID with setupComplete: true so this screen never appears again.
Step 1 is where it got interesting. I needed to support 28 languages with their flags in a grid — Arabic, Bengali, Hindi, Nepali, Mandarin, Vietnamese, Turkish and more. My first instinct was to just keep everything in a giant Dart map directly in the code, something like:
dartconst Map<String, Map<String, String» localizedValues = {
‘en’: {‘welcome’: ‘Welcome to Tutorio!’},
‘ar’: {‘welcome’: ‘مرحباً بك في Tutorio!’},
};
And honestly for like 2-3 languages this works fine. Zero setup, no async loading, VS Code catches typos instantly. But the second I scaled to 27 languages it completely fell apart.
The Dart files were getting thousands of lines long and impossible to read. If I wanted someone to fix a typo in Vietnamese or Turkish I’d have to hand them a raw .dart code file which is both a security risk and a syntax disaster waiting to happen. And worst of all, Flutter would load every single language’s strings into RAM at launch even though the user only needs one language active at a time. Complete waste.
So I switched everything to external JSON files — en.json, ar.json, ne.json, one per language — all sitting inside assets/translations/. Then integrated the easy_localization package which lets me just call .tr() on any text widget anywhere in the app:
dartText(‘welcome_msg’.tr())
The package dynamically opens the correct JSON file based on whatever language the user picked in setup, extracts the right string, and swaps it in on the fly. The Dart code went back to being clean UI logic with zero hardcoded text sitting in it.
The best part — if I want to add language number 29, I don’t touch a single line of Flutter code. I just drop a new .json file into the translations folder and it works.
Bugs I hit along the way 😭
Broken Imports: Restructuring into subfolders broke every import path reference and I had to fix them all manually. Not fun.
Cascade Failure: An empty placeholder .dart file caused a domino effect and broke 4 other working files at once. Took forever to figure out what happened lol.
Deprecation Warnings: Had to swap every .withOpacity() call across the project for the new .withValues(alpha:) method.
Anyway that’s everything!! Next devlog covers the home screen and AI question engine. See you then (˶ᵔᗜᵔ˶) ✧
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)