, January 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

Sử dụng SQLite trong Flutter

SQLite là một trong những cách phổ biến nhất để lưu trữ dữ liệu cục bộ....

Sử dụng SQLite trong Flutter
Flutter 2.8 có gì mới?

Cải tiến về hiệu suất, các tính năng Firebase mới, WebView 3.0, desktop status, cập nhật công cụ và hơn thế nữa sẽ xuất hiện trong bản phát hành mới nhất!...

Flutter 2.8 có gì mới?
Dart 2.15 có gì mới?

Ở bài viết này, chúng ta sẽ cùng nhau tìm hiểu chi tiết những tính năng vừa mới được cập nhật thêm ở phiên bản Dart 2.15. Cùng xem thử để xem có tính năng nào mà bạn đang "mong chờ" từ lâu đối với ngôn ngữ Dart hay không 😄....

Dart 2.15 có gì mới?
Flutter vs React Native vs Native: So sánh chi tiết hiệu năng

Hãy so sánh hiệu năng FPS, CPU, Memory và GPU của các công cụ phát triển thiết bị di động phổ biến....

Flutter vs React Native vs Native: So sánh chi tiết hiệu năng
Cách tạo ứng dụng Cryptocurrency price list bằng Flutter SDK

Trong hướng dẫn này, mình sẽ chỉ cho bạn cách sử dụng Flutter để xây dựng một ứng dụng hiển thị giá hiện tại của các loại tiền điện tử khác nhau. Mình sẽ hướng dẫn bạn qua các nguyên tắc cơ bản của Flutter và Dart....

Cách tạo ứng dụng Cryptocurrency price list bằng Flutter SDK
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.