Xây dựng các ứng dụng di động đa nền tảng với Flutter của Google

Đã có rất nhiều khung di động đa nền tảng trong những năm qua, với những cải tiến ổn định với kinh nghiệm và hiệu suất của nhà phát triển trong suốt. Google's Flutter. là một bổ sung mới cho gói, và đặc biệt thú vị vì thay vì sử dụng JavaScript 'Bridge' bao nhiêu khung (chẳng hạn như REACT NAM), nó biên dịch sang mã gốc thực sự.

Bạn có thể tìm hiểu một chút về cách thức hoạt động trong video giới thiệu bên dưới hoặc đọc trên một hướng dẫn từng bước để bắt đầu với Flutter. Để được nhiều lời khuyên, hãy xem bộ sưu tập hướng dẫn của chúng tôi Giải thích Cách xây dựng một ứng dụng . Hoặc, nếu bạn đang xây dựng một trang web, hãy chọn một người tạo ra trang web và web hosting dịch vụ từ hướng dẫn của chúng tôi. Không hài lòng với việc lưu trữ của bạn? Đây là một số lưu trữ đám mây tùy chọn.

Trong hướng dẫn này, chúng ta sẽ xem xét cách thiết lập Flutter và khám phá những điều cơ bản về việc xây dựng các ứng dụng bằng cách sử dụng khung, sử dụng MacOS để phát triển của chúng tôi. Chúng tôi sẽ giả định rằng bạn đã lập trình trước đây và biết cách sử dụng vỏ bash, nhưng có thể không phát triển cho thiết bị di động.

01. Được thiết lập

Bạn sẽ cần tải xuống và cài đặt một vài thứ trước khi bạn có thể sử dụng Flutter:

• Xcode hỗ trợ iOS
• Android Studio hỗ trợ Android
• SDK Android (Tải xuống qua Android Studio Một khi bạn tạo một dự án mới)

Khi bạn có tất cả những thứ này, hãy chạy Xcode và Android Studio, cài đặt các thành phần bổ sung mà họ cung cấp và tạo một dự án mới để đảm bảo chúng chạy.

Bây giờ bạn đã sẵn sàng để bắt đầu với Flutter. Tải về SDK . Trích xuất nó đến bất cứ nơi nào bạn muốn nó được cài đặt. Chúng ta cần cập nhật đường dẫn của chúng tôi để MacOS có thể tìm thấy rung động bất cứ nơi nào bạn gọi nó. Mở (hoặc tạo) $ Home / .bash_profile :

sudo atom $HOME/.bash_profile

Bây giờ thêm thư mục flutter / bin vào $ PATH. :

export PATH=/Users/simon/dev/flutter/bin:$PATH

Chạy một lệnh shell để làm mới cấu hình bash:

source $HOME/.bash_profile

Bây giờ chúng ta có thể bắt đầu sử dụng flutter cli. Điều đầu tiên cần làm là đảm bảo bạn có phiên bản mới nhất:

flutter upgrade

02. Khắc phục bất kỳ vấn đề

Khi đã xong, Flutter cung cấp một công cụ chẩn đoán tiện dụng, sẽ kiểm tra xem mọi thứ bạn cần được cài đặt và thiết lập chính xác. Nó thực sự hữu ích:

flutter doctor

Hãy lưu ý những gì bác sĩ nói với bạn và đáp ứng bất kỳ vấn đề nào phát sinh. Bạn có thể phải điều hành bác sĩ một vài lần để có thêm thông tin phản hồi và hành động trên đó.

Khi công cụ hài lòng với Flutter, Android Toolchain, iOS Toolchain và Android Studio, bạn sẽ tốt để đi. Đừng lo lắng về các thiết bị được kết nối bây giờ.

Xcode có thể yêu cầu một số bước thêm tại shell để thiết lập đầy đủ:

 sudo xcode-select --switch / applications/xcode.app/contents/Developer
CÀI ĐẶT BREW --HEAD LIBIMOBILEDEVICE
BREW CÀI ĐẶT IDEVICEINSTALLER
BREW CÀI ĐẶT COBOAPODS.
Thiết lập Pod 

Và Android Studio thường cần Thỏa thuận cấp phép chấp nhận:

 Bác sĩ rung động - Giấy phép 

03. Tìm một IDE và bắt đầu một dự án mới

Bây giờ Flutter được thiết lập, bạn sẽ muốn một IDE hoạt động. Có sẵn các plugin cho Android Studio và Intellij. Chúng ta sẽ đi với mã VS, cũng có plugin flutter riêng.

Khởi động mã VS và nhấp vào Xem & GT; Bảng điều khiển. Nhập 'Cài đặt' và chọn tiện ích mở rộng: Cài đặt hành động mở rộng. Tìm kiếm 'Flutter' và cài đặt plugin Flutter. Sau khi thực hiện, hãy khởi động lại mã vs.

Bây giờ chúng tôi đã sẵn sàng để bắt đầu phát triển. Bắt đầu một dự án mới thông qua bảng Lệnh bằng cách chọn Flutter: Tùy chọn dự án mới. Đặt tên cho dự án của bạn, chọn nơi lưu nó và mã VS sẽ gọi Flutter để tạo dự án mới.

