, June 27, 2022

0 kết quả được tìm thấy

Download source code Flutter Home Feed mạng xã hội từ 200lab


  •   4 min reads
Download source code Flutter Home Feed mạng xã hội từ 200lab

Download source code bên dưới bài viết!!

Kết quả sau khi run source code Flutter

Mạng xã hội là một app rất phổ biến vì chúng ta đang dùng chúng hằng ngày. Trong lần chia sẻ này, 200Lab sẽ gởi tặng các bạn source code Flutter cho phần Home Feed của Social Network App kèm các tính năng:

1. Danh sách bài viết trong Social Network App:

  • Hiển thị danh sách các bài viết theo dạng ảnh đơn và nhóm nhiều ảnh.
  • Like/Dislike ngay trên danh sách bài viết.
  • Hiển thị tác giả, thời điểm đăng bài (có thể tính khoảng cách thời gian đăng bài nếu là bài gầy đây).
  • Số lượng người like và số lượng bình luận
  • Một số tính năng nâng cao hơn 200lab sẽ chia sẻ trong khoá học Flutter - Lập trình New Feed ứng dụng Social Network.
Demo Flutter Social Feed: hỗ trợ lưới ảnh đơn và nhiều ảnh

2. Chi tiết bài đăng

  • Thông tin tác giả, thời gian và lưới ảnh.
  • Thống kê lượt like và comment.
  • Danh sách các comment mới nhất.
  • Reaction trên comment (giống Facebook)

3. KHÔNG chỉ là source code dựng UI đơn thuần:

Để demo thực tế nhất có thể, 200Lab vẫn giữ nguyên phần lớn kiến trúc ứng dụng. Nói một cách khác, đây gần như là một phần trong project thực tế. Cụ thể:

3.1 Kiến trúc ứng dụng Flutter từ 200Lab:

  • Flutter project structure của 200Lab.
  • RxDart & Bloc Pattern.
  • Clean architecture.
  • Bloc Provider.
Template kiến trúc ứng dụng cho dự án Flutter

3.2 Dữ liệu được load từ JSON files:

200Lab vẫn load data thông qua các layer kiến trúc. Các bạn sẽ tìm thấy 2 file JSON tại lib/assets:

{
  "code": 200,
  "data": [
    {
      "id": "5GSRPyUpV6Erdss9yx",
      "status": 1,
      "created_at": "2021-06-08T15:37:28+00:00",
      "updated_at": "2021-11-25T16:11:50+00:00",
      "title": "",
      "description": "Thuyền và biển...",
      "comment_counts": 8,
      "images": [
        {
          "id": "5Rx56gwGEjjYDaYbUe",
          "url": "https://dofhunt.imgix.net/prod/post/1623166611100944455.jpeg",
          "org_width": 2048,
          "org_height": 1205,
          "org_url": "https://dofhunt.s3.amazonaws.com/prod/post/1623166611100944455.jpeg",
          "cloud_name": "s3",
          "dominant_color": "",
          "file_size": 492
        }
      ],
      "like_counts": 2,
      "view_counts": 2,
      "pulse_score": 0,
      "is_sensitive": false,
      "is_private": false,
      "tags": [
        "phucmodoro",
        "nhatrang",
        "bien",
        "phongcanh"
      ],
      "user": {
        "id": "25beq4NfDrbB4SFSx",
        "username": "thanhphuc",
        "first_name": "thanh",
        "last_name": "phuc",
        "avatar": {
          "url": "https://lh3.googleusercontent.com/a-/AAuE7mAsRgHEXTKHlV_Mi95b6YPZgQdgyrQlhx3PneE_Hg",
          "org_width": 512,
          "org_height": 512,
          "org_url": "",
          "cloud_name": "google",
          "dominant_color": ""
        },
        "system_role": "user",
        "is_verified": false,
        "created_at": "2019-12-08T00:20:37+00:00"
      },
      "category": {
        "id": "43b6gvVy6VVUU8",
        "title": "Life Style"
      },
      "photos": [
        {
          "id": "5Rx56gwGEd8bGdz7Sk",
          "status": 1,
          "created_at": "2021-06-08T15:37:28+00:00",
          "updated_at": "2021-06-08T15:38:07+00:00",
          "title": "",
          "description": "Thuyền và biển...",
          "image": {
            "url": "https://dofhunt.imgix.net/prod/post/1623166611100944455.jpeg",
            "org_width": 2048,
            "org_height": 1205,
            "org_url": "",
            "cloud_name": "s3",
            "dominant_color": "",
            "file_size": 492
          },
          "exif": null,
          "tags": [
            "phucmodoro",
            "nhatrang",
            "bien",
            "phongcanh"
          ],
          "comment_counts": 0,
          "like_counts": 0,
          "view_counts": 0,
          "collection_counts": 0,
          "pulse_score": 0,
          "pulse_type": "fresh",
          "is_private": false,
          "is_sensitive": false,
          "storage_length": 492,
          "user": {
            "id": "25beq4NfDrbB4SFSx",
            "username": "thanhphuc",
            "first_name": "thanh",
            "last_name": "phuc",
            "avatar": {
              "url": "https://lh3.googleusercontent.com/a-/AAuE7mAsRgHEXTKHlV_Mi95b6YPZgQdgyrQlhx3PneE_Hg",
              "org_width": 512,
              "org_height": 512,
              "org_url": "",
              "cloud_name": "google",
              "dominant_color": ""
            },
            "system_role": "user",
            "is_verified": false,
            "created_at": "2019-12-08T00:20:37+00:00"
          },
          "liked": false
        }
      ],
      "liked": false
    },
    ....
  ]
}

