Chuyển đến nội dung chính

Bài đăng

Venera: layout reader tùy chỉnh trong Flutter

App đọc trông như “chỉ là ảnh” cho tới khi page mode, RTL, zoom và pre-cache va nhau. Venera là nghiên cứu hay về layout tùy chỉnh + quản lý thư viện. Học theo Page model độc lập với page widget. Pre-cache trang kề mạnh kèm memory cap. Thư viện là local DB + nguồn remote tùy chọn. Cạm bẫy Pinch-zoom và lật trang đấu nhau; định nghĩa gesture arena sớm. Decode off UI isolate. Tham chiếu tốt khi xây viewer media scroll dài . Bài viết gốc đăng tại FlutterCook . Bản trên đó là bản được cập nhật mới nhất.
Các bài đăng gần đây

Spotube: client nhạc Flutter ưu tiên privacy

Spotube chứng minh bạn ship được trải nghiệm nhạc bóng bẩy đa mobile/desktop từ một codebase Flutter — không cần sở hữu backend catalog. Tín hiệu stack Riverpod cho state và DI. drift cho dữ liệu thư viện bền vững. media_kit (và plugin liên quan) cho playback đa nền tảng. Release store gồm F-Droid/Flathub — packaging là một phần sản phẩm. Đáng học Tách tìm catalog khỏi thư viện local . Playback là service headless, UI chỉ là shell mỏng. Persist queue và vị trí — app nhạc bị resume liên tục. Cạm bẫy API audio nền tảng khác nhau nhiều (background mode, lock screen, Bluetooth). Ràng buộc pháp lý/ToS với catalog bên thứ ba không phải vấn đề Flutter, nhưng giết app nhanh hơn một frame jank. Dùng Spotube như bản đồ mặt phẳng plugin mà app media thật cần. Bài viết gốc đăng tại FlutterCook . Bản trên đó là bản được cập nhật mới nhất.

shadcn-flutter: port design system, không chỉ theme

Copy design system web vào Flutter thất bại nếu chỉ copy màu. shadcn-flutter hữu ích vì ép câu chuyện phân lớp: token → primitive → composite → app của bạn. Học theo Sở hữu source (mô hình copy-in) để sửa không đau fork. Giữ accessibility và focus ring là primitive hạng nhất. Tài liệu hóa variant; đừng giấu trong một mega-widget. Cạm bẫy Giả định CSS web (cascade, :hover) không map 1:1. Ngân sách polish pointer desktop tách khỏi touch mobile. Dùng khi default Material đấu với brand của bạn. Bài viết gốc đăng tại FlutterCook . Bản trên đó là bản được cập nhật mới nhất.

Serverpod: full-stack Dart phía sau Flutter

Serverpod là backend “không, bạn không cần học ba ngôn ngữ”: server Dart, client Flutter sinh tự động, tooling database kèm theo. Vì sao team chọn Type dùng chung hết lệch JSON. Auth và scaffolding database giảm lo trang trắng. Một toolchain cho hiring và CI. Cạm bẫy Lock-in full-stack là thật — giữ domain logic di động nếu có thể tách sau. Không để secret trong path code client sinh. Cân nhắc Serverpod khi team Flutter-first và muốn backend mạch lạc không đổi ngữ cảnh Node/Go. Bài viết gốc đăng tại FlutterCook . Bản trên đó là bản được cập nhật mới nhất.

Saber: ghi chú viết tay và file local-first

App viết tay là vấn đề sâu tới RenderObject: input nét, blend highlighter, export và định dạng file đều quan trọng. Bài học File local trước; sync sau. Note phải mở được offline. Model nét là data (điểm/áp lực), không phải screenshot. Composite highlighter hai lớp là bài học graphics cổ điển trong sản phẩm. Cạm bẫy Latency stylus cảm nhận được ở ~1 frame. Lock-in định dạng file làm user giận hơn thiếu cloud. Học Saber khi xây công cụ Flutter lõi canvas . Bài viết gốc đăng tại FlutterCook . Bản trên đó là bản được cập nhật mới nhất.

