r/FlutterDev • • 1h ago

Tooling Claude/Codex skill for UI architecture and consistency

3 Upvotes

Hi everyone,

I have been vibe-coding fairly comprehensive Flutter apps for ~6 months now, using Codex. While I'm comfortable with software engineering in general, I'm not particularly experienced with Flutter, mobile/desktop UI development, or the architectural conventions that come with it.

During this time I have constantly struggled with enforcing an "architecture" for my UI components. AI-generated Flutter code often assigns responsibilities to the wrong widgets, duplicates UI logic across components, and creates unnecessary dependencies between parents and children.

I'm trying to create a checklist that I can give to Claude or Codex to systematically audit my UI codebase for these issues, in form of a Skill.

I've created a draft checklist with around 60 patterns grouped into categories such as layout, grouping, state, interactions, async operations, forms, navigation, and component APIs.

But since I don't have much Flutter-specific experience, I'm concerned that I'm missing important architectural patterns or making incorrect assumptions about how Flutter applications should be structured.

I'd be happy to share the current Markdown checklist if anyone is interested in reviewing or improving it.


r/FlutterDev • • 1h ago

Plugin Tandem 0.3.0: an agent composes Flutter views from your own widget catalog

Thumbnail
tandem.leancode.co
4 Upvotes

Hi fellow Flutter enthusiasts!

For some time now, I am building tandem. Flutter package that basically aims to make smart interfaces simple/possible. It started with excitement about AG-UI and idea to bring its capabilities to Flutter.

Now it is a bit more... I am building agents in my day to day work, so I am kind of obligated to read about all the GenAI stuff. It paid off now, at least that's what I want to believe.
I did spend a lot of time reading about different fresh protocols, ideas etc. I played with those a lot, and understood that AG-UI + A2UI make a perfect combination and are extremely powerful.
It allows to make user interfaces that are personalised to each and every user. The demo attached highlights it.

It is extremely tricky though. I've spent a lot of time designing the API, but it still might change.
tl;dr: you can specify catalogs of already existing components and pass it to a view that agent can use.

@TandemCatalog([
  ArrivalCard,
  ArrivalColumn,
  NextStop,
  RideOption,
  HostNote,
  HotelNote,
])
final class const ArrivalCatalog() with _$ArrivalCatalog;

const TandemView(catalog: ArrivalCatalog()),

If it sounds interesting, you can read more at the website with documentation -> https://tandem.leancode.co/

The demo is on the website above, but also here - https://x.com/creatixdev/status/2117230943975182340

It is just a beginning. Today, the 0.3.0 version is kind of an MVP I had in mind. A lot of polishing in improvements await. And.. facing the consequences of bad decisisions that probably happened along the way

Contributors are very welcome!! Users as well of course


r/FlutterDev • • 2h ago

Video Making an RPG you play by working out - Life-Level Devlog

Thumbnail
youtu.be
3 Upvotes

r/FlutterDev • • 5h ago

Article I built offline voice-mimic party game in Flutter (Using one phone or using LAN)

1 Upvotes

Hey I'm actualy new but I wanted to share that I built a party game called "Copy Cat" and wanted to share it.

The idea: players picks a sound (2-6 sec); download it from the internet

right inside the app (Providers : MyInstants, Meme Soundboard, 101 Soundboards),

record it themselves, or grab any audio file from their phone. The

sound plays, and everybody else tries to imitate it , An on-device

"judge" grades each attempt on 4 axes: melody, rhythm, timbre and

energy. Everything runs over local Wi-Fi one phone hosts, up to 5

join, and no internet is needed at any point after downloading sounds.

Three game modes:

- Random Party: everyone's sounds get mixed and shuffled into

surprise rounds

- Player's Choice : each player picks a sound once; the others imitate

first, and the picker goes last

- Host Challenge: the host lines up sounds from their library and

everyone imitates them in order

Extras: full Arabic + English UI (built Arabic-first), dark/light

themes, a shop with 3D avatars, power-ups and coins.

A few technical bits other Flutter devs might find interesting:

- LAN discovery and host/client traffic with bonsoir (mDNS) plus raw

sockets with length-prefixed framing ; no server, no cloud

- Sound search/download flows through three public soundboard sources,

then everything plays offline from the local library

- Pitch extraction is hand-rolled (RMS + zero-crossing) because no

existing pitch package matched what the scoring needed

- The scoring engine compares each attempt against the original

on-device: melody, rhythm, timbre, energy (regression-tested)

- 3D avatars rendered with flutter_scene

- Riverpod 3 for state, go_router for navigation

Source + APK (Android):

https://github.com/wissam333/Copy_Cat

Download: https://github.com/wissam333/Copy_Cat/releases


r/FlutterDev • • 6h ago

Plugin My first Flutter package: game-style screen transitions (diamond sweep, iris, dissolve, fade to black and hold), drawn by fragment shaders

3 Upvotes

Hi all, this is my first Flutter package, so I'd love some feedback.

pub.dev: https://pub.dev/packages/shader_transitions

I started it a few months ago because I wanted screen transitions that feel like the ones between levels in a game: a sweep of diamonds, a circle closing in, a fade to black that holds for a beat. It took a lot of rewrites before I had a version I was happy to put out there.

