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

07 May, 2025 • Tài Liệu Flutter • Chill mỗi ngày

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

Demo App Fast GIF — 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, 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 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ể, 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:

Flutter project structure.
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:

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:

JSON

{
  "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:

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 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 tại: https://m.me/edu.200lab