RustDesk: lõi Rust, vỏ Flutter

Không phải mọi vấn đề pixel là vấn đề Dart. RustDesk giữ capture/encode/networking trong Rust và dùng Flutter làm shell tương tác — dạng hybrid bạn nên hiểu trước khi rewrite module native bằng Dart thuần. Phân chia trách nhiệm Mục Nơi Capture màn, codec, relay Lõi Rust UX kết nối, settings, session UI Flutter Tích hợp OS Platform channel / FFI Học theo Vẽ biên cứng: vòng UI nóng vs vòng data nóng. Ưu tiên FFI cho throughput; channel cho event thưa. Giữ session state ngoài cây widget. Cạm bẫy Build hybrid nhân đôi ma trận CI. ABI và packaging installer desktop không đơn giản. App nặng UI có thể chỉ cần Flutter. App nặng pipeline hãy copy biên giới của RustDesk, chưa chắc đã copy Rust. Bài viết gốc đăng tại FlutterCook . Bản trên đó là bản được cập nhật mới nhất.

Lotti: journal với audio, habit và local DB nghiêm túc

Tutorial Flutter hay dừng ở CRUD. Lotti thú vị vì journaling buộc entry đa modal (text, audio, habit, đo lường) và lưu trữ local dài hạn. Bài học Kiểu entry phân cấp thắng một row nullable khổng lồ. Capture + playback audio là surface platform, không phải widget. Insight cần index — thiết kế query trước chart. Cạm bẫy Migration trên dữ liệu cá nhân là thiêng; viết cẩn thận. Quyền ghi âm nền khác nhau theo OS. Nhìn Lotti khi “app note đơn giản” của bạn hết đơn giản. Bài viết gốc đăng tại FlutterCook . Bản trên đó là bản được cập nhật mới nhất.

LocalSend: truyền file kiểu AirDrop không cần cloud

LocalSend hỏi một câu sản phẩm sắc: hai thiết bị đổi file không cần tài khoản server được không? Có — nếu bạn thiết kế discovery LAN, HTTPS và consent rõ ràng. Điểm thiết kế Peer protocol trên HTTPS cục bộ (thường gắn với cổng 53317 ). UI Flutter với phần Rust/native cho đường nhạy hiệu năng. Không có control plane cloud — privacy là feature. Học theo Discovery + consent UX là nửa sản phẩm. Transfer phải resume được và hiện rõ; lỗi im lặng phá niềm tin. Giữ CLI headless cho power user và automation. Cạm bẫy Giới hạn background mobile giết transfer dài ngây thơ. Mạng hỗn hợp (AP isolation, VPN, captive portal) sinh support load — hãy tài liệu hóa. Học LocalSend khi cần pattern local-first , không chỉ một package để copy. Bài viết gốc đăng tại FlutterCook . Bản trên đó là bản được cập nhật mới nhất.

Jaspr: Dart server-driven cho web

Jaspr mang mental model component lên Dart phía server. Nếu bạn thích cấu trúc Flutter nhưng cần HTML/SEO, đây là hệ sinh thái kề cận — đáng chú ý khi góp phần vào hiện diện web của chính Flutter. Bài học Model Dart dùng chung giữa API, UI server và client Flutter giảm lệch DTO. SSR/hydration là vấn đề đóng gói nhiều như vấn đề UI. Server component khuyến khích trang nhàm chán, cache được. Cạm bẫy Đừng giả định widget Flutter chạy nguyên xi. Constraint layout và lifecycle khác mobile. Cân nhắc Jaspr cho site nội dung và dashboard nơi SEO quan trọng và Dart đã là ngôn ngữ của bạn. Bài viết gốc đăng tại FlutterCook . Bản trên đó là bản được cập nhật mới nhất.

