techover.io

Author: Quyxanh019

  • Flutter – Các phím tắt IDE để giúp bạn code nhanh hơn

    Flutter – Các phím tắt IDE để giúp bạn code nhanh hơn

    Flutter – Các phím tắt IDE để giúp bạn code nhanh hơn

    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 StatelessWidget và thêm nhiều children, nhưng sau đó nhận ra rằng sau cùng thì bạn sẽ cần một State? Bạn có nên tạo một StatefulWidget mớ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ào StatelessWidget, nhấn Alt + Enter và nhấp vào Convert 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ể đó.

    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ấn Alt + Enter trê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ằng Container. Vì vậy, Container mớ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ột Colunm hoặc Row chỉ 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 StreamBuilder nế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

    Đó 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ấn Ctrl + 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ấn Ctrl + 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ấy Flutter 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ên Flutter 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 Outline là 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ới Alt + 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 tab Flutter Outline! Một trong số đó là nút Extract 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ới Flutter Outline là 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ấn Shift + 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ụng Shift + F6 và 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.

  • Làm thế nào để chuyển màn hình mà không cần context trong Flutter?

    Làm thế nào để chuyển màn hình mà không cần context trong Flutter?

    Làm thế nào để chuyển màn hình mà không cần context trong Flutter?

    Chúng ta sẽ học cách loại bỏ context khi navigate trong Flutter nhé.

    Navigate là một phần không thể thiếu trong bất kì ứng dụng nào. Flutter sẽ hỗ trợ bạn navigate đến bất cứ màn hình nào một cách dễ dàng hơn chỉ với việc sử dụng các chức năng navigate đơn giản như Push và Pop.

    Để Push:

    Để Pop:

    Điều này hoạt động khá tốt cho đến khi ứng dụng của bạn mở rộng quy mô và bạn tách logic nghiệp vụ của mình với logic UI. Và bây giờ bạn phải chuyển BuildContext từ một function này sang một function khác. Đôi khi việc này sẽ trở nên rắc rối khiến bạn muốn tránh việc chuyển context.

    Đừng lo lắng nhé vì NavigatorKey sẽ giải cứu bạn.

    1. Đầu tiên, hãy tạo Navigator Key

    2. Tiếp đến, hãy chuyển Navigator Key trong MaterialApp

    3. Cuối cùng, hãy push bằng Navigator Key

    Vậy là xong, chỉ với 3 bước đơn giản, bạn đã có thể loại bỏ context ra khỏi Navigation của mình. Bạn có thể kiểm tra code đầy đủ trên Github.

    Bài viết được tham khảo từ Divyanshu Bhargava.

  • Flutter vs React Native vs Native: So sánh chi tiết hiệu năng

    Hãy so sánh hiệu năng FPS, CPU, Memory và GPU của các công cụ phát triển thiết bị di động phổ biến.

    Câu chuyện đằng sau việc nghiên cứu

    inVerita và nhóm phát triển mobile của mình liên tục nghiên cứu hiệu năng của các giải pháp mobile đa nền tảng hiện có để trả lời câu hỏi công nghệ nào tốt nhất Flutter hoặc React Native (hoặc Native) cho sản phẩm của bạn, đó là cách Flutter vs React Native vs Native Part I nổi lên. Điều đó gây ra nhiều tranh cãi vì người ta nói rằng không sử dụng React Native để thực hiện phép tính (perform multiple calculations) hàng ngày – có thể đúng như vậy – nhưng trong trường hợp này, các task nặng của CPU được ứng dụng Flutter hoặc Native thực hiện tốt hơn.

    Đó là lý do tại sao trong bài viết này, chúng tôi quyết định nghiên cứu hiệu năng của UI có tác động lớn hơn nhiều đến daily user của mobile app.

    Việc đo lường hiệu năng UI rất phức tạp và yêu cầu kỹ sư triển khai cùng chức năng theo cùng một cách trên mọi nền tảng. Chúng tôi đã sử dụng GameBench, công cụ kiểm tra toàn cầu để đảm bảo sự khách quan (nó không thay đổi sự thật là chúng tôi thực sự yêu thích Flutter ở nhiều khía cạnh 🙂 và vẫn chạy rất nhiều dự án React Native và Native). GameBench có rất nhiều không gian để cải tiến, nhưng chúng tôi đã cố gắng đưa mọi ứng dụng vào một môi trường single testing với sự trợ giúp của nó, đó là mục tiêu của chúng tôi.

    Source code mở vì vậy hãy thử nghiệm và chia sẻ suy nghĩ của bạn với chúng tôi nếu bạn muốn. UI animation chủ yếu sử dụng các công cụ khác nhau trên các nền tảng khác nhau, vì vậy chúng tôi thu hẹp mọi thứ vào các thư viện được hỗ trợ bởi mọi nền tảng (trừ một trường hợp) hoặc ít nhất chúng tôi đã làm mọi thứ để hoàn thành điều đó. Kết quả test có thể khác nhau và tùy thuộc vào phương pháp triển khai, chúng tôi tin rằng bạn có thể đẩy bộ tool đến giới hạn mà nó vượt trội so với các con số của chúng tôi. Bây giờ, chúng ta hãy xem xét các trường hợp.

    Thông tin thiết bị phần cứng:

    Đối với mục đích thử nghiệm của chúng tôi, chúng tôi đã sử dụng một chiếc Xiaomi Redmi Note 5 và iPhone 6s giá cả phải chăng.

    Repo link:

    Source code

    Use case 1 — List view benchmarking

    Chúng tôi đã triển khai cùng một UI trên cả Android và iOS ,sử dụng Native, React Native và Flutter. Chúng tôi cũng tự động hóa tốc độ scroll bằng cách sử dụng RecyclerView.SmoothScroller trên Android. Trên iOS và React Native, chúng tôi đã sử dụng cách tiếp cận với timer và lập trình scroll đến vị trí. Trên Flutter, chúng tôi đã sử dụng ScrollController để scroll qua danh sách một cách trơn tru. Trong mỗi trường hợp, chúng tôi có 1000 phần tử trong list view và cùng một thời gian scroll để đến element cuối cùng. Trong mỗi trường hợp này, chúng tôi đã sử dụng hình ảnh trong bộ nhớ đệm (image caching) với các lib khác nhau trên mỗi nền tảng. Xem thông tin chi tiết trong source code.

    iOS

    • Tải và lưu hình ảnh vào bộ nhớ đệm – Nuke

    Android

    • Tải và lưu hình ảnh vào bộ nhớ đệm – Glide

    React Native

    Android — GPU tests results are not supported by the benchmark (unfortunately, with the devices we have, and we have many:)) )

    Kết quả kiểm tra Android – GPU không được hỗ trợ bởi benchmark

    Kết quả kiểm tra
    1. Tất cả các thử nghiệm đều cho thấy FPS xấp xỉ như nhau.
    2. Android Native sử dụng một nửa memory so với Flutter và React Native.
    3. React Native yêu cầu khai thác CPU nhiều nhất. Lý do là việc sử dụng JSBridge giữa mã JS và Native kích động sự lãng phí tài nguyên khi serialization và deserialization.
    4. Về khai thác pin, Android Native có kết quả tốt nhất. React-native đang tụt hậu so với cả Android và Flutter. Chạy các animation liên tục sẽ tiêu tốn nhiều pin hơn trên React Native.

    Test trên iPhone 6s

    Kết quả kiểm tra
    1. FPS: Kết quả của React Native kém hơn so với Flutter và Swift. Lý do là không thể sử dụng biên dịch (compilation) IoT trên iOS.
    2. Memory: Flutter gần như khớp với nguyên bản (native) về mức tiêu thụ Memory nhưng vẫn nặng hơn trên CPU. React Native thua xa Flutter và native trong thử nghiệm này.
    3. Sự khác biệt giữa Flutter và Swift. Flutter đang tích cực sử dụng CPU khi iOS Native đang tích cực sử dụng GPU. Đối chiếu trong Flutter làm tăng tải trên CPU.

    Use case 2 — Heavy animations test

    Ngày nay hầu hết các điện thoại chạy trên Android và iOS đều có phần cứng rất mạnh. Trong hầu hết các trường hợp sử dụng các ứng dụng kinh doanh, có thể thấy không có sự sụt giảm số khung hình/giây nào. Đó là lý do tại sao chúng tôi quyết định thực hiện một số thử nghiệm với animation nặng. Đủ nặng để giảm số khung hình/giây. Chúng tôi đã sử dụng animation animated vector với Lottie trên Android, iOS, React Native và sử dụng các animation tương tự để sử dụng với Flare on Flutter.

    Thử nghiệm animation với Lottie cho Android, iOS, React Native và Flare cho Flutter.

    Lottie cho Android

    Android

    Kết quả kiểm tra
    1. Android và React Native có những điểm tương đồng về hiệu năng của chúng. Đó là điều hiển nhiên vì Lottie cho React Native sử dụng phương tiện Native (16–19% CPU, 30–29 FPS).
    2. Kết quả của Flutter là một bất ngờ, mặc dù nó có một chút trục trặc trong một performance. (12% CPU và 9 FPS).
    3. Android yêu cầu ít bộ nhớ nhất (205 Mb); React Native cần 280 Mb và Flutter cần 266 Mb.
    4. Khởi động lại app. Theo chỉ số này, Flutter là người dẫn đầu (2 giây). Đối với Android Native và React Native, mất khoảng 4 giây.

    Chúng tôi phát hiện ra rằng việc xóa một animation cụ thể khỏi lưới (grid) sẽ tăng FPS lên đến 40% trên Flutter. Chúng tôi cho rằng Flare nặng hơn và không được tối ưu hóa cho loại task này, đó là lý do tại sao Flutter lại bị sụt FPS như vậy.

    IOS

    Kết quả kiểm tra
    1. Kết quả của iOS và React Native trong bài kiểm tra này gần giống như Lottie đối với React Native.
    2. Flare và Flutter sẽ không ngừng khiến bạn ngạc nhiên. Flare chắc chắn có một con đường để đi 😀
    3. iOS Native yêu cầu ít bộ nhớ nhất (48 Mb). React Native cần 135 Mb và Flutter cần 117 Mb.
    4. Khởi động cold app. Theo chỉ số này, Flutter là người dẫn đầu (2 giây). Đối với iOS và React Native, mất khoảng 10 giây.

    Lưu ý: chúng tôi đã sử dụng một thư viện khác cho trường hợp này với Flutter nặng hơn nhiều so với những thư viện đã sử dụng cho các nền tảng khác và nó có thể là lý do khiến fps giảm.

    Use case 3 — Kiểm tra animation thậm chí còn nặng hơn với các rotation, scaling và fade.

    Trong thử nghiệm này, chúng tôi đã so sánh hiệu năng trong khi tạo animation cho 200 hình ảnh. Các animation xoay tỷ lệ và mờ dần được thực hiện cùng một lúc.

    200 hình ảnh

    Android

    Kết quả kiểm tra
    1. Native cho thấy hiệu năng cao nhất và tiêu thụ bộ nhớ hiệu quả nhất.
    2. Flutter cho thấy hiệu năng vừa đủ để làm việc thoải mái nhưng chi phí bộ nhớ cao hơn gấp đôi so với Native.
    3. React Native đã cho thấy hiệu năng thấp trong trường hợp này.

    IOS

    Kết quả kiểm tra
    1. iPhone 6s đủ mạnh để không giảm fps trong cả 3 trường hợp.
    2. Native sử dụng ít tài nguyên hơn và GPU được sử dụng gần hết.
    3. React Native chủ yếu sử dụng CPU để hiển thị trong khi Flutter sử dụng GPU.
    4. React Native đã sử dụng nhiều bộ nhớ hơn một chút.

    Tóm lại

    Đối với các ứng dụng thông thường có animation nhỏ và vẻ ngoài lấp lánh, công nghệ không thành vấn đề. Nhưng nếu bạn sẽ thực hiện một số animation nặng, hãy nhớ rằng shiny Native có sức mạnh hiệu năng cao nhất để làm điều đó. Tiếp theo, hãy đến với Flutter và React Native. Chúng tôi chắc chắn không khuyên bạn nên sử dụng React Native trong một hoạt động quá nặng về CPU, trong khi Flutter rất phù hợp cho các task như vậy từ cả quan điểm CPU và Memory.

    Công cụ bạn chọn tùy thuộc vào sản phẩm và business case cụ thể của bạn. Trong trường hợp bạn đang tìm cách phát triển MVP một nền tảng – hãy sử dụng các phương tiện gốc, nhưng hãy nhớ rằng các ứng dụng Flutter có thể được xây dựng cho cả môi trường mobile, web, desktop và có vẻ như Flutter có thể trở thành Vua phát triển đa nền tảng trong tương lai không xa, vì hiện tại Flutter đã tạo ra một cuộc cạnh tranh cho các công cụ phát triển native, đặc biệt nếu ngân sách phát triển không hạn chế mà bạn vẫn đang tìm kiếm hiệu năng tốt cho ứng dụng của mình trên các nền tảng khác nhau.

    Chúng tôi phải đối mặt với thực tế là có thể có nhiều yếu tố ảnh hưởng đến việc triển khai và benchmark của từng công nghệ và nhiều người trong số các bạn có thể là chuyên gia thực sự của một nền tảng cụ thể có thể khai thác nhiều hơn nữa bộ tool yêu thích. Chúng tôi đã cố gắng giải thích bằng cách tạo ra một môi trường duy nhất cho mỗi ứng dụng để thử nghiệm và một bộ công cụ duy nhất để đo lường hiệu năng và tôi hy vọng bạn thích kết quả này.

    Bài viết này được dịch từ đây.