Giới thiệu về Flutter

Tram Ho

Giới thiệu

Flutter được phát triển bởi và nó sử dụng bộ công cụ giao diện người dùng của Google để xây dựng các ứng dụng được biên dịch nguyên bản cho nền tảng di động, web và máy tính để bàn, tất cả đều từ một cơ sở mã duy nhất. Nó nhằm mục đích cung cấp Phát triển nhanh với hỗ trợ tải lại nóng, Giao diện người dùng linh hoạt và nhanh chóng, đồng thời mang lại Hiệu suất gốc trong tất cả các nền tảng này. Hiệu suất gốc được chứng minh bằng cách biên dịch mã của bạn sang mã máy ARM gốc bằng trình biên dịch gốc của Dart. Hướng dẫn này sẽ hướng dẫn bạn hiểu những điều cơ bản về Flutter và tôi muốn dạy bằng cách trình diễn, vì vậy chúng tôi sẽ luôn tạo một ứng dụng hoạt động với cơ sở dữ liệu (Sql Lite) để giải mã dễ dàng như thế nào để xây dựng một ứng dụng đa nền tảng tìm nạp dữ liệu, lưu dữ liệu và cập nhật dữ liệu này bằng cách sử dụng rung. Tôi sẽ cố gắng hết sức để tránh bất cứ điều gì có thể làm phức tạp tiến trình học tập của bạn, vì vậy, không cần thêm thông tin gì nữa, hãy cùng chúng tôi tìm hiểu ngay

Tải về rung tại đây . Chọn nền tảng của bạn là Mac hoặc Windows hoặc Ubuntu. Downlaod tập tin zip / và giải nén vào thư mục C: để thư mục Flagship của bạn sẽ được đặt tại C: flop (Trên Windows). Bạn cũng có thể thêm hình nền vào đường dẫn Biến của mình bằng cách nhấp vào biểu tượng bắt đầu, sau đó chuyển đến Chỉnh sửa biến môi trường hệ thống. Tiếp theo, chọn Enviroment Variables> Path> Edit, sau đó thêm mới và nhập C: flaming bin (Lưu ý vì trong trường hợp của tôi, flaming được dán vào C: nên tôi chỉ định thư mục này). Nhấp vào ok và đóng cửa sổ bật lên.

Tiếp theo, bạn có thể xác minh xem phiên bản nào được cài đặt bằng cách mở dòng lệnh và nhập vào where flutter (Trên windows) hoặc which flutter (Trên Mac). Ngoài ra, nếu bạn gặp lỗi chỉ định rằng không cài đặt được phi tiêu, bạn có thể làm theo hướng dẫn để cài đặt phi tiêu rồi chạy flutter doctor để xem một số thông tin về máy bay. Tiếp tục! Tôi sẽ sử dụng Android studio làm IDE của mình vì bản chất nó hỗ trợ tính năng rung giúp phát triển ứng dụng của chúng tôi dễ dàng hơn. Mở studio android và làm theo các bước sau để thiết lập môi trường của bạn.

Ghi chú khác trên phiên bản Mac

Để thiết lập đầy đủ phiên bản Mac. Sau khi bạn dán ảnh rung của mình vào một thư mục. Trong trường hợp của tôi Máy tính để bàn (Mac), bạn có thể thêm nó vào PATH bằng cách mở dòng lệnh và nhập: rm -rf <flutter_repo_directory>/Desktop/bin/cache (Xin lưu ý rằng thư mục được chỉ định của tôi bao gồm Máy tính để bàn nên hãy nhập của bạn cho phù hợp). Để kiểm tra xem nó có hoạt động hay không, hãy đóng dòng lệnh và mở lại, sau đó nhập flutter doctor này sẽ tải xuống các tệp cần thiết và cung cấp cho bạn bản tóm tắt. Cũng cần cập nhật XCode của bạn lên phiên bản mới nhất nếu bạn muốn thử nghiệm trên các thiết bị iOS. Tiếp theo làm theo hướng dẫn để sửa các lỗi còn lại. Trong trường hợp của tôi, tôi gặp lỗi khi cài đặt cocopods mà tôi đã thực hiện bằng cách nhập: sudo gem install cocoapods và cũng cập nhật xcode bằng cách nhập: sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer Sau khi bạn chạy thành công và cập nhật công cụ này, bạn có thể chạy lại bác sĩ rung và lần này bạn sẽ không gặp lỗi và cũng sẽ có thể phát hiện các thiết bị đính kèm. Nếu bạn gặp bất kỳ lỗi nào, hãy làm theo hướng dẫn này một lần nữa.