Immich: bài học kiến trúc từ stack ảnh Flutter 100k sao

Immich là app Flutter hiếm hoi dân self-host đều biết: backup kiểu Google Photos, album, tìm kiếm ML, và client mobile phải sống sót giữa mạng chập chờn cùng thư viện khổng lồ. Stack thực tế Client Flutter iOS/Android (cùng surface web/desktop trong monorepo). Server NestJS với API client sinh tự động — OpenAPI giữ mobile và server trung thực. Service Python ML cho tìm kiếm kiểu CLIP và nhận diện. Docker là đường cài đặt chính thức. Pattern đáng học API client sinh tự động. Đừng viết tay DTO cho domain lớn. Upload theo nền. Coi sync là feature sản phẩm, không phải việc thêm. Thumbnail do server giữ. Mobile không nên re-encode ảnh 48MP trên phone tầm trung. Ghi chú Flutter Gallery lớn phạt GridView ngây thơ. App kiểu Immich cần recycle view mạnh, chiến lược placeholder và isolate decode cẩn thận. Hãy học cách hàng đợi upload sống sót qua restart app. Nếu copy một cách ngây thơ Kéo cả monorepo vào app nhỏ. Bỏ authz vì giả định “mạng cục bộ”. Ship tìm kiếm ML ...

Hiddify Next: UI Flutter trên lõi tunnel

Client proxy/VPN sống ở rìa quyền OS. Hiddify Next ghép UI Flutter với lõi tunnel hiệu năng cao (dòng Sing-box/Go) để UI vẫn biểu đạt trong khi data path nhàm chán và nhanh. Bài học Status là stream. Latency, server đang nối, lỗi phải là một model nhất quán. Config là data. Import/export profile; đừng hardcode endpoint trong widget. API VPN nền tảng là phần khó — cô lập sau service interface. Cạm bẫy Pin và thermal khi tunnel always-on. Chính sách store khác nhau cho app VPN. Dùng repo này khi cần tham chiếu Flutter backed by service , không chỉ CRUD thuần. Bài viết gốc đăng tại FlutterCook . Bản trên đó là bản được cập nhật mới nhất.

Harmony Music: pattern player offline-first

App nhạc offline là vấn đề storage, scan và lifecycle service. Player kiểu Harmony giữ index thư viện local và playback service sống sót khi UI điều hướng. Pattern Scan một lần, nghe filesystem event sau. Queue nằm trong controller/service, không trong widget màn hình. Notification/media session nền tảng là UX bắt buộc. Cạm bẫy Thư viện lớn cần index tăng dần. Đừng chặn frame đầu bằng scan full SD. So với Spotube nếu bạn còn cần catalog streaming. Bài viết gốc đăng tại FlutterCook . Bản trên đó là bản được cập nhật mới nhất.

Forui: hệ thống UI Flutter có chủ kiến

Forui đặt cược khác “Material ở khắp nơi”: cấu trúc chặt, default mạnh và theme được thiết kế như một hệ thống. Khi nào nên đánh giá Sản phẩm muốn một look nhất quán mobile/desktop. Bạn chán override internal component Material. Accessibility là yêu cầu launch, không phải backlog. Cạm bẫy Adopt hệ thống UI đầy đủ là migration. Pilot một luồng (settings + form) trước khi rewrite cả app. So Forui với package material_ui độc lập nếu team vẫn muốn Material của Google làm nền. Bài viết gốc đăng tại FlutterCook . Bản trên đó là bản được cập nhật mới nhất.

Flutter Deer: dự án luyện tập dáng production

