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

Bài đăng

material_ui và cupertino_ui độc lập: thay đổi gì ở bản 1.0

Material và Cupertino từng bị “đóng băng” bên trong core SDK. Mọi cập nhật design phải đợi nhịp release quarterly của Flutter. Ở Flutter 3.47, cả hai thư viện đạt 1.0 dạng package độc lập trên pub.dev: material_ui và cupertino_ui . Bản trong SDK vẫn còn ở release này. Package là opt-in . Đó là chủ đích — team đóng contribution từ tháng 4 để đường migrate nhàm chán nhất có thể. Vì sao cần tách trong năm 2026 Release design hàng tuần. Bugfix và component mới không còn chờ flutter upgrade . Upgrade độc lập. App ghim SDK cũ vẫn update được look-and-feel mới. Core trung lập style. Nền tảng gọn hơn cho design system riêng (và cú sốc Liquid Glass / M3 Expressive từ vendor). Migrate bằng dart fix flutter pub add material_ui # nếu dùng Cupertino: flutter pub add cupertino_ui dart fix --apply --code=migrate_design_widgets Lệnh này rewrite import từ package:flutter/material.dart / cupertino.dart sang package mới. Nếu pubspec.yaml không tự đổi (bug sớm đã biết), thê...
Đăng nhận xét
Đọc thêm
Các bài đăng gần đây

Migrating to standalone material_ui and cupertino_ui in Flutter 3.47 — hướng dẫn Flutter

Flutter 3.47 ships opt-in standalone design packages at 1.0. Design updates no longer wait on the quarterly SDK train. Bài này chuyển quan sát đó thành một mô hình nhỏ để bạn có thể kiểm thử, đo lường và giữ cho code dễ bảo trì khi app lớn lên. Vấn đề cốt lõi How to move off SDK-bundled Material/Cupertino with dart fix and the compatibility bridge. Câu hỏi hữu ích không phải API hay pattern có đẹp riêng lẻ hay không, mà là state nằm ở đâu, boundary nào chịu trách nhiệm khi lỗi xảy ra, và người dùng phục hồi thế nào khi happy path biến mất. Mô hình thực tế Weekly releases, independent upgrades, and a style-neutral core for custom design systems and platform design shocks. Hãy bắt đầu bằng một owner rõ ràng cho behavior. Widget chỉ nên render và phát intent; IO, persistence, permission và retry nên nằm sau một interface nhỏ. Nhờ vậy bạn có seam để fake trong test và một chỗ ghi lại các dữ kiện cần theo dõi ở production. Trong app Flutter, boundary thường có dạng: Widget phát int...
Đăng nhận xét
Đọc thêm

Slivers that scroll without jank — hướng dẫn Flutter

Slivers give precise control over when layout work happens during scroll. Bài này chuyển quan sát đó thành một mô hình nhỏ để bạn có thể kiểm thử, đo lường và giữ cho code dễ bảo trì khi app lớn lên. Vấn đề cốt lõi CustomScrollView, SliverList.builder, and avoiding layout thrash. Câu hỏi hữu ích không phải API hay pattern có đẹp riêng lẻ hay không, mà là state nằm ở đâu, boundary nào chịu trách nhiệm khi lỗi xảy ra, và người dùng phục hồi thế nào khi happy path biến mất. Mô hình thực tế builder constructors keep off-screen children unbuilt. Hãy bắt đầu bằng một owner rõ ràng cho behavior. Widget chỉ nên render và phát intent; IO, persistence, permission và retry nên nằm sau một interface nhỏ. Nhờ vậy bạn có seam để fake trong test và một chỗ ghi lại các dữ kiện cần theo dõi ở production. Trong app Flutter, boundary thường có dạng: Widget phát intent như load, submit, refresh hoặc retry. Controller hoặc use case validate intent rồi gọi boundary. Boundary trả về data có kiểu h...
Đăng nhận xét
Đọc thêm

