Giới thiệu ứng dụng:
Ứng dụng chat giúp mọi người chat nhóm realtime, chia sẻ hình ảnh. Tuy nhiên, trong bài viết này mình sẽ chỉ hướng dẫn các bạn cách tạo một ứng dụng chat local. Còn các chức năng đăng nhập, chat online realtime, chia sẻ hình ảnh mình sẽ hướng dẫn ở các bài viết tiếp theo.
Cài đặt môi trường:
 Để bắt đầu, bạn cần cài đặt Flutter SDK và một editor có cài sẵn plugin Flutter (trong bài viết này mình sử dụng IntelliJ vì nó rất tiện lợi và thông minh). Việc cài đặt Flutter SDK bạn có thể tham khảo ở đường link sau: https://flutter.io/get-started/install/ Ngoài ra bạn cần thêm một thiết bị thật hoặc máy ảo (Android hoặc iOS) để test.
Tạo project:
Bạn mở IntelliJ, chọn Create New Project, sau đó chọn Flutter như hình dưới:


Nếu Flutter SDK Path bị trống thì bạn trỏ đường dẫn tới thư mục chứa Flutter nhé. Sau đó nhấn Next. Các bạn có thể thay đổi thông tin project hoặc để mặc định. Cuối cùng nhấn Finish. Như vậy là các bạn đã tạo thành công ứng dụng sử dụng Flutter. Dưới đây là hình ảnh toàn bộ project sau khi đã tạo xong.


Thư mục lib chứa toàn bộ source code của project. Hiện tại các bạn chỉ cần quan tâm đến thư mục này. Để chạy thử các bạn nhấn vào nút Run trên thanh công cụ.

Một tính năng rất thú vị của Flutter là Hot reload. Đó là khi bạn sửa code và lưu lại, ứng dụng sẽ được reload mà bạn không cần phải build lại. Bạn có thể trải nghiệm ngay tính năng này bằng cách trên file main.dart, bạn sửa primarySwatch: Colors.blue thành primarySwatch: Colors.red sau đó lưu lại. Ứng dụng sẽ tự động chuyển giao diện từ màu xanh sang màu đỏ. Rất thú vị phải không?

Sau đây chúng ta sẽ tiến hành tạo giao diện cho ứng dụng chat.

Tạo giao diện Chúng ta cần tạo giao diện gồm:
Một list để hiển thị tin nhắn
Một ô để nhập tin nhắn
Một nút để gửi tin nhắn



Sau đây chúng ta sẽ tạo lần lượt từng đối tượng trên và ghép chúng lại thành một ứng dụng hoàn chỉnh chạy trên thiết bị thật.
Tạo giao diện cơ bản cho ứng dụng 
Khi tạo mới một project, trong đó đã có sẵn một số thành phần. Chúng ta cần xóa đi những thứ không liên quan đến ứng dụng chat. Bạn sửa lại class _MyHomePageState như hình dưới đây.


Và đây là hình ảnh ứng dụng trắng chưa có gì. Chúng ta cần phải xây dựng các thành phần đã được liệt kê ở trên.


Tạo ô để nhập tin nhắn
Để tạo ô nhập tin nhắn, bạn tạo hàm sau đây bên trong class _MyHomePageState:


Mình sẽ giải thích qua về hàm này:
* Hàm này sẽ trả về cho chúng ta một widget gồm một TextField (là ô chúng ta nhập tin nhắn) với các định dạng giao diện của nó. Bạn có thể thay đổi một số thông số và xem sự thay đổi trên app.
* controller là thành phần quản lý TextField như việc lấy tin nhắn, xóa tin nhắn,... trên TextField
* onSubmitted là thành phần xử lý khi người dùng submit tin nhắn
* decoration là thành phần giúp định dạng cho TextField như text hint,…

Tiếp theo bạn cần tạo đối tượng _textController để quản lý TextField


Tạo hàm _handleSubmitted để xử lý khi người dùng submit:


Hàm này sẽ nhận vào tin nhắn sau đó xử lý. Tạm thời chúng ta sẽ thực hiện việc xóa tin nhắn trên ô TextField
Như vậy việc tạo ô nhập tin nhắn đã hoàn thành. Tiếp theo chúng ta sẽ tạo nút gửi tin nhắn.
Tạo nút gửi tin nhắn:
Chúng ta sẽ viết lại hàm _buildTextComposer như sau:


Bạn thấy hàm của chúng ta đã phức tạp hơn rất nhiều rồi đúng không?

Nhưng sẽ rất dễ hiểu thôi, IconTheme chúng là Widget mà giúp các phần tử bên trong nó như nút gửi tin nhắn của chúng ta hiển thị màu theo theme hiện tại.