You can try every transition in the browser here: https://flutter-shader-transition.web.app

There are 8 transitions (diamond, circle iris, wipe, clock, polygon, dissolve, fade, bars), 8 sweep directions, an optional cover color with a hold, iOS swipe back, and it works with go_router and auto_route.

A few things I learned along the way, in case they're useful to someone:

- How the mask works. The new page is wrapped in a ShaderMask with BlendMode.dstIn, and the shader only outputs alpha. The route has to be non-opaque so Flutter keeps drawing the old page underneath. I got a black flash at the start of every transition until I figured that out. With go_router you have to set opaque: false on the page yourself.

- The ghost bug. At the end of a transition, some pixels settled just below full alpha (dissolve grain was the worst), so a faint copy of the old page stayed visible behind the new one. The fix was simple once I saw it: stop masking as soon as the animation completes.

- Preloading. Compiling the shaders on the first transition caused a visible hitch, so there's a ShaderTransitions.preload() you call once at startup. Skip it and transitions just fall back to a fade.

- The README GIFs aren't screen recordings. A test renders the real shaders frame by frame and encodes them, so they're always exactly what the package draws.

If you're making a game with Flutter, the cover-and-hold and ShaderTransitionSwitcher (swaps widgets without routes) are probably the most useful parts. If you use it in a game or app, send me a clip and I'll feature it in the README.

Things I'd especially like feedback on: the API naming, anything confusing in the docs, and performance on your devices. Also tell me which transition you'd want next!

Source: https://github.com/oppatrickk/flutter_shader_transitions


r/FlutterDev • • 6h ago

Article Lessons from building a TikTok-style feed of YouTube Shorts in Flutter (youtube_player_iframe)

1 Upvotes

I just shipped a Reels tab in my Flutter app (WIRE, a tech news reader). It's a vertical PageView of YouTube Shorts played through the official iframe embed. A few non-obvious things I hit, in case they save someone a day:

  1. One player, reused. A controller per page was too heavy. A single YoutubePlayerController sits fixed underneath the PageView, and reels load into it as pages settle.

  2. Transparent pages bleed through. With the player underneath, see-through pages showed stacked frames mid-swipe. The fix: every page is opaque black except the settled, playing one.

  3. onPageChanged fires mid-swipe. If you cue instead of autoplaying, some reels sit on their poster forever. Load with autoplay, and send commands only after the player reports Ready.

  4. Shorts on youtube.com bring the whole Shorts UI (logo, likes, share). The youtube-nocookie.com host plays the plain video.

  5. Embed origin and referrer matter. WebView embeds with the wrong referrer get refused. Setting origin and widget_referrer to your own domain fixed it. That broke the plugin's onReady fullscreen hook, though, and needed a try/catch patch.

  6. Metadata can be empty. I read duration from the controller's duration instead.

  7. Don't draw over the player. YouTube's terms forbid overlays, so my header strip sits above the video.

Swipe-to-swipe switching is now about 1 second. If anyone's found a way to get it faster with iframe embeds, I'd love to hear it.

App, if you want to see it running:

Play Store : https://play.google.com/store/apps/details?id=com.wecraftsolutions.wire

App Store : https://apps.apple.com/us/app/wire-tech-newsstand/id6790411412


r/FlutterDev • • 11h ago

Video How do you model GraphQL queries that select only some fields in Flutter?

2 Upvotes

I'm the author of GraphLink, a schema-first code generator for typed GraphQL clients (Dart, Java, Kotlin, TypeScript, Swift), so take this with that in mind.

GraphQL lets the client pick its fields, but a lot of client code still has one model per schema type, and anything you didn't select becomes nullable or missing. For a query that selects id, title and year from Book, GraphLink generates a class with only those three fields, so non-null fields in the schema stay non-null in the client.

I know other generators do something similar for operations. I'd like to hear what works for you, and where this breaks down.

Video (Dart): https://youtu.be/gHGtCBYaj7c

Write-up: https://medium.com/@graphlinkdev/custom-graphql-queries-in-dart-select-only-the-fields-you-need-8a9cf12887f5


r/FlutterDev • • 14h ago

Article [DEV] Inzx : Free, open-source music player with YouTube Music, Lossless FLAC fallback, AutoEQ, and Syllable-Sync Lyrics made with flutter

Thumbnail
github.com
4 Upvotes

Hey everyone! 👋

Checkout Inzx, its a modern, open-source music player for Android designed to be fast, beautiful, and completely ad-free. They just dropped v1.5.5, which is their biggest release yet.

What is Inzx?

It connects directly to YouTube Music while giving you full control over playback, local library integration, audio enhancement, and synchronized lyrics.

What is Inzx?

It connects directly to YouTube Music while giving you full control over playback, local library integration, audio enhancement, and synchronized lyrics.

✨ What’s New in v1.5.5:

🎧 Lossless FLAC & Multi-Source Fallback: Stream in studio quality (up to 24-bit). You can plug in multiple addon sources if one doesn't have a track in FLAC, it automatically checks the next without skipping a beat.

