Flutter - free resource mobile app, desktop, web

Widget Previews shipped as experimental back in 3.35, and a lot of developers tried it once, found it slow, and went back to hot reload. Flutter 3.47 marks it stable, with local build caching and an abstract theming API that makes the feature worth a second look. If you build design systems, component libraries, or anything with more than three visual states, this changes your inner loop.

The pitch is narrow and honest: the previewer renders individual widgets in isolation, without booting your app, navigating to the right screen, or faking the right state. That is a different job from hot reload, and it is the job hot reload has always been bad at.

Starting the previewer

From your IDE — Android Studio, IntelliJ, or VS Code — the previewer starts automatically; open the Flutter Widget Preview tab in the sidebar. From a terminal:

flutter widget-preview start

That launches a local server and opens a live preview environment in your browser. Builds are cached in a .widget_preview/ folder in your project — this cache is the reason startup got noticeably faster in 3.47, and it is the thing to add to .gitignore if your tooling has not already.

What you can annotate

@Preview comes from package:flutter/widget_previews.dart and can be applied to:

• top-level functions returning a Widget or WidgetBuilder
• static methods in a class returning a Widget or WidgetBuilder
• public widget constructors and factories that take no required arguments

The simplest possible case:

import 'package:flutter/material.dart';
import 'package:flutter/widget_previews.dart';

@Preview(name: 'My Sample Text')
Widget mySampleText() {
  return const Text('Hello, World!');
}

No app, no MaterialApp, no route. Save the file and the preview updates.

Every parameter, and what it is actually for

The Preview class is small, which is a good sign. Here is the full surface:

wrapper is the one that makes previews usable in a real codebase. Most widgets are not standalone — they expect a Scaffold, a theme, or an injected repository. You supply that once:

@Preview(
  name: 'Submit button — pressed state',
  group: 'Form Controls',
  size: Size(240, 56),
  textScaleFactor: 1.5,
  wrapper: _inScaffold,
)
Widget submitButtonPreview() => const SubmitButton(isBusy: true);

Widget _inScaffold(Widget child) => MaterialApp(
      home: Scaffold(body: Center(child: child)),
    );

Rendering the same widget many ways

This is where previews beat hot reload outright. Stack annotations to get one widget rendered under several configurations at once:

@Preview(group: 'Brightness', name: 'Light', brightness: Brightness.light)
@Preview(group: 'Brightness', name: 'Dark', brightness: Brightness.dark)
Widget buttonPreview() => const ButtonShowcase();

When the same three or four variants repeat across dozens of components, promote them to a MultiPreview:

final class MultiBrightnessPreview extends MultiPreview {
  const MultiBrightnessPreview();

  @override
  List<Preview> get previews => const [
        Preview(group: 'Brightness', name: 'Light', brightness: Brightness.light),
        Preview(group: 'Brightness', name: 'Dark', brightness: Brightness.dark),
      ];
}

@MultiBrightnessPreview()
Widget buttonPreview() => const ButtonShowcase();

Baking your design system into a custom annotation

The abstract theme API added in 3.47 is the piece that makes this scale. Rather than repeating theme: on every preview, subclass Preview and supply the builder once:

final class MyCustomPreview extends Preview {
  const MyCustomPreview({
    super.name,
    super.group,
    super.size,
    super.textScaleFactor,
    super.wrapper,
    super.brightness,
    super.localizations,
  }) : super(theme: MyCustomPreview.themeBuilder);

  static PreviewThemeData themeBuilder() {
    return PreviewThemeData(
      materialLight: ThemeData.light(),
      materialDark: ThemeData.dark(),
    );
  }
}

Now every @MyCustomPreview(...) in the codebase renders against your real tokens. PreviewThemeData carries both Material and Cupertino data, which matters more in 3.47 than it used to — with the design system moving into standalone material_ui and cupertino_ui packages, previews are a cheap way to see whether a component actually survives both.

There is also transform(), which lets a custom annotation rewrite the preview at runtime — useful for prefixing names or swapping themes across a whole class of previews without touching call sites.

Previews are not golden tests

Worth being blunt about this, because teams confuse the two. Previews are an authoring tool: fast, visual, human-in-the-loop, no assertions. Golden tests are a regression tool: slow, headless, and they fail your CI when a pixel moves. Previews do not replace goldens, and a preview passing means nothing except that it rendered.

The useful pairing is previews while you build the component, goldens once its states are settled.

The limitations you will hit

The previewer runs in a web-based environment, which sets hard boundaries:

