Images & Animations

The app ships with two kinds of visual assets you can swap out to make it your own:

• Images — the icons, backgrounds, and UI illustrations shown throughout the app.
• Animations — the animated splash, coins, achievements, and other motion elements.

Unlike settings and identifiers, these aren't managed from the Setup Page — you swap them directly in the project folder. The app picks up your replacements on the next build.

Where the files live

All visual assets live inside the assets/ folder at the root of the project:

• assets/images/ — static images (icons, backgrounds, illustrations).
• assets/animations/ — animated files.

You can open both folders in your regular file manager (Finder on macOS, File Explorer on Windows, Files on Linux) and see everything at once.

Swapping an image

The images folder contains a mix of file types:

• SVG files (like back_icon.svg, logo.svg, help_icon.svg) — vector icons that stay sharp at any size.
• PNG files (like logo.png) — used where a vector isn't practical.

To replace one:

1. Find the image you want to swap (e.g. back_icon.svg).
2. Prepare your replacement in the same format (SVG stays SVG, PNG stays PNG) and keep it a similar size and shape so it fits the UI.
3. In your file manager, copy your new file into assets/images/ using the exact same filename as the original.
4. Confirm the overwrite when prompted.

Important — keep the filename exactly the same. The app looks up images by filename in the code. If you rename back_icon.svg to myback.svg, the app won't find it.

Swapping an animation

The animations folder contains Rive files — .riv is the file format used by Rive, a modern animation tool.

Examples of animations you can replace: splash_animation.riv, coin_animation.riv, achievement_animation.riv, star_animation.riv, and several more.

To replace one:

1. Design your new animation in the Rive editor (free to sign up, easier to use than a code editor).

2. Export it as a .riv file.
3. Copy your new .riv file into assets/animations/ using the exact same filename as the original.
4. Confirm the overwrite when prompted.

Not a designer? You can browse ready-made animations on the Rive Community marketplace — many are free and can be downloaded as .riv files directly.

Special sub-folders

A few folders inside assets/images/ are handled through other Setup Page pages — don't edit them by hand:

• assets/images/logo_data/ — the logo images used in the quiz itself. Edit these through Customisation → Trivia Data Customisation so the app's database stays in sync.
• assets/images/logo_data_backup/ — the pristine snapshot used by the "Restore from backup" button in the Trivia Data editor. Never touch these files manually.
• assets/images/flags_icons/ — country flag icons used by the language selector.
• assets/images/store/ — icons for in-app purchases and the store screen.

After swapping files — rebuild the app

Unlike settings changes, image and animation swaps don't need the sync command — but they do need a full rebuild of the app. Hot reload doesn't pick up new files in the assets/ folder.

Open a terminal in the project root and run:

flutter clean
flutter pub get

Then rebuild and run the app as usual (see Publishing → Build & Publish). Your new images and animations will appear.

Tips

• Keep file sizes reasonable. A large PNG or an over-engineered Rive animation can slow the app down noticeably on older devices. Test on a mid-range Android phone before releasing.
• Prefer SVG for icons. They stay crisp on every screen resolution and stay small on disk.
• Match the original's aspect ratio and transparency — if the original PNG has a transparent background, your replacement should too, otherwise you'll get an unexpected coloured square.
• Keep a backup. Before overwriting a file, copy the original somewhere safe. If you decide you preferred the original, you can restore it.

Common problems

• "The app still shows the old image after replacing it" — you haven't run flutter clean yet. Flutter aggressively caches assets; a clean rebuild fixes it every time.
• "The image looks stretched or off-centre" — your replacement has a different aspect ratio than the original. Re-export with the same width-to-height ratio.
• "The animation doesn't play" — the .riv file may have been exported with an unsupported feature. Open the animation in the Rive editor, check that it uses standard shapes and state machines, and re-export.