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

Viết bởi Việt Trần
Dec 15, 2021

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

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!!

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:

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.