Flutter + HTML5 Hybrid Architecture

Nuts & Bolts:
Screw Puzzle

Ultimate Physics-Based Screw Board Mechanics

A premium game wrapper around a high-performance Construct 3 puzzle canvas. Built in Flutter to serve assets locally over secure ephemeral server channels while binding native iOS/Android bridge APIs directly into the browser context.

Key Features Legal & Privacy
Capabilities

App Architecture & Features

A high-performance hybrid implementation optimized for modern mobile web views.

Local Asset Web Server

Bypasses WebAssembly, CORS, and local file sandboxing limits enforced by modern Android & iOS WebViews. By serving the HTML5/Wasm bundle from a secure, dynamic loopback port on local device sockets, the wrapper ensures instant resource rendering.

  • Zero CORS errors loading assets
  • Direct Wasm execution and local caching
  • Ephemeral port binding prevents external access

Bidirectional Bridge

Full bidirectional communication channel (`FlutterBridge`) connects the JS canvas context directly to Dart handlers.

  • Level progression tracking
  • Real-time coins & diamonds sync
  • Instant audio/mute sync

Back Press Navigation

Intuitive native navigation flows that intercept back events depending on current game layout.

  • In-game back press pauses current level
  • Menu back press returns to home screen
  • Exit back press triggers native exit sheet

Developer Test Bench

Built-in inspector console that renders event logs in real time. Provides developers with immediate actions to test game builds, inspect webview states, or inject custom payloads.

  • Event stream logging overlay
  • Quick action panel (Add coins/diamonds, unlock levels, mute)
  • Active Webview memory and state inspector

Custom Native Flutter Overlays

Rather than building overlays inside the HTML canvas, the app utilizes native Flutter widgets overlaid on top of the webview stack. This ensures completely smooth rendering, native platform fonts, and full hardware acceleration. Handles custom app rating requests, content sharing panels, and confirm-exit sheets.

Integration

Javascript-to-Dart Bridge System

The application implements a robust event bridge. When events are fired in Construct 3, they call standard window hooks. The Flutter wrapper registers JavaScript Channels, translating web clicks or game states into native operations.

Fast Execution

Direct hook evaluation without complex serialization layers.

Ad Integration

Fires load/show triggers directly to AdMob native services.

Progress Save

Saves states locally to localStorage with Dart backups.

Test Actions

Inject scripts directly from Dart to simulate game events.

bridge_inspector.log
[14:59:40] [Dart] AdMob initialized successfully.
[14:59:41] [Server] Local server listening on http://localhost:49152
[14:59:42] [JSBridge] FlutterBridge connected. Webview active.
[14:59:45] [Game] Level 1 Loaded. Grid size 5x5, metal plates: 4.
[14:59:51] [JSBridge] Trigger event: 'level_complete' (level: 1, stars: 3)
[14:59:51] [Dart] Saved coins = 100, stars = 3 to local database.
Revenue Model

AdMob Monetization Flow

Integration details of the google_mobile_ads package within the hybrid wrapper framework.

App Initialization

Google Mobile Ads SDK is initialized on application startup within `main.dart`. This guarantees ads are pre-cached and ready before the user completes the first levels, providing a seamless gameplay flow.

Double-Mode Ads Setup

The `AdHelper` class in `game_page.dart` manages IDs dynamically. In Debug builds, official standard Google test IDs are used automatically. Release builds automatically pull live production ad unit IDs configured securely.

Ad Triggers & State

The bridge communicates playback states dynamically. When the user requests hints, a rewarded ad triggers. Interstitial ads display during normal game progression transitions (e.g. exit prompts or menu changes).

Google Play

Store Metadata Info

Details, descriptions, and rules for store listings and optimization.

Short Description (Max 80 Chars)

Solve the ultimate screw puzzle! Unscrew nuts, bolts, & metal plates to win.

How To Play

  • 1 Tap a screw to unscrew it from its current position on the board.
  • 2 Tap an empty hole to insert the screw and lock adjacent pieces.
  • 3 Clear all elements (plates, planks, and metal bars) to successfully pass the level.
  • 4 Use boosters like the Drill or system hints when facing complex challenges.

Game Features

  • Challenging Puzzles: Hundreds of handcrafted levels ranging from casual tests to complex logical challenges.
  • Offline Support: Play fully offline anywhere, anytime without an active internet connection.
  • Realistic Physics: Experience satisfying physical movement, weight shifts, and collisions.
  • Sleek Visuals & ASMR: Premium graphics matched with soothing mechanical sounds.
  • Unlockable Customization: Use earned coins and diamonds to purchase unique skins for boards and screws.

Full Description

Welcome to Nuts & Bolts: Screw Puzzle – the ultimate brain-teasing physics puzzle game designed to test your spatial reasoning and problem-solving skills! Unscrew, reposition, and secure metal plates, bars, and wood blocks by placing screws in empty holes. Can you unravel the tangled metal structures and clear the board? Each level offers a unique design with progressively challenging logic. Are you ready to test your brain? Download Nuts & Bolts: Screw Puzzle today and unscrew your way to victory!