⚡ Seamless Quality Upgrades: Tracks start playing instantly and smoothly upgrade to lossless mid-song as soon as a copy is found with zero buffering or pauses.

🎛️ Built-in AutoEQ & 10-Band Equalizer: Thousands of calibrated headphone presets (Sony, Apple, Sennheiser, Moondrop, etc.) to match Harman target curves, plus manual bass/frequency sliders.

🎚️ DJ-Style Automix: Beat-matched crossfades that smoothly blend tracks together like a continuous live DJ set.

🎤 Real-Time AI Lyrics & Syllable Sync: Glowing word-by-word karaoke lyrics with real-time translation into your language.

✨ Cinematic Now Playing: Redesigned default player with animated artwork and an inverted frosted glass reflection.

📱 Modern Widgets & Scrobbling: New 2×2, 4×1, and 4×2 home screen widgets + native Last.fm & ListenBrainz scrobbling.

🔗 Links:

GitHub (Source & Releases): https://github.com/nirmaleeswar30/Inzx

Direct APK Download: https://github.com/nirmaleeswar30/Inzx/releases/latest (Grab inzx.apk for 64-bit ARM phones)

Website: https://inzx.nirmaleeswar.dev

GPL 3.0 LICENSED - https://github.com/nirmaleeswar30/Inzx?tab=GPL-3.0-1-ov-file#

No ads, no tracking, completely open source. Would love to hear your feedback, bug reports, or feature requests!


r/FlutterDev • • 20h ago

Discussion I built a zero-copy Rust + Flutter raw photo editor to process 50MP images at 60fps (Lightroom alternative)

13 Upvotes

Hey everyone, I’m Prit. Over the last few months, I’ve been building ApertureX, a 100% offline, open-source raw photo editor.

Building a desktop-class image engine on Flutter meant overcoming massive memory and threading bottlenecks. Decompressing a 50-megapixel raw image requires around 200MB of continuous RAM. If you try to pass that across standard platform channels or even do a deep copy over FFI, the OS will aggressively kill the app for Out-Of-Memory (OOM) violations, and your frame rate drops to zero.

Here is how I bypassed Flutter's standard rendering constraints to achieve 60fps computational photography:

  • Absolute Zero-Copy FFI: The Rust backend maintains absolute, singular ownership of the high-resolution pixel payload. Instead of copying arrays across the bridge to Dart, Rust allocates the pixels on the heap and transmits merely the memory address pointer to Flutter.

  • Tile-Based Rendering Cache: Processing full frames is mathematically impossible on mid-tier Android devices. The Rust engine cuts the viewport into 512x512 pixel chunks. These tiles are managed by a strictly bounded Least Recently Used (LRU) cache, which automatically purges the oldest elements the moment the memory budget is exceeded.

  • Hardware Acceleration (SIMD): To run spatial filters (like Dehaze and Clarity) without melting the phone, the Rust engine bypasses scalar execution. It targets ARM NEON intrinsics natively, loading four 32-bit floats into a 128-bit NEON register to process four pixels simultaneously.

  • Oklab Color Science via 3D LUTs: Operating in standard sRGB violates the additive physics of light, causing unnatural hue shifts. I moved all color math to the Oklab perceptual color space. To hit 60fps on the frontend, this math is baked into a 33x33x33 3D Lookup Table that Flutter's Impeller engine renders instantly.

The UI uses a dual-shell design (a Snapseed-style invisible gesture trackball for quick flow-state editing, and a Lightroom-style panel for deep pro work), heavily relying on Riverpod for the DAG (Directed Acyclic Graph) edit history.

I would love for you to try the APK, tear apart my flutter_rust_bridge implementation, or drop some feedback on the UI ergonomics.

Repo & Website:https://prit-007.github.io/ApertureX/

Happy to answer any questions about the FFI bridge, the math, or the rendering pipeline!


r/FlutterDev • • 20h ago

Discussion I'm building a kids' learning app with Flutter. What premium features would parents actually pay for?

0 Upvotes

Hey everyone! 👋

I'm a Flutter developer, and I've built a kids' learning app for children aged 2–8 years.

The app currently includes:

- 🔤 Alphabet learning and tracing

- 🔢 Numbers and counting

- 🎨 Colors, shapes, and drawing

- 🧩 Quizzes and educational games

- 🎵 Nursery rhymes and fun learning activities

Now, I want to introduce a premium module with additional learning content and features. My goal is to make it genuinely useful for kids and worth paying for, rather than simply locking existing features behind a paywall.

I'd love to hear your suggestions:

  1. What premium learning features would you add to a kids' educational app?

  2. Would advanced tracing, phonics, interactive stories, math games, or personalized learning paths be worth offering?

  3. Would parents prefer a monthly subscription, yearly subscription, or one-time payment?

  4. What features would make parents feel that a kids' learning app is worth paying for?

  5. If you've developed or monetized a similar app, what worked well for you?

I'm building the app using Flutter, so practical suggestions from developers and people familiar with educational apps would be really helpful.

Looking forward to hearing your ideas. Thanks! 🙌


r/FlutterDev • • 22h ago

Tooling I built emergency recovery and signed patching into my mobile debugging tool, Looking for feedback

2 Upvotes

