Nếu bạn chưa quen với việc phát triển Flutter thì bạn phải tìm hiểu kỹ về các cấu trúc lồng vào nhau (nested structures) để biết mức độ khó khăn để thêm hoặc xóa các widget ở giữa code hay để tìm một nơi mà một widget kết thúc và một widget khác bắt đầu. Sau đó, bạn phải dành cả ngày để khớp các dấu ngoặc mở với dấu đóng của chúng. Chúng mình đã mất thời gian để tìm ra các phím tắt. Vì vậy, bạn sẽ không phải mất thời gian để thực hiện lại điều đó vì mình sẽ cung cấp cho bạn; và mình đã sắp xếp tất cả các phím tắt cho phép phát triển nhanh hơn và mượt mà hơn trong Flutter.

Note: Tất cả các phím tắt này đều hoạt động cho Android Studio và IntelliJ trong Windows.

Tạo Stateless widget hoặc Stateful widget

Đoán xem nào? Bạn không phải viết thủ công các widget class của mình và ghi đè các build function. IDE có thể làm điều đó thay bạn.

Bạn chỉ cần gõstlessđể tạo một Stateless Widget như sau:

Hoặc stful để tạo Stateful widget:

Điều gì sẽ xảy ra nếu bạn đã tạo một Stateless Widgetvà thêm nhiều children, nhưng sau đó nhận ra rằng sau cùng thì bạn sẽ cần mộtState? Bạn có nên tạo một StatefulWidgetmới và sau đó chuyển tất cả code của bạn sang nó theo cách thủ công? Bạn không cần phải làm như vậy.

Bạn chỉ cần đặt con trỏ vàoStatelessWidget, nhấnAlt + Entervà nhấp vàoConvert to StatefulWidget. Tất cả code soạn sẵn sẽ được tạo tự động cho bạn.

Những điều kỳ diệu hơn bạn có thể làm với Alt + Enter

Alt + Enter là cây đũa thần giúp bạn sử dụng để phát triển nhanh hơn trong Flutter. Bạn có thể nhấp vào bất kỳ tiện ích con nào, nhấn Alt + Enter để xem bạn có những tùy chọn nào cho tiện ích cụ thể đó. I E.:

Thêm Padding xung quanh Widget

Giả sử bạn có một widget không phải là Container, vì vậy nó không có padding property. Bạn muốn cung cấp một số padding nhưng lại sợ làm rối widget structure của mình. Với cây đũa thần của chúng mình, bạn có thể thêm Padding của mình mà không làm rối tung bất cứ thứ gì:

Chỉ cần nhấnAlt + Entertrên widget cần một padding xung quanh nó và nhấp vào Add Padding. Bây giờ bạn có thể sửa đổi padding mặc định thành bất kỳ thứ gì bạn muốn.

Center Widget

Đây không phải là điều gì quá phi thường. Nó chỉ căn giữa widget của bạn trong không gian có sẵn. Điều này không hoạt động bên trong Column hoặc Row.

Wrap bằng Container, Column, Row hoặc bất kỳ Widget nào khác

Bạn có thể sử dụng cách tiếp cận tương tự để bọc widget của mình bằngContainer. Vì vậy,Containermới sẽ trở thành parent của Widget của bạn.

Hoặc, bạn thậm chí có thể kết hợp nhiều widget với mộtColumnhoặcRowchỉ trong một cú nhấp chuột!

Hoặc bọc chúng bằng bất kỳ widget nào khác:

Bạn thậm chí có thể bọc chúng bằng StreamBuildernếu bạn có phiên bản plugin Flutter mới nhất. Cảm ơn Bhavik Makwana đã cho mình biết về điều đó.

Bạn không thích một widget nào đó? Hãy loại bỏ nó bằng Magic Wand.

Đúng vậy, việc xóa một widget cũng dễ dàng như thêm một widget mới.

Xem code bên trong Widget

That’s the best thing about an open source framework. If you want to know what’s going on behind the scenes of an amazing widget or a class, then you can just put your cursor on it and press Ctrl + B . It will act as a link, taking you straight to your Widget’s source code where you can read everything about it. Flutter also uses comments to explain a lot of its code, making for great documentation.

Đó là điều tốt nhất về một open source framework. Nếu bạn muốn biết điều gì đang diễn ra đằng sau một widget tuyệt vời hoặc một class, thì bạn có thể đặt con trỏ vào nó và nhấn Ctrl + B. Nó sẽ hoạt động như một liên kết, đưa bạn đến thẳng source code của Widget, nơi bạn có thể đọc mọi thứ về nó. Flutter cũng sử dụng các bình luận để giải thích rất nhiều code, một tài liệu tuyệt vời.

