LIVE PREVIEWBUY FOR $18

Mieo kids language-learning app UI kit for Flutter and Figma: Mieo the bear flying over the level map, lesson and streak screens
What you get: the Figma design file with 42 screens and 21 component sets, and the Flutter app with 34 screens and 1,704 tests
Eight key features: level map, playful lessons, speaking with Mieo, daily streak, weekly league, stories, mistake review and the gem shop
Welcome and setup flow: welcome, say hi to Mieo, pick a language, set a daily goal and save the journey
Home and levels: the endless level map, Explore Levels, level details, switching course and refilling hearts
Lessons: choose the word, right answer, build the sentence, cheers from Mieo and lesson results
Talk and stories: Mieo asks a question, try again, video call, pick a story and a story quiz
Streak and league: streak calendar, streak kept, milestone reward, weekly league and the week's end
Shop, Pro and profile: gem shop, Mieo Pro subscription, profile, settings and edit profile
Alive in code: Mieo's animated poses, motion counts, an app icon with moods, daily notifications and home screen widgets
Light and dark mode: home, lesson and shop screens in both themes, with right-to-left Urdu and tablet support
Clean Flutter codebase: project structure, real code, architecture, quality scores and the tech stack
Design system: six colour scales, Nunito type styles, Figma tokens mapped to Dart, and spacing tokens
21 component sets with every state: buttons, fields, answer blocks, talk bubbles, badges and cards
Get started with Mieo: open the Figma file and the Flutter source code
Mieo language learning app UI kit by WRTeam

Mieo – Language Studying Flutter App UI Template for Youngsters

34 screens and seven sheets. Mild and darkish themes. English and Urdu with full RTL. Telephones and tablets. Clear, examined Flutter code.

A whole, playful Flutter UI template for a kid-friendly language-learning app, guided by Mieo the bear. Learners arrange their course, stroll a stage map, play classes, maintain a day by day streak, climb a weekly league, take heed to tales, speak with Mieo and spend gems within the store. Run flutter pub get, hit run, and each journey is browsable in a few minutes, with no backend or configuration required.

Stay demo: https://mieo-ui8.web.app/

Demo Directions

Signal-in is simulated, so the types settle for any well-formed enter. You possibly can discover each display within the dwell demo or in your system:

  • New learner: faucet Let’s Get a Contemporary Begin on the welcome display to fulfill Mieo and reply the setup questions (native language, language to be taught, stage, day by day objective)
  • Login: faucet Resume Journey, then any legitimate electronic mail (for instance [email protected]) and any password
  • Create profile: any identify, a legitimate electronic mail, a gender and an age from 1 to 120
  • Classes: faucet the present stage on the House map, choose a solution and faucet Examine
  • Settings: Profile > Settings for Darkish Mode (an animated theme change) and Change Language (English, Urdu proper to left); each are remembered between launches

Why Mieo

  • Runs out of the field. Demo repositories energy each display, so no server, database or credentials are wanted to discover the app.
  • A personality that comes alive. Mieo is drawn and animated in code and with Rive: he walks the extent map, writes your solutions in his pocket book, cheers, waves and reacts to faucets, crisp at any dimension.
  • Gamification in-built. Hearts, gems, XP, day by day streaks with a calendar and rewards, a weekly league with a podium, achievements and a Professional subscription.
  • Limitless stage map. The winding path, its nodes and surroundings are generated from knowledge and drawn in code, so it helps any variety of ranges.
  • Function-first structure. 13 function modules every personal their screens, widgets, fashions and knowledge; 56 shared widgets and centralised color, spacing, kind and movement tokens dwell in a single place.
  • Clear, examined codebase. 373 Dart information with zero flutter analyze points, plus 1704 widget checks that examine each display on telephones and tablets, in mild and darkish, English and Urdu, at 1.3× textual content.
  • Native extras. Every day notifications, three residence display widgets, an app icon that adjustments with the time of day and sharing a stage or a streak as an image, on Android and iOS, and not using a server.

34 Screens and seven Sheets

  • Begin and setup: Splash, Welcome, Hiya from Mieo, Setup Intro, Native Language, Studying Language, Degree, Every day Aim, Course Loading, Save Your Journey, Login, Create Profile
  • Be taught: House stage map (with Programs and Hearts panels), Discover Ranges, Degree Particulars, Lesson (select the choice, construct the sentence) with its suggestions sheet, Stay Query, Cheers, Outcomes, Overview Errors, Overview Take a look at, Tales, Story with its query sheet, Speak with Mieo (voice name)
  • Streak: Streak with a calendar, Streak Saved, Streak Reward, Subsequent Aim
  • Compete and store: Leaderboard with the Missed Week sheet, Store, Professional Subscription
  • Account: Profile, Settings with the Language sheet, Edit Profile
  • Sharing: a stage or a streak shared as an image from its share sheet
  • Type Information: each color, textual content model, spacing, radius and shadow token rendered by means of the dwell theme