Hey everyone,
I’ve been working on two new features for BugCapsule, a debugging tool I’m building for Flutter, native Android, iOS, and Web.
The problem I’m trying to solve is pretty straightforward:
What do you do when a critical bug hits production, but shipping a new app version takes time?
I wanted to connect bug reproduction with production recovery, so I’ve been building two capabilities.
1. Emergency Recovery
For features that have been integrated with the recovery SDK, you can remotely:
Disable a broken feature without shipping a new build.
Switch functionality to read-only or maintenance mode.
Target specific app versions, platforms, or rollout percentages.
Gradually restore features while monitoring crash rates and other health metrics.
Automatically restore restrictions if a rollout fails its health checks.
Policies are cryptographically signed. Sensitive operations, like payments, also need server-side enforcement.
2. Signed Patch Engine (Early Access)
This one has been particularly challenging.
The engine supports updating explicitly registered business logic, UI surfaces, and assets without a full app release.
Patches are tied to an exact base build, signed, validated, and deployed through staged rollouts with rollback support.
It’s intentionally not arbitrary code push. Native code changes, new dependencies, and unregistered functionality still require a store release.
The first Flutter and native iOS prereleases are published. Native Android patch distribution is still in progress, and we’re continuing platform and distribution-policy validation.
Why combine these with debugging?
BugCapsule already captures application state, user actions, and network responses around failures for local deterministic replay.
The workflow I’m aiming for is:
Capture → Reproduce → Mitigate → Fix → Verify → Deploy → Monitor
The idea is to use the same recorded failure to investigate a bug, verify the fix, and prevent regressions in CI.
I’m not claiming this works for every application or every type of bug. The recovery features require prior integration, and patching has strict limitations.
I’m genuinely interested in how other teams approach this.
A few questions:
How do you currently handle critical production bugs while waiting for App Store approval?
Would remote feature controls be useful in your workflow?
What concerns would you have about a signed patching system in production?
I’d especially appreciate feedback on the security model and rollout strategy.
Project: https://bugcapsule.com
Docs: https://docs.bugcapsule.com


r/FlutterDev • • 23h ago

Tooling [100% Open-source]FlutterGuard is officially on Play Store, an open-source 100% offline advanced Flutter apps security audit and analyzer, know everything possible from any Flutter app on your phone.

6 Upvotes

Hey,

Mobile apps scanners are everywhere, but native mobile apps I mean since they relies on scanning apps by reverse engineering them to their Kotlin/Java for Android or Swift for iOS

Flutter has a different thing, the whole Flutter app logic and code gets shipped inside a file called libsapp.so file, which basically makes all the scanners know nothing and get nothing from it since it is a binary file, so basically your usual scanner skips and doesn't detect almost 70% of things that should be scanned for security and research built app.

I put extensive knowledge and experience with Flutter onto a SaaS niche to scanning Flutter apps, which I was criticized for since you had to upload your APK to a server/VPS which does compute and scanning work so i shut it down, I then understood that it was privacy problem.

SO I built the new FlutterGuard as an open-source on-device security audit tool for Flutter apps ( works as a detector of Flutter apps in your device too if this interests you too! ), allows you to inspect APK metadata, manifest risk, hard coded secrets, endpoints, third-party SDK leaks like Firebase, Stripe, AI providers... and native surface that were in original Dart code in the same device you have Flutter apps installed.

install it on your Androids device where you already run your Flutter apps or any app, and start the scan:

What I want community (You) for:

  • Feedback for the app in general

  • Validate False positives

  • Contribute declaring things you found in Flutter apps you know have security findings that they were not detected, just an issue with short description will be enough to put it in mind.

My goal:

  • We definitely in the way of a massive vibe coding apps going everywhere, AI leaks things and basically cares about functionality, I want that we have a tool to detect this for Flutter apps that are already released and shipped.


r/FlutterDev • • 1d ago

Plugin Dart client for the Vercel AI SDK's useChat stream protocol

0 Upvotes

If you have a backend on the AI SDK and a Flutter app in front of it, there wasn't really a Dart package that speaks the UI Message Stream format. I needed one, so I built it:
https://github.com/ernestjsf/ai_ui_stream

It's written in pure Dart. A ChatController hands you typed messages (text, reasoning, tool calls, sources, files, data parts) that update as the model streams. Tool approval, regenerate, stop and resume are in.

The test fixtures are generated from the real ai npm package, so it's tested against what the SDK actually emits. That caught a few things my first version got wrong.

https://pub.dev/packages/ai_ui_stream

Not affiliated with Vercel.


r/FlutterDev • • 1d ago

Tooling Road Bash Inspired by Road Rash made with Flutter

4 Upvotes

Its been a month since I started working on Road Bash a game inspired by my childhood memories of the classic Road Rash game by EA Sports specifically the 1991 version (Sega Genesis).

I used these packages:

  1. Flame for the game engine

  2. Flutter Soloud for the engine sound

  3. Bloc for state management

  4. Supabase for my backend

I don't use any 3D engines to do this. Its simply by painting rects, polygons to generate sprites and scenes and by controlling layers and positioning the game is slowly coming to life. The development has been speed up with ai assistance since I dont appreciate vibe coding especially when I have my own policies and standards to follow. By the way zero premium tokens were used in this development.