Bước 1

Nhấp vào Định cấu hình >> Gói và nhấp nháy tìm kiếm. Cài đặt nó rồi khởi động lại Android Studio.

Bước 2

Nhấp vào tạo Ứng dụng Flutter mới >> Đặt đường dẫn sdk của Flutter của bạn >> Đặt tên ứng dụng (contact_app) và Hoàn tất.

Sau khi xây dựng xong ứng dụng, hãy chạy ứng dụng để đảm bảo mọi thứ đều ổn.

Ios

Android

Bây giờ chúng ta hãy bắt đầu các phần thú vị

Phần 1

Bên trong thư mục lib, tạo một thư mục mới có tên là model và trong thư mục này là Liên hệ lớp phi tiêu.

Contact.dart

Tiếp theo, hãy cập nhật tệp pubspec.yaml để nhập thư viện sqflite. sqflite là một thư viện sql lite mà chúng ta có thể sử dụng để lưu dữ liệu của mình. Loại bỏ tất cả văn bản không cần thiết để tệp của bạn có vẻ sạch hơn và thêm sqflite: path: vào phần phụ thuộc như được hiển thị bên dưới.

pubspec.yaml

Bây giờ chúng ta cần thêm một màn hình gói khác. Ở đây chúng ta sẽ thêm một màn hình CreateContactScreen.dart. Điều này sẽ có đầu vào liên hệ của chúng tôi như tên, số, v.v. Nhưng trước tiên hãy thiết lập Homescreen.dart của chúng tôi, đây là màn hình bắt đầu của ứng dụng của chúng tôi.

Homescreen.dart

Trong lớp này, chúng tôi đã thêm một thanh ứng dụng bao gồm hai biểu tượng. Một là biểu tượng thêm để mở CreateContactScreen khi được nhấp vào và biểu tượng thứ hai là biểu tượng tìm kiếm mà chúng tôi cũng sẽ triển khai sau này. Hàm NavigateToCreateContactScreen sẽ đưa chúng ta đến CreateContactScreen bằng MaterialPageRoute mà chúng ta chuyển tên của màn hình vào. Bạn có một lỗi vì chúng tôi không thể tạo màn hình này CreateContactScreen (), vì vậy hãy làm điều đó nhưng trước khi làm điều đó, chúng tôi phải cho ứng dụng biết rằng chúng tôi muốn Màn hình chính của chúng tôi là màn hình khởi chạy và bắt đầu của ứng dụng, vì vậy hãy mở lớp main.dart và thiết lập nó.

main.dart

Một lời giải thích rõ ràng về những gì chúng tôi đã làm ở đây. Đầu tiên, chúng tôi xóa mã được tạo tự động mặc định và đặt tiêu đề của Ứng dụng và chủ đề thành màu xanh lam (Bạn có thể thay đổi thành bất kỳ màu nào bạn thích) nhưng phần quan trọng nhất là chúng tôi đặt trang chủ: HomeSceen () để ứng dụng biết chúng tôi muốn đây sẽ là màn hình khởi chạy của chúng tôi. Dòng đầu tiên và dòng thứ hai chỉ là hàng nhập khẩu. Đầu tiên nhập lớp HomeScreen và nhập thư viện material.dart khác, cho phép chúng tôi sử dụng một loại yếu tố thiết kế material design do google cung cấp. Nói đủ rồi hãy tiếp tục. Bây giờ chúng ta cần sửa lỗi trên Màn hình chính bằng cách tạo một màn hình khác trong gói màn hình của chúng ta có tên là CreateContactScreen nhưng trước tiên hãy tạo một thư mục hình ảnh và thêm camera.png vào đó (Lưu ý rằng thư mục này nên được thêm vào thư mục dự án chính chứ không phải lib)

hình ảnh (camera.png)

Chúng tôi cũng phải tham chiếu hình ảnh này trong tệp pubspec.yaml nếu bạn không thể sử dụng nó. Vì vậy, hãy thêm dòng này vào tệp ngay trong uses-material-design: true .

pubspec.yaml

Được rồi, bây giờ thiết kế CreateContactScreen mà chúng tôi muốn cung cấp sẽ trông giống như sau:

Nó là một thiết kế đơn giản và tôi sẽ giải thích từng phần của nó một cách đơn giản nhất có thể.

CreateContactScreen.dart