Options

  • Mild and darkish mode from a centralised color token system, with an animated round theme change
  • English and Urdu with full right-to-left structure, painters included; including a language takes a JSON file and two quick code edits
  • Responsive on telephones and tablets, portrait and panorama, with textual content scaling as much as 130%
  • Animated onboarding: Mieo falls in, hops throughout the pedestals and waves when tapped
  • Classes with possibility tiles, phrase blocks that fly into place, hints, verdicts with confetti, and hearts gained and misplaced
  • Stay query and voice-call scenes with Mieo reacting, and tales advised by animated characters
  • Every day streak with a spread calendar, milestones, gem rewards and a objective picker
  • Weekly league with a podium, a cloudy sticky record and the learner’s personal row highlighted
  • Profile with stats, achievements and apply tiles; Settings with an avatar carousel
  • Validated login, create-profile and edit-profile types with keyboard dealing with
  • 35 named GetX routes declared in a single file, with easy web page and tab transitions
  • Nunito font bundled for offline use
  • Android and iOS configured, launch signing pre-wired, native launch screens in mild and darkish
  • Net construct inside a tool preview, able to host as a dwell demo

Necessities

  • Flutter 3.47 or newer (secure channel) with Dart 3.13.3 or newer
  • Android Studio or VS Code
  • Xcode (newest secure) with CocoaPods for iOS builds; iOS 15+ (residence display widgets iOS 17+)

Tech Stack

Flutter / Dart · GetX (routing and translations) · flutter_bloc (Cubits) · hive · flutter_svg · rive · share_plus · flutter_localizations · device_preview (internet demo solely)

Hostinger

What You Get

  • Full Flutter supply code for Android, iOS and Net, together with the Android and iOS residence display widgets
  • The Figma design file (.fig): 42 screens and three sheets in mild and darkish, 21 part units and each design token
  • All picture, icon, Rive animation and font belongings
  • Localization information for English and Urdu, and 108 day by day notification texts in each
  • 1704 widget checks
  • Step-by-step documentation with screenshots in mild and darkish, offline (HTML and PDF)

Documentation

The obtain consists of offline documentation in HTML and PDF (Documentation/). It covers:

  • Getting began, step-by-step for non-technical patrons and builders: putting in Flutter and an editor, opening the mission, working it on an emulator, a telephone or the net, and constructing a launch
  • Customise: app identify, package deal identify / bundle identifier, colors, fonts, emblem, launcher icon, splash display, translations, including a language, demo knowledge, notifications and widgets
  • Simulated options: which flows are demos and join an actual backend
  • Screenshots of the principle screens in mild and darkish mode
  • Undertaking construction, launch signing, troubleshooting, credit and changelog

Vital Notice

Mieo is a UI template / front-end app package. It does not embody a backend, admin panel, database, cost gateway, advert community or speech service. All content material is served from native demo knowledge so each display is browsable instantly. The information layer is separated behind repository courses, making it simple to attach your personal API.

Signal-in, purchases, adverts, the dwell query’s microphone and the voice name are simulated: nothing is recorded, despatched to a server or charged. Every day notifications, the house display widgets, the altering app icon and sharing work on the system.

Third-Celebration Providers and Prices

None are required: the template runs with none API keys, and no keys are included. Should you join your personal companies (for instance sign-in, funds, adverts, push notifications or speech recognition), you employ your personal accounts, and any utilization prices are your accountability.

AI Disclosure

AI-assisted instruments had been used through the improvement of this merchandise, to assist write and evaluation components of the code and the documentation. Every little thing was reviewed, examined and finalised by our crew. The app itself has no AI-powered options and sends no knowledge to any AI service.

Credit

  • Nunito font by The Nunito Undertaking Authors, SIL Open Font License 1.1 (licence file included)
  • Open-source Flutter packages listed within the Tech Stack (MIT, Apache 2.0 and BSD-3-Clause licences; particulars within the documentation)
  • Design and Mieo the bear by WRTeam Design

Changelog

Model 1.0.0 – Preliminary launch

Help

Merchandise help is supplied in keeping with Envato’s Merchandise Help Coverage. If in case you have a query earlier than or after buy, get in contact by means of the merchandise help tab.

If Mieo helped you ship sooner, a score is genuinely appreciated. Thanks in your help!


Source

Namecheap Best Deals