Alpha eSIM store | Flutter

A mobile-first global eSIM marketplace app built in Flutter. Dark/techy/neon "connectivity" aesthetic — gradient accents, glass cards, monospace data — with a light theme, 4 accent gradients, and a density control, all switchable at runtime.

Full documentation: open ../Documentation/index.html in any browser. That manual is the single source of truth for this item — it covers installation, branding, all 26 screens, backend/payment integration and an FAQ. This README is a quick developer-facing summary of the same information.

UI template (front end only). All countries, plans, eSIMs, usage figures and support content are plausible-but-fake demo data. No backend, carrier/eSIM provisioning or real payment processing is included — the code is structured so you can connect your own API.

Third-party costs. Connecting this template to external services — REST or GraphQL APIs, eSIM/carrier provisioning providers, and payment gateways such as Stripe or PayPal — requires your own accounts with those providers. They charge their own separate fees, subscription and transaction costs, billed directly to you and not included in the price of this item. See section 20 of the documentation.

Run it

flutter pub get
flutter run                    # on a connected device/emulator
# or build artifacts:
flutter build apk --debug      # Android
flutter build web              # Web

Toolchain in use: Flutter 3.10.6 / Dart 3.0.6, Android SDK 33, Java 17 (forced for Gradle via the machine-global ~/.gradle/gradle.properties). No third-party plugins — only cupertino_icons, so it builds and runs fully offline.

Screens (26)

Navigation is custom (thin wrappers over Navigator): a pre-auth flow (splash → onboarding → login/register), a 4-item floating bottom tab bar, and a push stack for detail screens. State lives in two ChangeNotifiers exposed through one InheritedWidget (AppScope).

Flow & shell

Tabs (bottom bar)

Shop / buy flow

Manage

Settings & Support

Project structure

lib/
├─ main.dart                      # runApp(GlobalEsimApp()) + global density zoom
├─ app_scope.dart                 # InheritedWidget → context.tk / .store / .themeCtl
├─ nav.dart                       # push / pop / replace / reset (slide + fade)
├─ theme/
│  └─ tokens.dart                 # Tokens (resolved design tokens) + ThemeController
├─ state/
│  └─ app_state.dart              # AppState: cart, eSIMs, favourites, tab
├─ data/
│  └─ data.dart                   # models + mock content (countries, plans, help…)
├─ widgets/                       # ONE widget per file, grouped by category
│  ├─ widgets.dart                #   barrel — screens import only this
│  ├─ buttons/  gradient_button · ghost_button · pill · icon_bubble · back_button · app_toggle
│  ├─ cards/    glass_card
│  ├─ inputs/   app_text_field · app_search_bar
│  ├─ display/  gradient_text · stat_widget · flag · data_ring · brand_mark · qr_code
│  ├─ layout/   app_background · screen_header · section_title
│  └─ feedback/ empty_state · toggle_row
└─ screens/                       # grouped by feature
   └─ onboarding · shop · checkout · manage · main_shell · settings · support

Import a single barrel (widgets/widgets.dart) and you get every reusable component.

Layering

theme / state / data have no UI dependencies → widgets build on them → screens compose widgets → main.dart + app_scope.dart wire state and routing.

Architecture notes

• State & theme — AppState (cart / eSIMs / favourites / tab) and ThemeController (dark, accent, density) are both ChangeNotifiers, provided via AppScope (an InheritedWidget). Read them with context.store, context.themeCtl and the resolved tokens with context.tk.
• Theme tokens — every colour, gradient, font and radius comes from theme/tokens.dart. Change the palette or accents in one place.
• Density — a global content-zoom (Compact 0.82 / Medium 0.9 / Comfortable 1.0) applied in main.dart's MaterialApp.builder; switch it in Profile → appearance.
• Custom painting — the brand mark, data ring, coverage radar and QR code are pure CustomPainters (no chart/QR packages).
• Fonts — uses the platform default + monospace (no google_fonts), so it builds and runs without network.

Customize in 60 seconds

UI generated from a Claude Design handoff and implemented in Flutter.

Technical details

What's in the download