1. No native plugins, and no dart:io or dart:ffi. Anything touching the filesystem, platform channels, or FFI will not render — inject a fake through wrapper instead.
2. Callback arguments must be public and constant. Private closures will not be picked up.
3. Asset paths must be package-based: use 'packages/my_package_name/assets/my_image.png', not 'assets/my_image.png'.
4. Unconstrained widgets are automatically clamped to roughly 50% of the previewer’s height and width. Pass size when that squashes your layout.
5. Single project or Pub workspace only. Multi-project IDE support is still being investigated, so a large monorepo may not light up entirely.

Adopting it without a rewrite

1. Upgrade to 3.47 and run flutter widget-preview start once to confirm the previewer builds your project.
2. Add .widget_preview/ to .gitignore.
3. Pick one leaf component — a button, a badge, a list tile — and add a single @Preview. Do not start with a screen.
4. Write one wrapper that installs your app’s theme and providers, and reuse it.
5. Promote your recurring variants (light/dark, text scale 1.0/2.0, LTR/RTL) into a MultiPreview.
6. Subclass Preview with your design system’s PreviewThemeData and standardise on that annotation.
7. Add goldens for the states you now know are correct.

The bottom line

Widget Previews stopped being a demo in 3.47. The caching makes startup tolerable, and the theme APIs are the difference between a toy and something a design-system team can standardise on. The limitations are real — no native code, package-based asset paths, single-workspace — but they are limitations of scope, not of maturity. If you tried previews in 3.35 and shrugged, the honest advice is to try again: this is the release where the feature earns its place in the loop.

Originally published on FlutterCook. Read the latest version there — that copy is the one kept up to date.

The Q2 2026 survey contains one statistic that reframes how Flutter tooling should be designed: Claude Code at 32% adoption and Antigravity at 23%, both ahead of GitHub Copilot (19%), Cursor (18%) and Codex (17%). Agentic tools have overtaken the autocomplete generation. Roughly a third of Flutter developers now have an agent writing meaningful amounts of their code.

Which creates a problem the framework itself has to solve, because Flutter moves faster than model training data. Flutter 3.47 just changed the import path for the two most-used libraries in the ecosystem. Every model trained before August 2026 will confidently write package:flutter/material.dart forever.

Agent Skills are Google’s answer.

What a Skill actually is

A Skill is a task-oriented instruction set that teaches an agent how to perform a specific development job — not reference documentation, but a procedure.

The framing from the announcement is the clearest way to hold this in your head: MCP provides the hammer and nails; a Skill provides the blueprint and the professional know-how to build the house. An MCP server gives an agent capabilities — run the analyzer, launch a simulator, read a file. A Skill tells it what good work looks like when using those capabilities.

The practical consequence is token efficiency. Skills load progressively, only when relevant to what you asked for. You are not pasting a style guide into every prompt and paying for it on every turn.

The ten Flutter skills

The flutter/skills repository ships these:

• flutter-add-integration-test — configures Flutter Driver and converts interactions into permanent integration tests
• flutter-add-widget-test — component-level testing with WidgetTester to verify rendering and interaction
• flutter-add-widget-preview — adds interactive widget previews for UI component validation
• flutter-apply-architecture-best-practices — structures an app along the recommended UI / Logic / Data layering
• flutter-build-responsive-layout — adaptive layouts using LayoutBuilder, MediaQuery, or Expanded/Flexible
• flutter-fix-layout-issues — resolves overflow and unbounded-constraint errors
• flutter-implement-json-serialization — model classes with fromJson and toJson
• flutter-setup-declarative-routing — configures MaterialApp.router with a package like go_router
• flutter-setup-localization — initialises localization with flutter_localizations and intl
• flutter-use-http-package — REST requests with the http package

The Dart skills live separately in dart-lang/skills, covering language-level work such as pattern-matching refactors and collecting LCOV coverage.

Look at that list as a set and the selection logic becomes obvious. These are not exotic tasks. They are the jobs where an agent left to its own devices produces something that compiles, runs, and is subtly wrong — a layout that works on one screen size, a router configured imperatively, a model class that silently drops a nullable field.

Installing them

Skills install through a single command per repository:

npx skills add flutter/skills --skill '*' --agent universal
npx skills add dart-lang/skills --skill '*' --agent universal

You then select the skills you want and the agent you use. The --agent universal target is what makes this portable across the tools in that survey chart rather than tied to one vendor.

Installing everything with '*' is the fast path. For a team repository, being selective is usually better — install the skills that match your actual conventions, and leave out the ones that would fight your existing architecture.