Không phải repo học tập nào cũng sống lâu. Deer vẫn hữu ích vì cho thấy khung app hoàn chỉnh : flavor, component dùng chung, integration test và domain shop nhàm chán một cách có chủ đích. Nên copy Folder theo feature thay vì mega-folder chỉ theo layer khi scale. Thư viện widget dùng chung kèm token/mockup trong repo. Integration test là một phần của “done”. Nên cập nhật Ý kiến state management đã dịch chuyển (Riverpod/bloc…). Giữ cấu trúc Deer, làm mới tầng state theo team bạn. Cạm bẫy Đừng paste UI mà không trích design token. Template thối khi hardcode API host. Bài viết gốc đăng tại FlutterCook . Bản trên đó là bản được cập nhật mới nhất.

FluffyChat: chat Matrix trên Flutter với E2EE thật

Chat trông đơn giản cho tới khi mã hóa và sync đa thiết bị xuất hiện. FluffyChat là client Matrix production bằng Flutter — hữu ích nếu bạn quan tâm kiến trúc messaging mà không tự bịa protocol. Nhịp kiến trúc Matrix SDK là bộ não protocol (crypto Rust như Vodozemac bên dưới). Flutter là shell chung cho mobile và desktop. Push tùy chọn (FCM…) xếp lên sync — không thay sync. Học theo Giữ protocol state ngoài widget; expose stream/selector. Room là domain object hạng nhất, không phải màn hình. UX verify thiết bị là surface sản phẩm, không phải footnote settings. Cạm bẫy Bug E2EE là bug niềm tin. Đừng tự viết crypto. Offline queue và event lệch thứ tự sẽ phá UI setState ngây thơ. Nếu cần chat, ưu tiên Matrix (hoặc protocol trưởng thành) hơn soup JSON socket tự chế. Bài viết gốc đăng tại FlutterCook . Bản trên đó là bản được cập nhật mới nhất.

Flame: vòng lặp game bên trong Flutter

Flame là cách Flutter làm game mà không rời widget tree sang engine khác. GameWidget host cây component cập nhật bởi game loop; overlay giữ HUD/chat bằng Flutter thường. Học theo UI hybrid: canvas game + overlay Flutter cho menu/monetize. Package cầu nối (audio, physics, tiled, bloc) giữ core nhỏ. Update deterministic giúp test và replay. Cạm bẫy Trộn UI setState vào game loop sẽ đấu với kiến trúc. Ngân sách thermal mobile quan trọng hơn FPS desktop. Dùng Flame cho mini-game 2D và canvas tương tác trong sản phẩm, không chỉ đồ chơi. Bài viết gốc đăng tại FlutterCook . Bản trên đó là bản được cập nhật mới nhất.

Ente: ảnh mã hóa đầu-cuối trên Flutter

Nếu Immich là mặc định self-host, Ente là bản đối trọng privacy-first: client (gồm Flutter mobile) mã hóa trước khi upload, server chỉ giữ blob không đọc được. Nên học UX khóa. Recovery phrase và chia sẻ gia đình thắng dashboard “tin chúng tôi”. Pipeline encrypt-then-upload có resume. Surface sản phẩm cho Photos và secret kiểu Auth. Cạm bẫy User quên passphrase — thiết kế khôi phục tài khoản trước khi launch. Sinh thumbnail không được lộ plaintext trên thiết bị dùng chung. Hãy copy cuộc đối thoại threat model , không chỉ lựa chọn cipher. Bài viết gốc đăng tại FlutterCook . Bản trên đó là bản được cập nhật mới nhất.

Cashew: UI tài chính giữ dữ liệu local

App budget fail ở niềm tin và sự rõ ràng. Sản phẩm kiểu Cashew giữ data local, chart trung thực và mốc tháng tường minh. Bài học Tiền là integer/đơn vị nhỏ — không lưu double thô. Giao dịch định kỳ cần rule engine, không phải copy row. Chart cần dark mode và bảng accessibility. Cạm bẫy Timezone và locale phá logic “tháng này”. Export CSV sớm để user cảm thấy sở hữu dữ liệu. Hữu ích khi xây app dữ liệu cá nhân local-first có chart. Bài viết gốc đăng tại FlutterCook . Bản trên đó là bản được cập nhật mới nhất.