04. Thiết lập các thiết bị ảo

Để kiểm tra dự án của chúng tôi, chúng tôi sẽ muốn trình giả lập thiết bị cho phép chúng tôi trên máy tính để bàn. Ở góc dưới bên phải của mã VS (trong thanh màu xanh), bạn sẽ thấy một cái gì đó nói không có thiết bị. Nếu bạn đã phát triển cho thiết bị di động trước đó, khi bạn nhấp vào đây, bạn sẽ thấy trình mô phỏng của mình có sẵn trong bảng Lệnh.

Nếu bạn không có trình mô phỏng, hãy chạy như sau trong thiết bị đầu cuối để mở trình giả lập iOS lần đầu tiên:

 Open -Một trình giả lập 

Sau đó, bạn nên xem trình giả lập iOS khả dụng khi bạn khởi động lại mã VS.

Android phức tạp hơn. Tải Android Studio và trong một dự án Android, nhấp vào Công cụ & GT; Android & GT; Quản lý AVD. Chọn Tạo thiết bị ảo.

Chọn thiết bị để mô phỏng - ví dụ: Google Pixel 2. Nhấp vào Tiếp theo và bạn cũng có thể chọn hình ảnh hệ thống (I.E. Phiên bản OS) để tải xuống. Trên trang tiếp theo trong hiệu suất mô phỏng, chọn Phần cứng - Gles 2.0 để cho phép tăng tốc đồ họa phần cứng trên trình giả lập. Kết thúc quá trình

Khi bạn đã tạo thiết bị ảo trong Android Studio, hãy khởi động lại mã và bạn sẽ thấy trình giả lập Android của mình xuất hiện cùng với trình giả lập iOS trong danh sách thiết bị của VS Mode.

Bây giờ, nếu bạn bấm Không có thiết bị, bạn có thể chọn thiết bị iOS hoặc Android và điện thoại ảo sẽ kích hoạt trên máy tính để bàn của bạn. Hãy thử nó với một trình giả lập iPhone X.

04. Kiểm tra ứng dụng khởi động

Bây giờ trình giả lập đang chạy, bạn có thể kiểm tra ứng dụng khởi động. Nhấn F5 hoặc nhấp vào DEBUG & GT; Bắt đầu gỡ lỗi. Ứng dụng sẽ tải trên trình giả lập và bạn có thể thử tương tác với nó. Hãy kiên nhẫn nếu nó không xảy ra ngay lập tức, vì có thể mất một thời gian để xây dựng.

Trước khi chúng ta có thể làm tương tự trên Android, chúng ta cần phải cài đặt các phụ thuộc Gradle cho dự án của chúng tôi (một sắc thái nhỏ của rung động ngay bây giờ). Điều hướng đến thư mục gốc dự án và chạy:

 Android / Gradlew 

Sau đó, bạn có thể mở trình giả lập Android và chạy Project trong chế độ gỡ lỗi như bạn đã làm cho iOS.

Một tính năng tuyệt vời của Flutter là nó hỗ trợ 'Tải lại nóng' - nghĩa là, bạn có thể sửa đổi nguồn của mình và xem các thay đổi được phản ánh trong trình giả lập ngay lập tức. Trong main.dart. , Hãy thực hiện một vài thay đổi đối với lớp MyApp trong khi iPhone X Simulator chạy:

 Tiểu cảnh: Màu sắc.Green,
Trang chủ: MYHOMEPage mới (Tiêu đề: 'Sách công thức'), = 

Bạn sẽ thấy những thay đổi có hiệu lực ngay khi bạn tiết kiệm.

06. Khám phá hệ thống widget của Flutter

Những gì chúng ta chưa nói đến là ngôn ngữ lập trình phi tiêu mà flutter sử dụng. DART là một ngôn ngữ hướng đối tượng với cú pháp C-Style, được phát triển bởi Google và tất cả các phát triển rung động sử dụng nó. Nếu bạn đã có một số kinh nghiệm về phát triển web hoặc di động, thì nó không hoàn toàn xa lạ với bạn.

Tất cả mọi thứ trong Flutter đều dựa trên các vật dụng, đó là các khối xây dựng của một ứng dụng. Nếu bạn đã sử dụng phản ứng trước đó, cách tiếp cận của Flutter rất giống nhau và các widget tương tự như các thành phần. Về cơ bản, toàn bộ ứng dụng của bạn có thể bị phân hủy thành một hệ thống phân cấp các widget.

Điều này dễ dàng được nhìn thấy trong Ứng dụng của tôi lớp học. Ứng dụng của tôi là một StelessWidget. (Điều này có nghĩa là nó bất biến). Các xây dựng() Phương pháp Chúng tôi đang ghi đè nói với cách rung chuyển cách các widget nên được hiển thị. Điều này tương tự như phản ứng render () chức năng.