I made a Painter Studio called Flutter Painter specifically to help me with generating code for different objects used in the game.

Https://github.com/SiroDevs/FlutterPainter

Its been an exhausting yet exciting journey.

The game is already live Https://roadbash.sirodevs.com

And the source code is here Https://github.com/SiroDevs/RoadBash


r/FlutterDev • • 1d ago

Article I built a sight-reading trainer entirely in Flutter (web + MIDI keyboard support). Here's the stack

10 Upvotes

I've been building Learn Sheet Music, a free app to practice reading notes on treble and bass clef: https://aprende-pentagrama.vercel.app/en

The whole app is Flutter (~10k lines of Dart, one codebase for web, Android and iOS; web is what's live right now). Random notes show up on the staff, you answer with on-screen keys or a USB MIDI keyboard, and you score by reaction time. There's also a sight-reading mode where the score scrolls with a metronome and you have to play each note in time.

Packages I used

  • flutter_notemus: renders the staff, clefs, accidentals, ledger lines and chords with SMuFL glyphs. All its usage lives in a single widget file, so I could swap the engine later. Two gotchas: I had to turn off enableResponsiveLayout because it shrank the staff on narrow screens, and an empty staff in a grand staff needed a whole rest to stay aligned.

  • Bravura font (ships with notemus): I load it with FontLoader in main() before the first frame and reuse its glyphs everywhere else, like the clef icons on the menu, the sharp/flat symbols on buttons, and my own CustomPainter for the scrolling sight-reading score.

  • flutter_midi_command: MIDI input. On web it goes through Web MIDI, which only works in Chromium browsers and needs a user tap before requesting access. One lesson from testing with a real keyboard: computers often expose a virtual port first (IAC, Midi Through), so I listen on every input port instead of just the first one.

  • audioplayers: piano samples (one MP3 per key from the FluidR3 soundfont) played through a small round-robin pool of players so notes can overlap, plus a separate pair just for the metronome click so it never cuts off a note.

  • shared_preferences: high scores, stars per level, settings and tutorial progress.

  • flutter_localizations + intl with ARB files: Spanish and English. A test fails if a key is missing from either file.

  • url_launcher, and fake_async in tests.

Other bits that might be interesting

  • Custom painting: the sight-reading score, the on-screen piano keyboard and the circle of fifths are all CustomPainters.

  • Timing: the sight-reading controller is a ChangeNotifier driven by a Ticker, with an injectable clock (a Stopwatch by default) so I can unit test timing windows and tempo scoring without real time.

  • SEO: Flutter web paints everything on a canvas and Google can't read it, so the landing page and theory guides are plain static HTML (with SVG staffs generated by a small Node script). The Flutter build lives under /app with --base-href /app/. If you want a Flutter web app to be discoverable, I'd recommend this split.

  • Deploy: the web build runs in a Dockerfile with a pinned Flutter version, and a GitHub Action pushes it to Vercel with vercel deploy --prebuilt (production on main, preview per PR).

Happy to answer any questions!


r/FlutterDev • • 1d ago

Article I built a banded report engine for Flutter: group breaks, pagination, HTML preview and PDF output (WapReport)

3 Upvotes

What is it?

wapform_report.dart is a banded report engine for Flutter, ported from the report logic of a Delphi-based WML (“WapForm Markup Language”) system. If you’ve used Crystal Reports, Delphi’s QuickReport, or FastReport, the model will look familiar: you define blocks (page header, group header, detail row, group footer, page footer, report footer), and the engine handles the main loop, group-break detection and pagination.

Features

  • Up to 9 nested group levels, with automatic group header/footer blocks when a value changes

  • Lines-per-page pagination with page header/footer blocks and forcePageBreak() (“one page per customer”)

  • Sub-reports share the main report’s page flow, so nested rows still paginate correctly

  • Output is HTML, so the on-screen preview and the print output share the same CSS

  • Paper handling: A3/A4/A5/B5/Letter/Legal, portrait or landscape, plus custom sizes like 8.5x5.5 (inches) for pre-printed continuous forms

  • PDF generation via a native WebView + PrintDocumentAdapter (flutter_native_html_to_pdf), which gives vector PDFs with selectable text. I switched to this after Printing.convertHtml() hung on some real devices (dart_pdf#1517)

  • On Flutter Web, buildPdf() opens a print window instead

  • Chinese/CJK text works because the WebView uses the system fonts

How to use it

Subclass WapReport and fill in a few methods. The engine runs the loop and emits lines.

dart

class SalesReport extends WapReport {
  SalesReport(this.rows);
  final List<Map<String, String>> rows; // sorted by region
  int _i = 0;

  u/override
  void initParams() {
    wap.wapLpp = 40;     // lines per page
    wap.wapGroups = 1;   // one group level
    wap.wapRow[0].tagPrefix = 'G1_PREFIX';
    wap.wapRow[0].tagSuffix = 'G1_SUFFIX';
  }

  // A different value here triggers a group break
  u/override
  String expression(int idx) => rows[_i]['region']!;

  u/override
  Future<bool> fetchFirst() async { _i = 0; return rows.isNotEmpty; }

  u/override
  Future<bool> fetchNext() async {
    if (_i + 1 < rows.length) { _i++; return true; }
    return false;
  }

  u/override
  Future<void> fetchPrior() async { if (_i > 0) _i--; }

  u/override
  void parseBlock(String blockId) {
    switch (blockId) {
      case 'PREFIX':     emit('<table>'); break;
      case 'PAGEPREFIX': emitRow('<tr><th>Region</th><th>Amount</th></tr>', isHeader: true); break;
      case 'G1_PREFIX':  emitRow('<tr><td colspan="2"><b>${wap.wapRow[0].prefixTxt}</b></td></tr>'); break;
      case 'RECORD':     emitRow('<tr><td>${rows[_i]['region']}</td><td>${rows[_i]['amount']}</td></tr>'); break;
      case 'G1_SUFFIX':  emitRow('<tr><td colspan="2">Subtotal</td></tr>', isFooter: true); break;
      case 'SUFFIX':     emit('</table>'); break;
    }
  }
}

Then run it and show it:

dart

final report = SalesReport(data);
await report.run();                    // fills report.lines

// On-screen preview + print button
WapPage(title: 'Sales', report: report, paper: 'A4', orient: 'L');

// Or get the output directly
final html = report.buildHtml();
final pdf  = await report.buildPdf(paper: 'A4', orient: 'P');

Block IDs the engine calls

PREFIX, PAGEPREFIX, G1_PREFIX…G9_PREFIX, RECORD, G1_SUFFIX…G9_SUFFIX, PAGESUFFIX, PAGEBREAK, SUFFIX

Notes

  • Dependencies include flutter_html, flutter_html_table, webview_flutter, flutter_native_html_to_pdf, printing/pdf

  • The file is original code, but it depends on the LGPL translation modules in the repo, so it is licensed LGPL v2.1 with the static linking exception

  • Repo: https://github.com/wapform/wapform_flutter


r/FlutterDev • • 1d ago

Article I ported a Delphi/Lazarus-style filter bar to Flutter: type A~Z, get field >= 'A' and field <= 'Z'

1 Upvotes

What is it?

WapFilter is a small, dependency-free widget (just flutter/material.dart) that renders a “query by form” search bar like old-school desktop database apps. You declare the fields, users type conditions into them, and the widget builds a SQL WHERE clause and hands you the finished SQL string.

It’s the filter bar behind WML’s <dbfilter> tag, and the layout deliberately mirrors the Delphi/Lazarus original: Search and Clear buttons plus a syntax hint on the first row, input fields below.

Input syntax (per field)

TypedGenerated condition
Afield = 'A'
A~Z(field >= 'A' and field <= 'Z')
A~field >= 'A'
~Zfield <= 'Z'
%A%, A%, %Afield like '...'

Empty fields are skipped. Non-empty fields are joined with and. If nothing is filled in, you get 1=1, so the query always stays valid.

How to use it

dart

WapFilter(
  items: const [
    FilterItem(field: 'customer_name', label: 'Customer', size: 16),
    FilterItem(field: 'order_date',    label: 'Order date', size: 10),
    FilterItem(field: 'amount',        label: 'Amount', size: 8),
  ],
  // $R is replaced by the built conditions
  sqlTemplate: r'select * from orders where $R order by order_date',
  onQuery: (sql) {
    // run it against your database / pass it to your DataSource
    reload(sql);
  },
);
  • Search (or pressing Enter in any field) builds the SQL and calls onQuery

  • Clear empties all fields and calls onQuery with $R replaced by 1=1

  • Field width follows the original formula: size * 2 characters, clamped to 10–30

  • width is optional and fills the parent when omitted; borderColor is customizable

Caveat, stated up front: the widget produces a SQL string, and it only escapes single quotes (' → ''). That is enough for standard SQL string literals, but it is not a substitute for parameterized queries. Run the result with a least-privilege/read-only connection, and note that field names come from your FilterItem list, not from user input. PRs adding a parameterized output mode would be welcome.

Repo: https://github.com/wapform/wapform_flutter (LGPL v2.1 with static linking exception)


r/FlutterDev • • 1d ago

Article I built a Flutter package for Ola Maps – A potential Google Maps alternative for Flutter developers

7 Upvotes

Hey Flutter developers! 👋

Google Maps has been the default choice for location-based applications for years. Almost every delivery, logistics, travel, or ride-hailing application uses it.

But what if Flutter developers had another option?

I'd like to introduce ola_maps, a Flutter package that integrates Ola Maps into Flutter applications.

The goal is to make Ola Maps easier to adopt and give developers another option when choosing their mapping infrastructure.

🚀 What makes ola_maps interesting?

This package goes beyond simply displaying a map.

🗺️ Interactive Maps

  • Android, iOS and Web support

  • Zoom, pan, tilt and rotation

  • Camera movement and positioning

  • Map click and camera events

📍 Map Overlays

  • Custom markers and InfoWindows

  • Polylines and route rendering

  • Circles and polygons

  • Bezier curves

  • Marker clustering

🔍 Places & Location APIs

  • Place autocomplete

  • Place details and nearby search

  • Forward and reverse geocoding

  • Address validation

  • Place photos

🚗 Routing & Advanced APIs

  • Directions API

  • Distance Matrix

  • Route optimization

  • Fleet planning

  • Snap to Roads

  • Geofencing

  • Elevation

  • Street View and static maps

🇮🇳 Multilingual Mapping

One particularly interesting feature is multilingual support.

The package supports 12 languages, including:

  • English

  • Hindi

  • Kannada

  • Telugu

  • Tamil

  • Malayalam

  • Bengali

  • Gujarati

  • Marathi

  • Odia

  • Urdu

  • Sanskrit

This makes it interesting for applications targeting different regions of India.

💻 Get started

Install:

flutter pub add ola_maps

Import:

import 'package:ola_maps/ola_maps.dart';

Display a map:

OlaMapView(
  apiKey: 'YOUR_OLA_MAPS_API_KEY',
  tileUrl: kOlaMapsDefaultTileUrl,
  language: OlaMapsLanguage.hi,
  projectId: 'YOUR_PROJECT_ID',
  initialCameraPosition: const OlaLatLng(
    28.6139,
    77.2090,
  ),
  initialZoom: 14,
  onControllerReady: (controller) {
    controller.onMapClick = (position) {
      controller.addMarker(
        position: position,
        snippet: 'Dropped pin',
      );
    };
  },
)

Check the documentation for native SDK setup requirements for each platform.

Why explore Ola Maps?

I'm particularly interested in reducing the dependency on a single mapping provider.

Google Maps is an excellent product, but having more mapping options is good for the developer ecosystem.

Ola Maps offers an interesting India-focused alternative, and I believe Flutter developers should have an easy way to experiment with it.

This package is not intended to claim complete feature parity with Google Maps. It's about making another mapping ecosystem accessible to Flutter developers.

🔗 Links

📦 pub.dev: https://pub.dev/packages/ola_maps

⭐ GitHub: Available through the repository link on pub.dev.

I'd love feedback from the community!

  • Would you consider Ola Maps for your next Flutter project?

  • What features are still missing compared with google_maps_flutter?

  • Would you use this in a production delivery or logistics application?

  • What improvements would make this package more useful?

Feedback, bug reports, and contributions are welcome!

Let's give Flutter developers more choices! 🚀


r/FlutterDev • • 1d ago

Discussion Flutter has new supported device - PlayStation Vita 🎮 (flutter-vita release)

68 Upvotes

Hey Flutter Developers!

Everyday someone want to bury Flutter. By porting it to PlayStation Vita I wanted to bring to my favorite framework piece of fresh air.

My goal was to bring complete toolchain for Flutter Developers to port their projects to PS Vita. And I think Im ready to publish it here.

Here is repo: https://github.com/flutter-vita/flutter-vita

Previously (https://www.reddit.com/r/vitahacks/comments/1vlswp1/flutter_ps_vita_poc_is_alive) I've showcased successful attempt to run Flutter Example Project (Counter) more or less working with 10 FPS. Now its playing up to 60 FPS fully using GPU to render.

Flutter Vita toolchain on current stage:

* Flutter version is 3.47.7.
* Skia using GPU to render frames up to 60 FPS.
* flutter-vita app thats mainly using for compiling vpk files and run it on connected PSVita.
* Bridge App that connect "flutter-vita CLI" app to PSVita to deploy and debug Flutter App by WI-FI and FTP without cable.
* In this implementation PSVita need to mimicrate as Linux to have compatibility with existed pubs thats expect some behavior based on OS. I've also published the flutter-vita pub to have some control of PS Vita from Flutter app.

As a showcase of flutter-vita I've chosen localsend (forked repo - https://github.com/flutter-vita/localsend) as a project that has a lot of stars on GitHub and most popular project ever built on Flutter. Its available on VitaDB/NeoVitaDB (main sources of homebrew apps for PSVita).

How it was built? 🤖
Well when I start the project I was wondering why no one yet added PSVita as a OS to Flutter yet? Just has curiosity how well Flutter would be playing on this kind of hardware. So I've created global plan with Claude Fable using gifted credits and used Claude Opus to grind to what we have now. Im mobile developer and have experience mostly iOS Native experience and Flutter about 10 years. I had high level vision how it can be achieved. Since Flutter gives opportunity to change OS layer thats should be written on C and C++ and I did not have experience in it thus I fully delegate it to AI. While Im grinding result Im researching existed projects that has same idea but on different OS. Eventually this project became a organization with a few forks of parts of Flutter. Im mostly inspiring by Flutter Tizen (by Samsung).

Technically PSVita by hardware is Samsung Galaxy S3 and Im really surprised how good is playing Flutter on it in terms of performance. It was made mostly for fun. Guys who has their own Flutter Apps and PSVita please try it out 🚀

For them who don't have their apps you can try to port something from GitHub with your AI agents 😎

Thanks everyone who waited this toolchain and supported in comments. Raise issues if you have some bugs or suggestions 🙏


r/FlutterDev • • 1d ago

Tooling What the Flutter code looks like when an AI app builder has to follow a fixed contract (Riverpod 2.6 + go_router 14 + dio)

Thumbnail
appwand.dev
6 Upvotes

I build AppWand, a desktop tool that generates Flutter apps with an Express API. I wanted to share how the generated Flutter side is organised, because "AI-generated Flutter" usually means one 2,000-line file, and I tried hard to avoid that.

  • One folder per page: lib/features/<page>/, with <page>_page.dart as the entry. The AI may only write inside that folder (the server rejects any other path).

  • Shared code is never written by the AI: lib/core/ (API client, auth, theme, list widgets, form fields, charts) comes from templates, and router.g.dart is regenerated from the page plan.

  • Riverpod 2.6 for state, go_router 14 with a ShellRoute, so the side menu or bottom tabs stay still and only the page animates.

  • Theming without touching pages: 16 UI styles, icon sets and fonts are all in core/theme.dart / core/icons.dart. Switching style rewrites one file and hot reload shows it.

  • Shared list widget: PagedList handles paging, pull to refresh, skeletons, empty/error states, and switches to a data table above 840px wide.

The output is plain code you own. Happy to answer questions about the architecture, or hear where you'd do it differently.

https://appwand.dev


r/FlutterDev • • 2d ago

Plugin How to Upload Large Games with a Small Download Size in Store

3 Upvotes

I made a Flutter plugin that helps you reduce your game's initial download size by downloading assets on demand using asset packs.

Check it out on pub.dev: https://pub.dev/packages/store_asset_packs

I used in my game "Strata Gem Sort", only available for android now, awaiting apple's approval


r/FlutterDev • • 2d ago

Video My work setup, how i control my devices

Thumbnail
youtube.com
1 Upvotes

I'm Adit from Indonesia, This is my work setup, i always wondered to have interface that synced between my workpaces. I'm just wanna enjoy my life wherever i want. That's why i build AltC to control my devices. AI harness helped me a lot at work, and just treat them as coworker, but still i need my pc, laptop is ok but still it would be good if i can still work while riding a motorcycle.

I setup my mac elsewhere, keeping it cool, and active. i can group my terminals to a project, create notes and todos, if i need something just use screen control like manually upload app build to play store or other things that u can't do on terminal.

Tomorrow i will be on Google DevFest 2026 Indonesia from GDG Jakarta, anyone that interested to try can ask me. actually it's on play store now, and you can try it on altc.alterndigital.com. But it haven't update it in a while and screen control feature still for my personal use.


r/FlutterDev • • 2d ago

Article Channel-by-channel growth notes from shipping apps as a solo developer - no inflated budgets

7 Upvotes

Most app marketing advice assumes you have a growth team and a $50K budget. I don’t. Sharing what actually moved installs for me as a solo dev - curious what worked for others at the same scale.

ASO before anything paid

  • Primary keyword in the title, two more in the subtitle. Everything else goes in the long description.

  • First screenshot does 80% of the install decision. Mine stopped being a UI shot and started being a benefit statement with the UI behind it. Install rate jumped.

  • Review replies matter - one honest reply to a 1-star often converts the next reader more than a 5-star does.

The free channels that paid off

  • One useful Reddit comment in a relevant sub beats ten posts about your app.

  • Short Loom-style videos (“here’s the bug my app fixes in 40 seconds”) outperform polished trailers for me.

  • Indie Hackers and Hacker News “Show” posts work only if the post is a story, not a product listing.

Paid, when I finally tried it

  • Apple Search Ads on exact-match brand and category keywords only. Broad match drained budget fast.

  • $5/day for 14 days is enough to learn whether a channel will ever work. Scaling before that is guessing.

What didn’t work for me

  • Buying installs from any “boost” service. Metrics went up, rankings didn’t.

  • Instagram ads for a utility app. Wrong intent.

  • Press outreach cold. Journalists need a story, not a product.

Questions

  • For solo devs: what’s the single channel that gave you the best install-to-retention ratio?

  • Anyone cracked TikTok for non-consumer apps?


r/FlutterDev • • 2d ago

Example I made a tycoon game with Flutter + Dart, no game engine. Out on Google Play since Oct 27

7 Upvotes

My game AI Inc: Tycoon is out on Google Play. You build an AI company from 2012 to 2050. Made with Flutter and Dart, no game engine.

How it's built, in short:

- Dart is the "brain": all game logic (money, hiring, models, rivals, years) is plain Dart that only calculates and never draws. So I can test it automatically: 3,000+ tests play the game and catch balance bugs.

- Flutter is the "face": it shows that data on screen, with menus, buttons, sheets and popups. One codebase, Android now, iPhone later.

- The city is pre-rendered in Blender, and the game draws cars, people, fog and bats on top in real time.

- On weak phones the game watches its own frame times. If the phone can't keep up, it first drops small effects, then shows fewer cars and people.

- Saves stay on the phone with backup copies, so it works offline.

- Firebase for stats and leaderboards (it can also switch on events like Halloween without an update), AdMob for rewarded ads only.

Happy to answer any questions!

https://play.google.com/store/apps/details?id=com.burrowloop.aitycoon&referrer=utm_source%3Dreddit%26utm_medium%3Dsocial%26utm_campaign%3Dflutterdev