Where this pays off most

The highest-value case is exactly the situation Flutter 3.47 created. Consider what an agent with stale knowledge produces today:

// What a model trained before August 2026 writes
import 'package:flutter/material.dart';

// What Flutter 3.47 wants
import 'package:material_ui/material_ui.dart';

Both compile right now, because the SDK libraries still exist. One of them starts emitting deprecation warnings in November. An agent has no way to know which is current unless something tells it — and “something” is either a Skill, an MCP server exposing live docs, or you correcting it every single time.

The same applies to @Preview annotations, Impeller-aware performance advice, and Swift Package Manager rather than CocoaPods. Every one of those changed inside the last two releases.

Skills do not replace review

Worth stating plainly, because the survey has a relevant number: developers trust community “battle-tested” features at 41% versus 26% for Google-built features. That scepticism is healthy and should extend here.

A Skill improves the distribution of an agent’s output — fewer wrong-by-default answers, more consistency with framework conventions. It does not make the output correct. flutter-apply-architecture-best-practices will impose a layering on your codebase; whether that layering suits your app is your call, not the agent’s.

Read the generated diff. Run the tests. The Skill has made the agent a better junior, not a senior.

Getting set up

1. Check which agent you actually use. VS Code (66%) and Android Studio (40%) remain where most Flutter work happens; install for the agent running inside your editor.
2. Run both npx skills add commands for flutter/skills and dart-lang/skills.
3. Start selective. Install flutter-fix-layout-issues and flutter-add-widget-test first — the two with the least architectural opinion.
4. Test on a known task. Ask the agent to write a widget test for an existing component and compare against what you would have written.
5. Add the opinionated ones — architecture, routing — only after you have confirmed they match your conventions.
6. Pin your framework version in the prompt when working on migration-sensitive code. Skills help; explicit context helps more.
7. Re-run the install after major releases so the skill definitions track the framework.

The bottom line

The interesting thing about Agent Skills is not that Google shipped an AI feature. It is the admission behind it: a third of the user base now writes code through an agent, and the framework’s release cadence has outrun the models’ knowledge cutoffs. Skills are infrastructure for that gap. They will not make your agent a senior Flutter engineer, but they will stop it confidently importing a library that gets deprecated in November — and on a codebase of any size, that is worth the two commands.

Originally published on FlutterCook. Read the latest version there — that copy is the one kept up to date.

Widget Previews ra mắt dạng thử nghiệm từ 3.35, và khá nhiều lập trình viên thử một lần, thấy chậm, rồi quay về hot reload. Flutter 3.47 đánh dấu nó stable, kèm cache build cục bộ và một API theme trừu tượng khiến tính năng này đáng nhìn lại. Nếu bạn làm design system, thư viện component, hay bất cứ thứ gì có hơn ba trạng thái hiển thị, thứ này thay đổi vòng lặp làm việc của bạn.

Lời hứa của nó hẹp và trung thực: previewer render từng widget riêng lẻ, không cần khởi động app, không cần điều hướng tới đúng màn hình, không cần giả lập đúng state. Đó là việc khác với hot reload, và là việc hot reload xưa nay vẫn làm dở.

Khởi động previewer

Từ IDE — Android Studio, IntelliJ, hay VS Code — previewer tự chạy; mở tab Flutter Widget Preview ở sidebar. Từ terminal:

flutter widget-preview start

Lệnh này dựng một server cục bộ và mở môi trường xem trước trực tiếp trong trình duyệt. Build được cache trong thư mục .widget_preview/ của project — cache này chính là lý do khởi động nhanh lên rõ rệt ở 3.47, và là thứ bạn nên thêm vào .gitignore nếu tooling chưa tự làm.

Bạn có thể annotate cái gì

@Preview đến từ package:flutter/widget_previews.dart và áp dụng được cho:

• hàm top-level trả về Widget hoặc WidgetBuilder
• static method trong class trả về Widget hoặc WidgetBuilder
• constructor và factory public của widget không có tham số bắt buộc

Trường hợp đơn giản nhất:

import 'package:flutter/material.dart';
import 'package:flutter/widget_previews.dart';

@Preview(name: 'My Sample Text')
Widget mySampleText() {
  return const Text('Hello, World!');
}

Không app, không MaterialApp, không route. Lưu file là preview cập nhật.

Đầy đủ tham số, và chúng thực sự dùng để làm gì