Standalone material_ui and cupertino_ui: what the 1.0 split changes

Material and Cupertino used to be frozen inside the core SDK. That made design updates wait on the quarterly Flutter release train. In Flutter 3.47 both libraries reach 1.0 as standalone packages on pub.dev: material_ui and cupertino_ui . You still get the SDK copies this release. The packages are opt-in . That is deliberate — the team froze contributions in April so the migration path could be boring. Why the split matters in 2026 Three concrete outcomes: Weekly design releases. Bugfixes and new components no longer wait for flutter upgrade . Independent upgrades. An app pinned to an older SDK can still take the latest look and feel. Style-neutral core. A leaner foundation for custom design systems (and for Liquid Glass / M3 Expressive-style shocks from platform vendors). Migrate with dart fix flutter pub add material_ui # if you use Cupertino: flutter pub add cupertino_ui dart fix --apply --code=migrate_design_widgets The fix rewrites imports from packag...
Đăng nhận xét
Đọc thêm

Migrating to standalone material_ui and cupertino_ui in Flutter 3.47

Flutter 3.47 ships opt-in standalone design packages at 1.0. Design updates no longer wait on the quarterly SDK train. This article turns that observation into a small implementation model you can test, measure, and keep boring when the app grows. The problem in one sentence How to move off SDK-bundled Material/Cupertino with dart fix and the compatibility bridge. The useful question is not whether the API or pattern looks elegant in isolation. It is where state lives, which boundary owns failure, and how a user recovers when the happy path disappears. A practical model Weekly releases, independent upgrades, and a style-neutral core for custom design systems and platform design shocks. Start with one explicit owner for the behavior. Keep widgets responsible for rendering and user intent; keep IO, persistence, permissions, and retries behind a small interface. That gives you a seam for a fake in tests and a place to record the facts that matter in production. For a Flutter app, t...
Đăng nhận xét
Đọc thêm

Slivers that scroll without jank

Slivers give precise control over when layout work happens during scroll. This article turns that observation into a small implementation model you can test, measure, and keep boring when the app grows. The problem in one sentence CustomScrollView, SliverList.builder, and avoiding layout thrash. The useful question is not whether the API or pattern looks elegant in isolation. It is where state lives, which boundary owns failure, and how a user recovers when the happy path disappears. A practical model builder constructors keep off-screen children unbuilt. Start with one explicit owner for the behavior. Keep widgets responsible for rendering and user intent; keep IO, persistence, permissions, and retries behind a small interface. That gives you a seam for a fake in tests and a place to record the facts that matter in production. For a Flutter app, the boundary usually looks like this: The widget emits an intent such as load, submit, refresh, or retry. A controller or use case ...
Đăng nhận xét
Đọc thêm

Hiểu đúng về sliver: giao thức đứng sau mọi hiệu ứng cuộn trong Flutter

Phần lớn người viết Flutter gặp sliver theo kiểu gặp một cái ổ gà: bản thiết kế đòi một header co lại khi cuộn, tìm ra SliverAppBar , dán vào, chạy được, và mô hình trong đầu dừng ở đó. Rồi thiết kế tiếp theo cần header dính theo từng section , hoặc một grid biến thành list ở nửa dưới trang, và cái đoạn code đã dán không nói được gì thêm. Điều đáng hiểu là: sliver không phải một widget đặc biệt. Nó là một giao thức layout khác , chạy trong cùng framework. Widget thường hỏi “tôi được phép to cỡ nào?” và trả lời “tôi to chừng này”. Sliver hỏi một câu giàu thông tin hơn nhiều — “viewport còn lại bao nhiêu chỗ, tôi đã bị cuộn qua bao xa, phần nhìn thấy của tôi là bao nhiêu?” — và trả về một câu trả lời cũng giàu tương ứng. Khi đọc được hai đối tượng đó, mọi hiệu ứng cuộn trong framework chỉ còn là biến thể nhỏ của cùng một chủ đề. Layout kiểu box và layout kiểu sliver Layout Flutter thông thường là giao thức box: cha truyền xuống BoxConstraints (min/max theo chiều rộng và cao), con trả...
Đăng nhận xét
Đọc thêm

