Học Flutter kiểu mới (newbie không nên bỏ qua) | 🔴 Live Coding - Part 7
Вставка
- Опубліковано 20 вер 2024
- Mình sẽ implement màn hình Choose topic của ứng dụng Meditation, một số điểm nổi bật chính bao gồm:
01:21 Dùng Flexible và Expanded để tạo layout responsive
07:28 Dùng FittedBox và fix bugs bằng công cụ Widget Inspector
14:19 Refactor phần logic liên quan đến chọn layout theo orientation
16:38 Tạo data mock cho danh sách topic
18:03 Implement TopicStorage đọc dữ liệu từ file json
19:35 Dùng package "freezed"
22:06 Fix bugs liên quan đến load danh sách topic
24:09 Dùng package "flutter_staggered_list_view" để làm giao diện cho list topic
28:55 Viết layout cho chế độ landscape
=========================
Link Github của Meditation App: github.com/tru...
✅ Xem thêm các video khác:
⭐️ Series "Học Flutter kiểu mới (dành cho newbie)": • Học Flutter kiểu mới (...
#học #lập #trình #Flutter #programming
Đây là chuỗi video về flutter tuyệt cú mèo nhất so với các kênh khác mình từng xem, giải thích dễ hiểu rõ ràng, cảm ơn anh nhiều, mong anh ra nhiều video hơnnnnnn🎉
Tuyệt vời, tks e nhá
ao flutter dep vay a
cảm ơn anh chúc anh sức khơẻ
video hay lắm anh
Video hay quá. Cảm ơn admin
Ủng hộ bạn
Bạn để lại email vào form để mình invite vào Slack giao lưu với mọi người nhá
À thôi mình thấy tin nhắn rồi, đã invite bạn nhá :D
Dùng OrientationBuilder có lẽ sẽ ngắn hơn?
OrientationBuilder cũng chỉ lòi ra cái builder trong đó truyền ra thông tin về orientation thôi, vẫn phải if else ở builder. Ở đây mình tách ra widget riêng để đỡ phải viết lại đoạn if else đó nhiều lần.
a ơi e có 1 listview các textfield, e muốn làm một button ở dưới bottom để clear hết giá trị trong textfield thì dùng gì ạ?
Em có thể cộng thêm 1 vào độ dài list data thực để có thêm 1 item cuối, rồi cho hiện button ở item cuối đó nhé
cho em xin tên theme vscode a dùng với ạ
Đây e ơi marketplace.visualstudio.com/items?itemName=dracula-theme.theme-dracula
@@code.on.sunday tks a 🤗🤗
cái máy ảo anh dùng là gì vậy ạ
À đó là anh dùng thư viện device_preview của Flutter, em tìm trên pub.dev nhé
@@code.on.sunday thanks anh nhé
Đoạn đầu a viết ra rồi đọc đúng ko? =))))
Không =)) anh lỡ nhìn vào màn hình máy tính ở dưới với lại quên lời nên hay nhìn lung tung, nhưng lười quay lại quá :))
nhìn đoạn code tạo widget newbie học theo vào thực tập thì nó bừa chết, góp ý bạn chia function ra return theo kiểu widget để viết. Mình làm video nên hướng dẫn cho mấy bạn mới học làm gọn chút.
Làm function trả về widget không tốt cho performance đâu bạn ạ. Cái đó gọi là helper method. Mỗi lần rebuild widget là nó chạy build lại nguyên đống widget trả về từ những function đó đấy. Bạn có thể tìm hiểu thêm trong video này ua-cam.com/video/IOyq-eTRhvo/v-deo.html
Tất nhiên là nhiều khi tiết kiệm chút rebuild cũng ko đáng lắm. Cảm ơn bạn đã góp ý nhé. Có thể trong video khác mình sẽ nêu vấn đề này cho các bạn biết :D
@@code.on.sunday bạn có nhầm không rebuild thì từ tree widget, tách ra viết clean code. Rebuild chỉ khi set state, mình k có nói về set state nha. Mình chie góp ý code clean hơn và đẹp 😄
@@code.on.sunday còn muốn làm theo cách chỉ build vào đúng widget đấy dùng stream nha bạn, tách widget ra import vào bắn stream update. Ở bước này chẳng cần dùng state management nào như trên mạng đấy
@@jackle7425 chắc bạn chưa hiểu ý mình, nếu viết helper methods để trả về widget đưa vào hàm build, thì bất cứ khi nào widget tổng bị rebuild thì nó sẽ chạy lại toàn bộ các helper methods đó, cũng tức là nó phải build lại tất cả cũng widgets đó. Bạn xem video mình dẫn link đi.
Em dùng jsontodart để tạo hàm getdata được không anh
class Topic {
String? title;
String? thumbnail;
String? color;
String? titleColor;
Topic({this.title, this.thumbnail, this.color, this.titleColor});
Topic.fromJson(Map json) {
title = json['title'];
thumbnail = json['thumbnail'];
color = json['color'];
titleColor = json['titleColor'];
}
Map toJson() {
final Map data = new Map();
data['title'] = this.title;
data['thumbnail'] = this.thumbnail;
data['color'] = this.color;
data['titleColor'] = this.titleColor;
return data;
}
}
Được em ơi, nhưng sau muốn object này immutable và cần các hàm như copyWith, so sánh bằng nhau, thì lại không tiện lắm
@@code.on.sunday khi nào thì mình có video về rest Api với database vậy anh 😂 em không biết quản lý code phần rest sao cho nó hợp lý, nhiều lúc fix bug rest tìm lòi con mắt
@@thanhhoangngoc3609 Nay hoặc mai sẽ có video về load data from API em nhá :D