Class Preview nhỏ gọn, đó là dấu hiệu tốt. Đây là toàn bộ bề mặt API:

wrapper là thứ khiến preview dùng được trong codebase thật. Phần lớn widget không đứng một mình — chúng cần Scaffold, cần theme, hoặc cần một repository được inject. Bạn cung cấp một lần:

@Preview(
  name: 'Submit button — trạng thái đang bấm',
  group: 'Form Controls',
  size: Size(240, 56),
  textScaleFactor: 1.5,
  wrapper: _inScaffold,
)
Widget submitButtonPreview() => const SubmitButton(isBusy: true);

Widget _inScaffold(Widget child) => MaterialApp(
      home: Scaffold(body: Center(child: child)),
    );

Render cùng một widget theo nhiều cách

Đây là chỗ preview thắng hot reload thẳng thừng. Xếp chồng annotation để có một widget được render dưới nhiều cấu hình cùng lúc:

@Preview(group: 'Brightness', name: 'Light', brightness: Brightness.light)
@Preview(group: 'Brightness', name: 'Dark', brightness: Brightness.dark)
Widget buttonPreview() => const ButtonShowcase();

Khi cùng ba bốn biến thể đó lặp lại qua hàng chục component, hãy nâng chúng thành một MultiPreview:

final class MultiBrightnessPreview extends MultiPreview {
  const MultiBrightnessPreview();

  @override
  List<Preview> get previews => const [
        Preview(group: 'Brightness', name: 'Light', brightness: Brightness.light),
        Preview(group: 'Brightness', name: 'Dark', brightness: Brightness.dark),
      ];
}

@MultiBrightnessPreview()
Widget buttonPreview() => const ButtonShowcase();

Nhúng design system vào một annotation riêng

API theme trừu tượng thêm ở 3.47 là mảnh ghép giúp thứ này mở rộng được. Thay vì lặp theme: trên mọi preview, hãy kế thừa Preview và cấp builder một lần:

final class MyCustomPreview extends Preview {
  const MyCustomPreview({
    super.name,
    super.group,
    super.size,
    super.textScaleFactor,
    super.wrapper,
    super.brightness,
    super.localizations,
  }) : super(theme: MyCustomPreview.themeBuilder);

  static PreviewThemeData themeBuilder() {
    return PreviewThemeData(
      materialLight: ThemeData.light(),
      materialDark: ThemeData.dark(),
    );
  }
}

Giờ mọi @MyCustomPreview(...) trong codebase đều render theo token thật của bạn. PreviewThemeData mang cả dữ liệu Material lẫn Cupertino, điều này ở 3.47 quan trọng hơn trước — khi design system chuyển sang package độc lập material_ui và cupertino_ui, preview là cách rẻ để xem một component có thực sự sống sót ở cả hai hay không.

Còn có transform(), cho phép annotation tuỳ biến viết lại preview lúc chạy — hữu ích khi muốn thêm tiền tố vào tên hoặc đổi theme cho cả một lớp preview mà không đụng vào chỗ gọi.

Preview không phải golden test

Cần nói thẳng, vì nhiều nhóm nhầm hai thứ này. Preview là công cụ soạn thảo: nhanh, trực quan, có con người trong vòng lặp, không có assertion. Golden test là công cụ chống hồi quy: chậm, headless, và làm đỏ CI khi một pixel xê dịch. Preview không thay thế golden, và một preview “chạy được” chẳng chứng minh gì ngoài việc nó render ra.

Cặp đôi hữu ích là: preview trong lúc xây component, golden khi các trạng thái đã ổn định.

Những giới hạn bạn sẽ gặp

Previewer chạy trong môi trường nền web, nên có ranh giới cứng:

1. Không dùng được native plugin, và không có dart:io hay dart:ffi. Mọi thứ chạm tới filesystem, platform channel, hay FFI đều không render — hãy inject một bản giả qua wrapper.
2. Tham số callback phải public và constant. Closure private sẽ không được nhận diện.
3. Đường dẫn asset phải theo package: dùng 'packages/my_package_name/assets/my_image.png', không phải 'assets/my_image.png'.
4. Widget không có ràng buộc kích thước sẽ tự bị giới hạn ở khoảng 50% chiều cao và chiều rộng previewer. Truyền size khi điều đó bóp méo layout.
5. Chỉ hỗ trợ một project hoặc một Pub workspace. Hỗ trợ đa project trong IDE vẫn đang được nghiên cứu, nên một monorepo lớn có thể không sáng đèn hết.

Áp dụng mà không phải viết lại