Do chúng ta tạo thêm một nút nữa nên cần phải đưa chúng vào 1 Row (row sẽ hiển thị các phần tử theo chiều ngang).

TextField được đưa vào bên trong widget Flexible để lúc nào chiều dài của nó cũng kín màn hình.
Nút gửi chúng ta sẽ sử dụng Widget IconButton với:

* icon là icon của nút
* onPressed là sự kiện nhấn nút. Chúng ta sẽ xử lý trong hàm _handleSubmitted ở trên với tham số truyền vào là tin nhắn lấy từ đối tượng _textController ở trên.

Như vậy là đã xong. Chúng ta làm phần cuối cùng là list tin nhắn.

Tạo list hiển thị tin nhắn

Đầu tiên chúng ta sẽ tạo ra widget để hiển thị 1 tin nhắn


Widget này sẽ gồm có 1 icon là avatar của người gửi và bên cạnh là một Text để hiển thị tin nhắn của người đó.



Sau đó chúng ta sẽ tạo ra list chứa các ChatMessage trên:


Chúng ta sẽ sử dụng ListView với:
* itemBuilder là thành phần build ra từng dòng tin nhắn
* itemCount là số lượng tin nhắn hiển thị trên list

Ở đây chúng ta cần tạo ra một biến _messages chứa các ChatMessage:


Khi lưu lại bạn sẽ thấy ô nhập tin nhắn và nút gửi đã được di chuyển xuống phía dưới màn hình. Đó chính là do widget Flexiable.
Cuối cùng chúng ta cần xử lý khi người dùng nhấn nút gửi sẽ hiển thị tin nhắn đó vào list trong hàm _handleSubmitted như sau:


Hàm setState trên sẽ set lại biến _messages và cập nhật lại giao diện một cách realtime. Đây cũng chính là một tính năng rất hay của Flutter. Nếu bạn nào đã từng biết React Native thì chắc hẳn sẽ rất quen thuộc với state và hàm này.
Như vậy đã xong. Chúng ta cùng xem thành quả:



Tải Source code:  Tại Đây
  

Chúc Các Bạn Thành Công!
                                                                                                                   Nguồn: J2TeaM Security
- - 38 bình luận -

HIỆN TẠI CÓ 38 BÌNH LUẬN

  1. rất khó hiểu nha anh :D cái này phải học LẬP TRÌNH TRC RỒI MÓI LÀM ĐC

    ReplyDelete
    Replies
    1. hahaa,, hãy đầu tư cho tương lai. haha

      Delete
  2. ước gì có post hd học pascal :v năm nay 11 học lại pascal chán vl

    ReplyDelete
  3. hế lô anh ơi :D
    https://www.leanhduc.xyz/2018/08/event-1000000-view-mon-qua-nho-nho.html

    ReplyDelete
  4. Blog lag gần bằng bên em rồi ahaha

    ReplyDelete
  5. còn lk hông cho mình xin 1 slot với www.quocbaoblog.xyz

    ReplyDelete
  6. xin 1 slot liên kết :
    tên :Phê Blog
    link : www.pheblog.tk

    ReplyDelete
    Replies
    1. Phê luôn nha. haha.. ok chiều tớ đặt liên kết nhé

      Delete
    2. Thôi để “ Blog Tổng Hợp “ đi

      Delete
    3. ok con gà tê, đã đặt lk bác :D

      Delete
  7. Replies
    1. hello em zai, chúc em buổi tối vui vẻ. :D

      Delete
  8. lâu rồi không thấy ông qua :V tui chuẩn bị lọc lk đây

    ReplyDelete
    Replies
    1. ahahah// /.mấy hôm nay bận quá,,,,, không có time viết bài mới luôn nè.. vẫn có vào blog mà không có cmt thôi. :d

      Delete
  9. thông báo!! Thứ 6 Quốc Bảo Blog sẽ lọc liên kết đấy ạ :V

    ReplyDelete
  10. Replies
    1. hi/./ lâu nay bận việc lu bu quá nên chưa ra bài mới dc. chắc tầm tuấn nữa ổn định công việc rồi mới viết bài tieps
      :D

      Delete
  11. lâu nay không thấy qua chơi.... chúng ta đều bận cả :(

    ReplyDelete
    Replies
    1. hihi. ai cũng như ai. gần tết rồi. cày để còn có $ về ăn tết với GĐ :)

      Delete
  12. Replies
    1. hihihi. Chắc qua ngày 10 sẽ ra bài mới tiếp :)

      Delete

Một số lưu ý khi bình luận

Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước (xem nội quy)

Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời

Để bình luận một đoạn code, hãy mã hóa code trước nhé