Phương thức trả về một Vật chất Widget, đại diện cho một ứng dụng sử dụng thiết kế vật liệu của Google. Điều này lần lượt có một số thuộc tính, đó là các widget: Chủ đề Xác định kiểu hình ảnh được sử dụng và MYHOMEPAGE. là một widget tùy chỉnh được xác định thêm xuống main.dart. tập tin chứa cơ thể của ứng dụng.

07. Chỉnh sửa nội dung của bạn

Không giống như không gian hàng Ứng dụng của tôi Cái gì MYHOMEPAGE. là một widget trạng thái. Điều này có nghĩa là hành vi của nó được xác định bởi _Myhomepagestate. Lớp, cho phép nó lưu trữ thông tin và thay đổi tương ứng, chẳng hạn như khi bạn nhấn nút trên ứng dụng.

Bạn có thể thấy nó hiện đang sử dụng nhiều tiện ích tích hợp Flutter cung cấp để xử lý những thứ phổ biến như bố cục, nút và hiển thị văn bản. Chúng ta hãy thực hiện một số thay đổi đối với lớp đó để sửa đổi những gì ứng dụng của chúng tôi trình bày.

 Lớp _MyHomepagestate mở rộng trạng thái & lt; MYHOMEPAGE & GT; Đồn là
 @ghi đè
 Xây dựng widget (bối cảnh buildcontext) {
   Trả lại giàn giáo mới (
     Thanh đăng ký: Tube mới (
       Tiêu đề: Văn bản mới (Widget.Title),
     ),
     Cơ thể: Container mới (
       Trang trí: BoxDecorate mới (Màu sắc: Màu sắc.Brown 
),
       Trẻ em: Biến đổi mới ()
     )
   );
 Không thể
} 

Chúng tôi đã xử lý nội dung hiện có và thay thế nó bằng một tiện ích container màu nâu nhưng chúng tôi cũng cần tạo một tiện ích tùy chỉnh, được tự động, sẽ được đặt trong thùng chứa.

 Lớp Biến động mở rộng StatelessWidget {
 @ghi đè
 Xây dựng widget (bối cảnh buildcontext) {
   Liệt kê & LT; Widget & GT; widgets = danh sách mới & lt; widget & gt; ();
   Trả về ListView mới (Trẻ em: Widgets);
 Không thể
} 

08. Tải một số tài sản

Tiếp theo, hãy tải một số tài sản với ứng dụng để chúng tôi có thể thêm chúng vào Listview. widget trong vòng Biến thức . Tài sản tĩnh cho một ứng dụng được chỉ định trong pubspec.yaml. Trong phần 'Flutter':

 Tài sản:
   - IMG / Breakfast.jpg
   - IMG / Curry.jpg
   - IMG / Pasta.jpg 

Chúng tôi cũng sẽ tạo một cấu trúc dữ liệu đơn giản trong main.dart, ghép hình với các chuỗi để hoạt động như một hình thu nhỏ và tóm tắt cho các công thức nấu ăn.

 Var Bí quyết = {
   'Ăn sáng.jpg': 'Bắt ​​đầu một ngày ngay với bữa sáng bổ dưỡng này.',
   'pasta.jpg': 'wow bạn bè của bạn bằng cách làm mì ống tươi của riêng bạn.',
   'cà ri.jpg': 'Thể hiện kỹ năng ẩm thực của bạn với một món cà ri phong phú.',
}; 

09. Kết thúc lên

Cuối cùng, hãy cập nhật Biến thức Để xây dựng một danh sách các widget hiển thị các công thức nấu ăn. Chúng tôi sử dụng Image.asset. để tải các tài sản tĩnh chúng tôi đã bao gồm trong pubspec.yaml. .

 Công thức nấu ăn.Foreach ((ngón tay cái, chú thích) = & gt; widgets.add (
       Container mới (trẻ em:
         Đệm mới (đệm:
           edginets mới.all (16.0), trẻ em:
             listtile mới (
               Dẫn đầu: Image.asset ('img /' + ngón tay cái, chiều rộng: 80.0),
               Tiêu đề: Văn bản (chú thích)
             )
           ),
           Trang trí:
             BoxDecorate mới (
                 Biên giới: Biên giới mới (
                     BOTTOM: BRIMERSIDE MỚI (Màu sắc: Màu sắc.Brown)
                 ),
                 Màu sắc: màu sắc.Brown 

             )
       )
     )
); 

Hy vọng rằng bạn đang bắt đầu cảm thấy như thế nào Flutter sử dụng các widget để xây dựng các ứng dụng. Hãy thử sử dụng trình giả lập để xoay thiết bị. Bố cục Flutter sẽ tự động phù hợp với những thay đổi. Để so sánh, hãy thử ứng dụng trên trình giả lập Android.

Bài viết này ban đầu được xuất bản trong mạng lưới , Tạp chí bán chạy nhất thế giới cho các nhà thiết kế và nhà phát triển web. Mua Vấn đề 310. hoặc là đăng ký. .

Đọc thêm:

• Lấy đầu của bạn xung quanh phản ứng với năm yếu tố này
• 11 ứng dụng iPhone miễn phí sáng tạo cho các nhà thiết kế
• Cách thiết kế biểu tượng ứng dụng