1. Nâng lên 3.47 và chạy flutter widget-preview start một lần để chắc previewer build được project.
2. Thêm .widget_preview/ vào .gitignore.
3. Chọn một component lá — nút bấm, badge, list tile — và thêm đúng một @Preview. Đừng bắt đầu từ cả màn hình.
4. Viết một wrapper cài theme và provider của app, rồi tái sử dụng.
5. Nâng các biến thể lặp lại (sáng/tối, text scale 1.0/2.0, LTR/RTL) thành MultiPreview.
6. Kế thừa Preview với PreviewThemeData của design system và chuẩn hoá theo annotation đó.
7. Thêm golden test cho những trạng thái bạn đã biết là đúng.

Kết luận

Widget Previews thôi là bản demo ở 3.47. Cache khiến thời gian khởi động chấp nhận được, và các API theme là ranh giới giữa một món đồ chơi với thứ mà một nhóm design system có thể chuẩn hoá. Các giới hạn là thật — không native code, asset phải theo package, chỉ một workspace — nhưng đó là giới hạn về phạm vi, không phải về độ chín. Nếu bạn từng thử preview ở 3.35 rồi nhún vai, lời khuyên thành thật là thử lại: đây là bản phát hành mà tính năng này xứng đáng có chỗ trong vòng lặp làm việc.

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.

Khảo sát Q2 2026 chứa một con số định hình lại cách nên thiết kế tooling cho Flutter: Claude Code 32% và Antigravity 23%, cả hai vượt GitHub Copilot (19%), Cursor (18%) và Codex (17%). Công cụ dạng agent đã vượt qua thế hệ autocomplete. Khoảng một phần ba lập trình viên Flutter giờ có một agent viết một phần đáng kể code của họ.

Điều đó tạo ra một vấn đề mà chính framework phải giải, vì Flutter đi nhanh hơn dữ liệu huấn luyện mô hình. Flutter 3.47 vừa đổi đường dẫn import của hai thư viện được dùng nhiều nhất hệ sinh thái. Mọi mô hình huấn luyện trước tháng 8/2026 sẽ mãi mãi tự tin viết package:flutter/material.dart.

Agent Skills là câu trả lời của Google.

Một Skill thực sự là gì

Skill là một bộ chỉ dẫn theo tác vụ dạy agent cách làm một công việc phát triển cụ thể — không phải tài liệu tra cứu, mà là một quy trình.

Cách diễn đạt trong bài công bố là cách dễ nhớ nhất: MCP đưa cho bạn búa và đinh; Skill đưa bản vẽ và tay nghề để xây nhà. Một MCP server cho agent năng lực — chạy analyzer, mở simulator, đọc file. Một Skill nói cho nó biết làm tốt trông như thế nào khi dùng những năng lực đó.

Hệ quả thực tế là tiết kiệm token. Skill nạp dần, chỉ khi liên quan tới thứ bạn yêu cầu. Bạn không phải dán cả style guide vào mọi prompt và trả tiền cho nó ở mọi lượt.

Mười skill Flutter

Repository flutter/skills cung cấp:

• flutter-add-integration-test — cấu hình Flutter Driver và biến thao tác thành integration test lâu dài
• flutter-add-widget-test — test cấp component với WidgetTester để kiểm chứng render và tương tác
• flutter-add-widget-preview — thêm widget preview tương tác để kiểm chứng component UI
• flutter-apply-architecture-best-practices — cấu trúc app theo phân tầng khuyến nghị UI / Logic / Data
• flutter-build-responsive-layout — layout thích ứng dùng LayoutBuilder, MediaQuery, hoặc Expanded/Flexible
• flutter-fix-layout-issues — xử lý lỗi tràn và ràng buộc không giới hạn
• flutter-implement-json-serialization — class model với fromJson và toJson
• flutter-setup-declarative-routing — cấu hình MaterialApp.router với package như go_router
• flutter-setup-localization — khởi tạo localization với flutter_localizations và intl
• flutter-use-http-package — gọi REST bằng package http

Các skill cho Dart nằm riêng ở dart-lang/skills, phủ phần việc cấp ngôn ngữ như refactor pattern matching và thu thập coverage LCOV.

Nhìn danh sách đó như một tập hợp thì logic chọn lựa hiện ra rõ. Đây không phải tác vụ kỳ lạ. Đây là những việc mà một agent để tự do sẽ cho ra thứ biên dịch được, chạy được, và sai một cách tinh vi — một layout chỉ đúng ở một cỡ màn hình, một router cấu hình theo lối mệnh lệnh, một class model âm thầm bỏ mất một trường nullable.

