Tôi bắt đầu với tư cách là nhà phát triển web front-end và sau đó trở thành Chớp cánh nhà phát triển. Tôi nghĩ rằng có một số khái niệm đã giúp tôi áp dụng Flutter dễ dàng hơn. Cũng có một số khái niệm mới khác nhau.
Trong bài viết này, tôi muốn chia sẻ kinh nghiệm của mình và truyền cảm hứng cho bất kỳ ai cảm thấy tê liệt khi lựa chọn hệ sinh thái này hơn hệ sinh thái khác bằng cách chỉ ra cách các khái niệm chuyển giao và bất kỳ khái niệm mới nào đều có thể học được.
Các khái niệm được chuyển giao qua
Phần này hiển thị những nơi phát triển web front-end và Flutter giống nhau. Nó giải thích các kỹ năng mà bạn đã có là một lợi thế cho bạn nếu bạn bắt đầu Flutter.
1. Triển khai giao diện người dùng (UI)
Để triển khai một giao diện người dùng nhất định trong web front-end, bạn soạn các phần tử HTML và tạo kiểu cho chúng bằng CSS. Để triển khai giao diện người dùng trong Flutter, bạn soạn widget và tạo kiểu cho chúng với tài sản.
Giống như CSS, Color lớp trong Dart hoạt động với “rgba” và “hex”. Cũng giống như CSS, Flutter sử dụng pixel cho các đơn vị không gian và kích thước.
Trong Flutter, chúng ta có các lớp Dart và enums cho hầu hết tất cả các thuộc tính CSS và giá trị của chúng. Ví dụ:
Flutter cũng có Column và Row vật dụng. Đây là những tương đương Flutter cho display: flex trong CSS. Để cấu hình justify-content và align-items phong cách, bạn sử dụng MainAxisAlignment và CrossAxisAlignment đặc tính. Để điều chỉnh flex-grow tạo kiểu, bọc (các) tiện ích con bị ảnh hưởng của Column/Row, trong một Expanded or Flexible.
Đối với giao diện người dùng nâng cao, Flutter có CustomPaint lớp học - nó là để làm rung chuyển những gì Canvas API là để phát triển web. CustomPaint cung cấp cho bạn một họa sĩ để vẽ bất kỳ giao diện người dùng nào bạn muốn. Bạn sẽ thường sử dụng CustomPaint khi bạn muốn một cái gì đó thực sự phức tạp. Cũng thế, CustomPaint là cách tốt nhất khi kết hợp các tiện ích con không hoạt động.
2. Phát triển cho nhiều Độ phân giải màn hình
Trang web chạy trên trình duyệt và ứng dụng di động chạy trên thiết bị. Do đó, trong khi phát triển cho một trong hai nền tảng, bạn phải ghi nhớ nền tảng đó. Mỗi nền tảng triển khai các tính năng giống nhau (camera, vị trí, thông báo, v.v.) theo những cách khác nhau.
Là một nhà phát triển web, bạn nghĩ về khả năng đáp ứng của trang web của bạn. Bạn sử dụng các truy vấn phương tiện để xử lý trang web của mình trông như thế nào trong các màn hình nhỏ hơn và rộng hơn.
Chuyển từ phát triển web di động sang Flutter, bạn có MediaQuery lớp người trợ giúp. Các MediaQuery lớp cung cấp cho bạn thiết bị hiện tại orientation (phong cảnh hoặc chân dung). Nó cũng cung cấp cho bạn chế độ xem hiện tại size, Các devicePixelRatio, trong số các thông tin thiết bị khác. Kết hợp với nhau, các giá trị này cung cấp cho bạn thông tin chi tiết về cấu hình của thiết bị di động. Bạn có thể sử dụng chúng để thay đổi giao diện ứng dụng dành cho thiết bị di động của mình ở các kích thước màn hình khác nhau.
3. Làm việc với Trình gỡ lỗi, Trình chỉnh sửa và Công cụ Dòng lệnh
Các trình duyệt trên máy tính để bàn có các công cụ dành cho nhà phát triển. Những công cụ này bao gồm một trình kiểm tra, một bảng điều khiển, một bộ giám sát mạng, v.v. Những công cụ này cải thiện quá trình phát triển web. Flutter cũng có cái riêng của nó Những công cụ của nhà phát triển. Nó có trình kiểm tra widget, trình gỡ lỗi, giám sát mạng, trong số các tính năng khác.
Hỗ trợ IDE cũng tương tự. Visual Studio Code là một trong những IDE phổ biến nhất để phát triển web. Có rất nhiều phần mở rộng liên quan đến web cho VS Code. Flutter cũng hỗ trợ VS Code. Vì vậy, trong khi chuyển đổi, bạn không cần phải thay đổi IDE. Có các phần mở rộng Dart và Flutter cho VS Code. Flutter cũng hoạt động tốt với Android Studio. Cả Android Studio và VS Code đều hỗ trợ Flutter DevTools. Các tích hợp IDE này giúp hoàn thiện công cụ Flutter.
Hầu hết các khung JavaScript front-end đều đi kèm với giao diện dòng lệnh (CLI). Ví dụ: CLI góc, Tạo ứng dụng React, Xem CLI, v.v. Flutter cũng đi kèm với một CLI. Flutter CLI cho phép bạn xây dựng, tạo và phát triển các dự án Angular. Nó có các lệnh để phân tích và kiểm tra các dự án Flutter.
Các khái niệm mới
Phần này nói về các khái niệm cụ thể về Flutter dễ dàng hơn hoặc không tồn tại trong phát triển web. Nó giải thích những ý tưởng bạn nên ghi nhớ khi nhập Flutter.
Cách xử lý cuộn
Khi phát triển cho web, hành vi cuộn mặc định được xử lý bởi các trình duyệt web. Tuy nhiên, bạn có thể tự do tùy chỉnh cuộn với CSS (sử dụng overflow).
Đây không phải là trường hợp của Flutter. Các nhóm tiện ích không cuộn theo mặc định. Khi bạn cảm thấy rằng các nhóm tiện ích con có thể tràn, bạn phải chủ động định cấu hình cuộn.
Trong Flutter, bạn định cấu hình cuộn bằng cách sử dụng các widget đặc biệt cho phép cuộn. Ví dụ: ListView, SingleChildScrollView, CustomScrollView, v.v. Các widget có thể cuộn này cung cấp cho bạn khả năng kiểm soát tuyệt vời đối với việc cuộn. Với CustomScrollView, bạn có thể định cấu hình các cơ chế cuộn chuyên nghiệp và phức tạp trong ứng dụng.
Về phía Flutter, sử dụng ScrollViews là không thể tránh khỏi. Android và iOS có ScrollView và UIScrollView để xử lý cuộn. Flutter cần một cách để thống nhất trải nghiệm kết xuất và nhà phát triển bằng cách sử dụng ScrollViews, quá.
Có thể giúp bạn ngừng suy nghĩ về luồng cấu trúc tài liệu và thay vào đó coi ứng dụng như một khung vẽ mở cho các cơ chế vẽ gốc của thiết bị.
2. Thiết lập môi trường phát triển của bạn
Để tạo trang web đơn giản nhất, bạn có thể tạo tệp với .html và mở nó trong trình duyệt. Flutter không phải là đơn giản. Để sử dụng Flutter, bạn cần cài đặt Flutter SDK và đã cấu hình Flutter cho một thiết bị thử nghiệm. Vì vậy, nếu bạn muốn viết mã Flutter cho Android, bạn cần phải thiết lập SDK Android. Bạn cũng sẽ cần phải định cấu hình ít nhất một thiết bị Android (Trình giả lập Android hoặc thiết bị vật lý).
Đây là trường hợp tương tự đối với các thiết bị của Apple (iOS và macOS). Sau khi cài đặt Flutter trên máy Mac, bạn vẫn cần thiết lập Xcode trước khi tiếp tục. Bạn cũng sẽ cần ít nhất một trình mô phỏng iOS hoặc iPhone để kiểm tra Flutter trên iOS. Flutter cho máy tính để bàn cũng là một thiết lập đáng kể. Trên Windows, bạn cần thiết lập SDK phát triển Windows với Visual Studio (không phải VS Code). Trên Linux, bạn sẽ cài đặt nhiều gói hơn.
Không cần thiết lập thêm, Flutter hoạt động trên các trình duyệt. Do đó, bạn có thể bỏ qua thiết lập bổ sung cho các thiết bị mục tiêu. Trong hầu hết các trường hợp, bạn sẽ sử dụng Flutter để phát triển ứng dụng dành cho thiết bị di động. Do đó, bạn sẽ muốn thiết lập ít nhất Android hoặc iOS. Flutter đi kèm với flutter doctor yêu cầu. Lệnh này báo cáo trạng thái thiết lập phát triển của bạn. Bằng cách đó, bạn biết phải làm gì, trong quá trình thiết lập, nếu cần.
Điều này không có nghĩa là sự phát triển trong Flutter là chậm. Flutter đi kèm với một động cơ mạnh mẽ. Các flutter run lệnh cho phép tải lại nóng vào thiết bị thử nghiệm trong khi mã hóa. Nhưng sau đó bạn sẽ cần phải nhấn R để thực sự tải lại nóng. Đây không phải là một vấn đề. Phần mở rộng mã VS của Flutter cho phép tự động tải lại nóng khi thay đổi tệp.
3. Đóng gói và Triển khai
Triển khai các trang web rẻ hơn và dễ dàng hơn so với việc triển khai các ứng dụng di động. Khi bạn triển khai các trang web, bạn truy cập chúng thông qua tên miền. Các tên miền này thường được gia hạn hàng năm. Tuy nhiên, chúng là tùy chọn.
Ngày nay, nhiều nền tảng cung cấp dịch vụ lưu trữ miễn phí.
Ví dụ: DigitalOcean cung cấp cho bạn một miền phụ miễn phí trên .ondigitalocean.com.
Bạn có thể sử dụng các miền này nếu bạn đang xây dựng một trang web tài liệu. Bạn cũng có thể sử dụng chúng khi bạn không lo lắng về thương hiệu.
Trong thế giới của Flutter với các ứng dụng di động, trong hầu hết các trường hợp, bạn thường triển khai ứng dụng của mình ở hai nơi.
Bạn phải đăng ký tài khoản nhà phát triển trên mỗi nền tảng này. Đăng ký tài khoản nhà phát triển yêu cầu một khoản phí hoặc đăng ký và xác minh danh tính.
Đối với App Store, bạn cần đăng ký chương trình Nhà phát triển Apple. Bạn cần duy trì đăng ký hàng năm $ 99. Đối với Google Play, bạn cần tạo thanh toán một lần $ 25 cho tài khoản.
Các cửa hàng này xem xét mọi ứng dụng đã được đánh giá trước khi xuất hiện trực tuyến.
Cũng nên nhớ rằng người dùng không dễ dàng sử dụng các bản cập nhật ứng dụng. Người dùng phải cập nhật rõ ràng các ứng dụng đã cài đặt. Điều này trái ngược với web nơi mọi người chỉ có thể xem phiên bản được triển khai mới nhất của trang web.
Quản lý các ứng dụng đã triển khai tương đối khắt khe hơn so với quản lý các trang web đã triển khai. Tuy nhiên, điều này sẽ không làm bạn sợ hãi. Rốt cuộc, có hàng triệu ứng dụng được triển khai trên một trong hai cửa hàng để bạn cũng có thể thêm ứng dụng của mình.
Suy nghĩ bổ sung về Flutter
Flutter là một công cụ đa nền tảng để xây dựng các ứng dụng trên máy tính để bàn, thiết bị di động hoặc web. Các ứng dụng Flutter là pixel hoàn hảo. Flutter vẽ cùng một giao diện người dùng trên mỗi ứng dụng bất kể nền tảng mục tiêu. Điều này là do mỗi ứng dụng Flutter có chứa công cụ Flutter. Công cụ này hiển thị mã giao diện người dùng Flutter. Flutter cung cấp khung vẽ cho mỗi thiết bị và cho phép bạn vẽ theo ý muốn. Công cụ giao tiếp với nền tảng mục tiêu để xử lý các sự kiện và tương tác.
Flutter là hiệu quả. Nó có các mức hiệu suất cao. Điều này là do nó được xây dựng với Dart và nó tận dụng các tính năng của Dart.
Với nhiều lợi ích này, Flutter là một lựa chọn tốt cho nhiều ứng dụng. Các ứng dụng đa nền tảng giúp tiết kiệm tiền và thời gian trong quá trình sản xuất và bảo trì. Tuy nhiên, Flutter (và các giải pháp đa nền tảng) có thể không phải là lựa chọn tối ưu trong một số trường hợp.
Không sử dụng Flutter nếu bạn muốn người dùng sử dụng các công cụ dành cho nhà phát triển nền tảng với ứng dụng của bạn. Công cụ dành cho nhà phát triển nền tảng ở đây có nghĩa là các công cụ dành riêng cho thiết bị như tùy chọn dành cho nhà phát triển Android. Nó cũng bao gồm các công cụ dành cho nhà phát triển trình duyệt.
Không sử dụng Flutter cho web nếu bạn muốn các tiện ích mở rộng của trình duyệt tương tác với trang web.
Ngoài ra, không sử dụng Flutter cho các trang web có nội dung nặng.
Kết luận
Đây là bài đánh giá về các kỹ năng từ phát triển web front-end đến làm việc với Flutter. Chúng tôi cũng đã thảo luận về các khái niệm phát triển ứng dụng mà bạn phải học với tư cách là một nhà phát triển web.
Flutter đơn giản hơn cho các nhà phát triển web vì cả hai đều liên quan đến việc triển khai giao diện người dùng. Nếu bạn khởi động Flutter, bạn sẽ thấy rằng nó mang lại cho bạn trải nghiệm tốt dành cho nhà phát triển. Hãy thử Flutter! Sử dụng nó để xây dựng các ứng dụng dành cho thiết bị di động và tất nhiên, giới thiệu những gì bạn xây dựng.
Chúc mừng!