Vì vậy, hay thực hiện ngay bây giơ. Dưới đây là các phần quan trọng của lớp này và những gì chúng làm:

  • Dòng 1 đến 3: Hàng nhập khẩu của chúng tôi. Chúng tôi đã nhập lớp Model (Contact.dart) và các thư viện khác mà chúng tôi cần.
  • Dòng 5: Chúng tôi đã mở rộng lớp StatefulWidget . Đừng lo lắng nhiều về StatefulWidget là gì nhưng hãy hiểu rằng hầu hết các giao diện thiết kế trong Flutter đều được coi là widget và trong trường hợp này chúng tôi đang sử dụng StatefulWidget vì nó là một widget mô tả một phần của giao diện người dùng bằng cách xây dựng một nhóm các widget khác (widget bên trong widget) mô tả giao diện người dùng cụ thể hơn. Vì vậy, chúng tôi sử dụng các tiện ích Stateful khi một phần của giao diện người dùng có thể thay đổi động. Ngoài ra, vì các trường chúng ta đang sử dụng bây giờ là các trường có thể chỉnh sửa, nên Widget phải là StatefulWidget, vì vậy chúng tôi đã tạo StatefulWidgets của mình với các State tương ứng của chúng (nameTextController, phoneTextController ….). Tiếp tục!
  • Dòng 15 đến cuối: Chính xác nơi tất cả các hành động xảy ra. Bởi vì chúng tôi sẽ sử dụng màn hình này để thêm Liên hệ mới và cũng cập nhật một liên hệ, chúng tôi có thể lưu trữ điều này bằng cách mở rộng khuôn khổ Sate. Trong initState, chúng tôi sẽ nhận được một phiên bản của lớp Liên hệ mà chúng tôi sẽ kiểm tra nếu không phải null và đặt các giá trị tiện ích hiện tại (Chỉ trong trường hợp cập nhật. Bạn có thể thấy chúng tôi cũng đặt tiêu đề thành contact.name . Điều này sẽ được tích hợp đầy đủ khi chúng tôi hoàn thành cơ sở dữ liệu). Tên sẽ được đặt, giới tính và tất cả những thứ khác.

Tiếp theo, chúng tôi sắp xếp bộ điều khiển của chúng tôi trong phương pháp hủy bỏ. Điều này được gọi khi một đối tượng bị xóa vĩnh viễn khỏi cây. Điều này là để giải phóng mọi tài nguyên được giữ lại bởi bất kỳ đối tượng / bộ điều khiển nào của chúng tôi. Bây giờ chúng ta hãy chuyển sang bản dựng (Dòng 45+). Tại đây người ta có thể tùy chỉnh Appbar, body và thêm các widget con vào giao diện. Mỗi tiện ích được đặt trong một trình bao bọc đệm riêng biệt để bạn có thể dễ dàng tìm thấy chúng. có Hình ảnh nơi chúng tôi đặt nội dung là camera.png, sau đó có nhiều Trường văn bản cho Tên, Địa chỉ, Điện thoại, v.v. Bạn cũng có thể thấy chúng tôi đặt keyboardType cụ thể cho từng Trường văn bản và chuyển các bộ điều khiển cho chủ sở hữu tương ứng của chúng trong khi sử dụng biểu tượng material để đặt biểu tượng tùy chỉnh cho Trường.

Widget cuối cùng là các nút radio được đặt trong một hàng và được gán giá trị 0 và 1 tương ứng. 0 cho Nam và 1 cho nữ. Chúng tôi cũng đã thêm một sự kiện onChanged sẽ được kích hoạt khi một nút radio được chọn trong đó giá trị của nút radio sẽ được chuyển đến biến _radioGenderValue

FloatActionButton mà chúng tôi đã thêm khi được nhấp vào sẽ gọi một phương thức mà chúng tôi sẽ tạo sau này để lưu Liên hệ của chúng tôi trong cơ sở dữ liệu. Tôi biết điều này là rất nhiều để tiêu hóa nhưng đừng lo lắng về việc nói xấu, ít nhất là không phải tất cả. Chỉ cố gắng hiểu phần thiết yếu của lớp học. Cái gì làm cái gì, Chức năng nào chịu trách nhiệm cho cái gì và cái đó tất cả.

Sau khi hoàn thành lớp học này, chúng tôi có thể kiểm tra ứng dụng. Kết nối thiết bị và nhấp vào chạy và bạn sẽ được chuyển đến Màn hình chính. Nhấp vào biểu tượng + và CreateContactScreen sẽ mở ra.

HomeScreen và CreateContactScreen Android

HomeScreen và CreateContactScreen Ios

Hãy gọi đây là phần cuối của Phần 1 và bây giờ chúng ta chuyển sang Phần 2.

Phần 2