4. Những vấn đề bạn có thể gặp phải khi làm dự án tương tự

Đa phần những dự án mạng xã hội sẽ cần sự thay đổi dữ liệu rất thường xuyên, chi tiết và realtime. Việc quản lý những thay đổi này để đảm bảo tính chính xác cũng như hiệu năng mượt mà sẽ là một thử thách không dễ.

Một số vấn đề theo kinh nghiệm đến từ đội ngũ 200Lab:

  • Dựng UI hiệu quả cao, tái sử dụng code và logic (Lego mindset).
  • Phân trang dữ liệu khi vuốt hết màn hình (Infinite Scroll Pagination).
  • Tối ưu hình ảnh khi danh sách có quá nhiều item.
  • Hiển thị hình ảnh đúng nét và phù hợp cho từng thiết bị, tối ưu bộ nhớ và hiệu năng.
  • Trường hợp user chưa đăng nhập và đã đăng nhập.
  • Quản lý state hiệu quả cho cả từng Widget, màn hình và global.

Những trải nghiệm này 200Lab sẽ chia sẻ chi tiết thông qua khoá học: Flutter - Lập trình New Feed ứng dụng Social Network.

5. DOWNLOAD source code:

Các bạn có thể nhận source code thông qua email cung cấp dưới form này nhé:

Nếu đợi lâu vẫn không thấy email, các bạn vui lòng check lại trong mục spam hoặc inbox fanpage 200Lab tại: https://m.me/edu.200lab

Bài viết liên quan

Tổng hợp các Shortcuts, Extensions & Settings trong VSCode khi lập trình Flutter

Trong bài viết này, mình sẽ liệt kê cho bạn các shortcuts, extensions, setting mà bạn nên sử dụng để lập trình Flutter hàng ngày....

Tổng hợp các Shortcuts, Extensions & Settings trong VSCode khi lập trình Flutter
[Phần 1] Những extension cần thiết khi làm việc với Flutter trên VS Code

VS Code là 1 text editor tuyệt vời được phát triển bởi Mircosoft. Đây là một trong các công cụ được developer trên toàn thế giới yêu thích vì sự tiện lợi, dễ dùng và nó chứa hàng ngàn, thậm chí trăm ngàn các extension phục vụ cho bạn trong quá trình bạn phát triển phần mềm....

[Phần 1] Những extension cần thiết khi làm việc với Flutter trên VS Code
Fix lỗi Flutter 3 không thể build app trên iOS

Cách fix lỗi Flutter 3 không thể build và run được app trên iOS với video hướng dẫn chia tiết...

Fix lỗi Flutter 3 không thể build app trên iOS
Flutter Coding UI Speed Code

Nhận bản UI siêu đẹp nhưng làm sao để phân tích rồi code ra một cách chính xác nhất? Series này 200Lab sẽ cho bạn một góc nhìn thực tế về quá trình code UI cho app Movie Ticket....

Flutter Coding UI Speed Code
Flutter 3 - Những cập nhật mới có gì hot

Bài viết này cung cấp cho bạn những thông tin cập nhật mới nhất của Flutter 3, giúp bạn có cái nhìn tổng quan về các thay đổi và tính năng bổ ích...

Flutter 3 - Những cập nhật mới có gì hot
You've successfully subscribed to 200Lab Blog
Great! Next, complete checkout for full access to 200Lab Blog
Xin chào mừng bạn đã quay trở lại
OK! Tài khoản của bạn đã kích hoạt thành công.
Success! Your billing info is updated.
Billing info update failed.
Your link has expired.