Fragment shader trong Flutter: cửa thoát xuống GPU và cái giá của nó

Có một nhóm hiệu ứng thị giác mà widget đơn giản là không tạo ra được: méo ảnh theo từng pixel, gradient thủ tục tự động theo thời gian mà không cần rebuild, hiệu ứng tan biến, gợn sóng, sai lệch màu. Bạn có thể xấp xỉ vài cái trong số đó bằng đủ nhiều lớp Transform và Opacity , và kết quả sẽ vừa chậm vừa sai. Câu trả lời của Flutter là một fragment shader GLSL được biên dịch lúc build và chạy trên GPU. Đó thật sự là một cửa thoát mạnh mẽ. Nó cũng là một mô hình lập trình khác với chi phí riêng, và phiên bản trung thực của bài này nói cả hai. Shader tối thiểu chạy được Fragment shader là chương trình chạy một lần cho mỗi pixel và trả về một màu. Phương ngữ của Flutter là GLSL ES cộng một nhóm nhỏ tiện ích riêng từ flutter/runtime_effect.glsl . shaders/ripple.frag : #version 460 core #include <flutter/runtime_effect.glsl> precision highp float ; uniform vec2 uSize; uniform float uTime; uniform vec4 uColor; out vec4 fragColor; void main () { vec2 uv =...
Đăng nhận xét
Đọc thêm

Mobile session management: refresh tokens done right — hướng dẫn Flutter

Stolen refresh tokens are a breach. Rotate and detect reuse. Bài này chuyển quan sát đó thành một mô hình nhỏ để bạn có thể kiểm thử, đo lường và giữ cho code dễ bảo trì khi app lớn lên. Vấn đề cốt lõi Rotation, reuse detection, and logout everywhere. Câu hỏi hữu ích không phải API hay pattern có đẹp riêng lẻ hay không, mà là state nằm ở đâu, boundary nào chịu trách nhiệm khi lỗi xảy ra, và người dùng phục hồi thế nào khi happy path biến mất. Mô hình thực tế Logout should revoke server-side, not just clear storage. Hãy bắt đầu bằng một owner rõ ràng cho behavior. Widget chỉ nên render và phát intent; IO, persistence, permission và retry nên nằm sau một interface nhỏ. Nhờ vậy bạn có seam để fake trong test và một chỗ ghi lại các dữ kiện cần theo dõi ở production. Trong app Flutter, boundary thường có dạng: Widget phát intent như load, submit, refresh hoặc retry. Controller hoặc use case validate intent rồi gọi boundary. Boundary trả về data có kiểu hoặc failure có kiểu, không...
Đăng nhận xét
Đọc thêm

Slivers, properly: the protocol behind every Flutter scroll effect

Most Flutter developers meet slivers the way you meet a pothole: something in a design calls for a header that shrinks as you scroll, the search turns up SliverAppBar , it is pasted in, it works, and the mental model stops there. Then the next design needs a header that sticks per section , or a grid that becomes a list halfway down, and the pasted answer has nothing to say. The thing worth understanding is that a sliver is not a special widget. It is a different layout protocol , running inside the same framework. Ordinary widgets ask “how big may I be?” and answer “this big.” Slivers ask a much richer question — “how much of the viewport is left, how far have I been scrolled past, how much of me is visible?” — and give a much richer answer. Once you can read those two objects, every scroll effect in the framework becomes a small variation on a theme. Box layout versus sliver layout Regular Flutter layout is the box protocol: a parent passes down BoxConstraints (min/max width and ...
Đăng nhận xét
Đọc thêm