Kiểm tra các thuộc tính của Widget  mà không cần rời khỏi tệp hoặc tab

Nếu bạn muốn kiểm tra xem Widget của bạn có thể làm được những điều tuyệt vời nào mà không cần rời khỏi tệp của bạn để tìm hiểu tài liệu, chỉ cần nhấnCtrl+Shift+Iđể xem nhanh constructor của Widget.

Chọn nhanh toàn bộ Widget

Rất nhiều lần chúng ta cần giải nén/xóa toàn bộ widget và chúng ta cố gắng chọn chúng theo cách thủ công:

Nếu đó là một widget thực sự lớn, thì việc tìm ra dấu đóng ngoặc thuộc về Widget nào có thể rất mất thời gian và chúng ta không muốn làm rối toàn bộ cấu trúc của mình.

Những lúc như thế này, mình thích sử dụng phím tắt siêu hữu ích này.

Chỉ cần nhấp vào widget bạn muốn giải nén và nhấn Ctrl+W. Toàn bộ Widget sẽ được chọn cho bạn mà không cần di chuyển con trỏ của bạn một inch.

Format code

Đôi khi code của bạn sẽ chỉ là một mớ hỗn độn. Kiểu như thế này:

Bây giờ, hầu hết các IDE đều có tính năng này, (mặc dù có thể không phải là tổ hợp phím giống nhau). Chỉ cần nhấnCtrl+Alt+Lđể sửa lỗi thụt lề và định dạng lại code của bạn.‌

Xem outline UI ứng dụng  của bạn

Hầu hết các Widget của chúng ta không chỉ có một child trong tree của chúng. Chúng có những children tree có children riêng của chúng và nhiều thứ khác nữa. Nếu Widget của bạn có các children được lồng vào nhau phức tạp, thì bạn có thể gặp chút rắc rối với việc hiểu cấu trúc của code. Nhưng rất may là chúng ta cóFlutter Outlineđể giải cứu!

Bạn có thể tìm thấyFlutter Outlineở  bên phải IDE của mình; nó là một trong những tab dọc và nằm ngay phía trênFlutter Inspector. Khi bạn mở nó lên, nó trông giống như sau:

Giờ đây, bạn có thể thấy rõ Widget nào đang ở đâu, chúng được sắp xếp như thế nào trong giao diện người dùng và widget nào có các children widget khác. Dễ như ăn bánh!

Extract code thành một method

Flutter Outlinelà một công cụ khá hữu ích. Bạn có thể thực hiện hầu hết những việc bạn đã làm vớiAlt + Enter, chẳng hạn như bọc một Column và Center một Widget, nhưng có những thứ tuyệt vời hơn nữa có sẵn trong tabFlutter Outline! Một trong số đó là nútExtract Method.

Nếu bạn cảm thấy như đang viết một Widget quá dài và có lẽ phải là một Widget tùy chỉnh, thì thay vì chuyển code theo cách thủ công thành một method, bạn có thể sử dụng công cụ này để làm điều kỳ diệu cho mình!

Move Widget lên và xuống

Một điều điên rồ khác mà bạn có thể làm vớiFlutter Outlinelà nếu bạn có nhiều children trong một widget, bạn có thể dễ dàng sắp xếp lại thứ tự của chúng:

Bạn cũng có thể di chuyển chỉ một dòng lên hoặc xuống bằng cách nhấnShift+Alt+Up / Down

Refactor Renaming

Đây là một công cụ khá cơ bản mà hầu hết các IDE đều có. Điều này cho phép bạn đổi tên một method, Widget, class hoặc tên tệp và nó đảm bảo rằng các tham chiếu đến nó cũng được đổi tên. Chỉ cần sử dụngShift + F6và nhập tên mới:

Remove Unused Imports

Vì vậy, bạn đang làm việc trên một dự án và bạn đã import rất nhiều file, nhưng theo thời gian, code của bạn ngày càng được tối ưu hóa. Cuối cùng, bạn có thể không cần những file đó nữa. Có thể bạn thường xóa chúng theo cách thủ công, nhưng mình đã ở đây để giúp bạn thực hiện nó dễ dàng hơn, đây là một tổ hợp bàn phím khá đẹp:Ctrl+Alt+O

Đó là tất cả các phím tắt mà mình biết bây giờ. Hãy nhớ kiểm tra lại thường xuyên để biết thêm các mẹo, thủ thuật và những thứ tuyệt vời khác!

Bài viết được lược dịch từ Pooja Bhaumik.