Cài đặt

Skill cài bằng một lệnh cho mỗi repository:

npx skills add flutter/skills --skill '*' --agent universal
npx skills add dart-lang/skills --skill '*' --agent universal

Sau đó bạn chọn skill muốn dùng và agent bạn đang dùng. Đích --agent universal là thứ khiến việc này khả chuyển trên các công cụ trong biểu đồ khảo sát kia thay vì bị buộc vào một nhà cung cấp.

Cài tất cả bằng '*' là đường nhanh. Với repository của cả nhóm, chọn lọc thường tốt hơn — cài những skill khớp quy ước thực tế của bạn, và bỏ qua những skill sẽ cãi nhau với kiến trúc hiện có.

Nơi thứ này có giá trị nhất

Trường hợp giá trị nhất chính là tình huống Flutter 3.47 vừa tạo ra. Hãy nhìn thứ một agent có kiến thức cũ sinh ra hôm nay:

// Thứ một mô hình huấn luyện trước 8/2026 viết
import 'package:flutter/material.dart';

// Thứ Flutter 3.47 muốn
import 'package:material_ui/material_ui.dart';

Cả hai đều biên dịch được ngay lúc này, vì thư viện trong SDK vẫn còn. Một trong hai sẽ bắt đầu cảnh báo deprecate vào tháng 11. Agent không có cách nào biết cái nào hiện hành trừ khi có thứ gì đó nói cho nó — và “thứ gì đó” hoặc là một Skill, hoặc một MCP server phơi tài liệu trực tiếp, hoặc là bạn sửa nó mỗi một lần.

Điều tương tự áp dụng cho annotation @Preview, lời khuyên hiệu năng biết tới Impeller, và Swift Package Manager thay vì CocoaPods. Mỗi thứ trong số đó đều đổi trong vòng hai bản phát hành gần nhất.

Skill không thay thế review

Cần nói thẳng, vì khảo sát có một con số liên quan: lập trình viên tin các tính năng đã được cộng đồng “thử lửa” ở mức 41% so với 26% cho tính năng do Google xây. Sự hoài nghi đó là lành mạnh và nên áp dụng cả ở đây.

Một Skill cải thiện phân phối đầu ra của agent — bớt câu trả lời sai theo mặc định, nhất quán hơn với quy ước framework. Nó không làm đầu ra trở nên đúng. flutter-apply-architecture-best-practices sẽ áp một cách phân tầng lên codebase của bạn; việc cách phân tầng đó có hợp app của bạn hay không là quyết định của bạn, không phải của agent.

Hãy đọc diff sinh ra. Hãy chạy test. Skill biến agent thành một junior tốt hơn, không phải một senior.

Bắt tay vào cài

1. Xác định agent bạn thực sự dùng. VS Code (66%) và Android Studio (40%) vẫn là nơi phần lớn công việc Flutter diễn ra; hãy cài cho agent chạy trong editor của bạn.
2. Chạy cả hai lệnh npx skills add cho flutter/skills và dart-lang/skills.
3. Bắt đầu có chọn lọc. Cài flutter-fix-layout-issues và flutter-add-widget-test trước — hai skill ít áp đặt kiến trúc nhất.
4. Thử trên một tác vụ đã biết. Bảo agent viết widget test cho một component có sẵn rồi so với thứ bạn sẽ tự viết.
5. Thêm các skill có quan điểm mạnh — kiến trúc, routing — chỉ sau khi bạn xác nhận chúng khớp quy ước của mình.
6. Ghim phiên bản framework trong prompt khi làm việc với code nhạy cảm về migrate. Skill giúp ích; ngữ cảnh tường minh còn giúp hơn.
7. Chạy lại lệnh cài sau mỗi bản phát hành lớn để định nghĩa skill bám theo framework.

Kết luận

Điều thú vị ở Agent Skills không phải là Google ship thêm một tính năng AI. Mà là sự thừa nhận đứng sau nó: một phần ba người dùng giờ viết code thông qua một agent, và nhịp phát hành của framework đã vượt qua mốc kiến thức của các mô hình. Skill là hạ tầng cho khoảng trống đó. Chúng không biến agent của bạn thành kỹ sư Flutter cấp cao, nhưng sẽ ngăn nó tự tin import một thư viện sắp bị deprecate vào tháng 11 — và trên một codebase cỡ nào cũng vậy, hai câu lệnh đó là đáng.

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.