Trong phần này, chúng tôi sẽ tích hợp cơ sở dữ liệu sqllite trong ứng dụng của chúng tôi. Chúng tôi đã thêm thư viện sql vào phần phụ thuộc, vì vậy bây giờ chúng tôi sẽ tạo các lớp databaseHelper và như vậy. Bên trong thư mục lib thêm một gói mới db và trong đây thêm một lớp DatabaseHelper

DatabaseHelper.dart

Sử dụng truy vấn sql lite: "CREATE TABLE contacts(id INTEGER PRIMARY KEY AUTOINCREMENT NOT NULL, avatar TEXT, name TEXT, address TEXT, phone TEXT, gender INTEGER)"); chúng tôi đã tạo một bảng liên hệ và thêm một id được tạo tự động cho mỗi hàng với các cụm từ để lưu giữ tất cả dữ liệu liên hệ từ hình đại diện đến giới tính. Phương pháp insertContact () sẽ được sử dụng để thêm một số liên lạc với cơ sở dữ liệu trong khi chúng ta lấy tất cả các điểm tiếp xúc như một danh sách sử dụng phương pháp () các retrieveContacts. Để xóa, chúng ta cũng sẽ gọi phương thức deleteContact () chấp nhận id làm tham số để định vị một liên hệ và cuối cùng là updateContact (), bạn có đoán được không, cập nhật một liên hệ.

Tiếp theo, mở CreateContactScreen.dart và thêm chức năng này:

Cuối cùng gọi phương thức này trong onPressed của nút nổi để lưu. Lưu ý rằng chúng tôi cũng kiểm tra xem liên hệ đối tượng có tồn tại hay không và nếu có chúng tôi sẽ cập nhật và không tạo liên hệ mới. Địa chỉ liên hệ này sẽ được chuyển khi người dùng chọn một liên hệ từ Màn hình chính vì chúng ta sẽ sử dụng cùng một màn hình (CreateContactScreen) để tạo liên hệ mới và cũng cập nhật liên hệ.

Chúng tôi sẽ phải cập nhật Màn hình chính của mình để tất cả các liên hệ của chúng tôi được tải và hiển thị tự động khi chúng tôi mở màn hình như một ứng dụng liên hệ bình thường. Chúng ta sẽ sử dụng hàm getContacts () trong lớp DatabaseHelper để nhận tất cả các địa chỉ liên hệ của chúng ta rồi chuyển đến một Danh sách sau đó được hiển thị trong phần nội dung của HomeScreen.dart. Chúng tôi cũng phải cập nhật HomeScreen để mở rộng StatefulWidget thay vì StatelessWidget trước đó. Sẽ có một lớp ContactListView sẽ trả về bố cục dạng xem tùy chỉnh của chúng ta. Dưới đây là HomeScreen.dart được cập nhật đầy đủ.

Homescreen.dart

Tiếp theo, thêm một lớp Danh sách Liên hệ mà chúng ta đã chuyển làm phần nội dung cho phần thân Màn hình chính ở dòng 38 .

Danh sách liên hệ

Chúng tôi sắp xếp các liên hệ được lưu từ cơ sở dữ liệu bằng phương pháp _fetchContacts Sử dụng tên làm tiêu đề và điện thoại làm phụ đề, sau đó chúng tôi đặt biểu tượng xóa làm dấu và thêm sự kiện onPressed () để bất cứ khi nào người dùng nhấp vào biểu tượng xóa, nó sẽ gọi _deleteContact () . Ngoài ra, chúng tôi điều hướng đến màn hình CreateContact khi người dùng chọn một liên hệ ngoại trừ lần này chúng tôi chuyển các liên hệ đã chọn vào phiên bản. Điều này sẽ cho phép chúng tôi cập nhật liên hệ thay vì tạo liên hệ mới. Tham khảo nút lưu đã nhấp để hiểu điều này xảy ra ở đâu và như thế nào.

Chạy ứng dụng (Lưu ý rằng Danh bạ sẽ không tự động tải lên khi bạn quay lại Màn hình chính. Chúng tôi sẽ khắc phục sự cố này sau. Bạn có thể thoát ứng dụng sau khi lưu một liên hệ, sau đó mở lại để xem bạn đã lưu liên hệ ngay bây giờ).

Kiểm tra iOS

Kiểm tra Android

Trong phần tiếp theo, chúng tôi sẽ thêm tính năng thêm hình ảnh bằng cách sử dụng thư viện bộ chọn hình ảnh cho tính năng rung và chia sẻ với bất kỳ thứ gì khác mà tôi có thể đưa ra đồng thời cải thiện ứng dụng. Cho đến lúc đó …….. Chúc mừng Coding !!!

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo