Tự học Flutter - Bước đầu làm quen với ngôn ngữ lập trình mới
Flutter là một framework mã nguồn mở do Google phát triển, cho phép xây dựng các ứng dụng di động chạy trên cả Android và iOS chỉ với một base code. Với Flutter, bạn chỉ cần viết một lần code là có thể chạy trên cả hai nền tảng, tiết kiệm thời gian và chi phí phát triển rất nhiều. Hiện Flutter đang là một trong những framework ứng dụng di động phổ biến và được ưa chuộng nhất.
Trong bài viết này, chúng ta sẽ cùng tìm hiểu xem Flutter là gì, những ưu điểm vượt trội của Flutter so với các công nghệ khác, và cách bắt đầu học Flutter để có thể phát triển ứng dụng di động một cách dễ dàng.
Flutter là gì?
Flutter là một SDK (Software Development Kit - bộ công cụ phát triển phần mềm) mã nguồn mở để xây dựng các ứng dụng mobile, web và desktop từ cùng một base code. Flutter sử dụng ngôn ngữ lập trình Dart để phát triển ứng dụng.
Ưu điểm của Flutter là cho phép xây dựng giao diện người dùng cho các nền tảng khác nhau chỉ với một base code. Cụ thể, bạn có thể dùng Flutter để phát triển cả app Android, iOS, web app và desktop app chỉ với một ngôn ngữ lập trình Dart duy nhất.
Flutter cung cấp các widget giúp xây dựng giao diện người dùng hiện đại, đẹp mắt và có trải nghiệm người dùng tốt. Không chỉ vậy, Flutter còn hỗ trợ tích hợp các dịch vụ như camera, GPS, các dịch vụ Google,... giúp phát triển ứng dụng nhanh chóng.
Ưu điểm của Flutter
Dưới đây là một số ưu điểm nổi bật của Flutter:
- Phát triển một lần, chạy được trên nhiều nền tảng: Chỉ cần viết một base code, có thể chạy trên cả Android và iOS. Tiết kiệm thời gian và chi phí phát triển.
- Giao diện đẹp mắt: Flutter cung cấp các widget giúp xây dựng giao diện đẹp mắt, hiện đại và trải nghiệm người dùng tốt.
- Phát triển nhanh: Hot Reload cho phép xem ngay thay đổi giao diện mà không cần biên dịch lại. Tăng tốc độ phát triển ứng dụng.
- Cộng đồng lớn: Với sự hỗ trợ từ Google và cộng đồng lớn, việc học và sử dụng Flutter trở nên dễ dàng hơn.
- Hoàn toàn miễn phí: Flutter là mã nguồn mở và hoàn toàn miễn phí. Không mất phí khi phát triển và triển khai ứng dụng.
Cài đặt Flutter
Để có thể bắt đầu lập trình Flutter, bạn cần cài đặt Flutter SDK và một số công cụ hỗ trợ. Cụ thể các bước cài đặt như sau:
- Cài đặt Flutter SDK: Truy cập trang chủ Flutter và tải về phiên bản Flutter SDK mới nhất cho hệ điều hành của bạn (Windows, MacOS, Linux).
- Cài đặt Android Studio/VS Code: Cài đặt một IDE như Android Studio hoặc Visual Studio Code để viết code Flutter.
- Cấu hình biến môi trường: Thêm đường dẫn tới thư mục bin của Flutter vào biến môi trường PATH.
- Khởi động lại máy tính: Sau khi cài đặt, bạn cần khởi động lại máy tính để cập nhật các biến môi trường.
- Kiểm tra cài đặt: Mở Terminal/Command Prompt gõ lệnh
flutter doctorđể kiểm tra Flutter đã được cài đúng hay chưa.
Ngoài ra còn có một số công cụ cần thiết như Android SDK/Xcode, Chrome,... Chi tiết có thể xem hướng dẫn trên trang chủ Flutter.
Cấu trúc thư mục trong Flutter
Sau khi tạo Flutter project trong Android Studio/VS Code, bạn sẽ thấy cấu trúc thư mục như sau:
- android: Chứa code dành riêng cho Android.
- ios: Chứa code dành riêng cho iOS.
- lib: Chứa phần lớn code cho ứng dụng.
- test: Chứa các file test cho ứng dụng.
- pubspec.yaml: File cấu hình các package và tài sản cho ứng dụng.
Trong đó, thư mục lib là nơi bạn sẽ dành nhiều thời gian nhất để code. Bên trong lib sẽ có các file như:
- main.dart: Điểm khởi đầu của ứng dụng Flutter, chứa hàm main().
- pages: Chứa các file màn hình (screen) của ứng dụng.
- models: Định nghĩa các model dữ liệu.
- services: Các dịch vụ như http request, socket,...
- utils: Chứa các hàm tiện ích chung.
- widgets: Các custom widget dùng trong ứng dụng.
Mọi thứ của ứng dụng sẽ được tổ chức ngăn nắp trong các thư mục con bên trong lib.
Cú pháp cơ bản trong Dart
Để bắt đầu code Flutter, bạn cần nắm được cú pháp cơ bản của ngôn ngữ Dart. Dart là ngôn ngữ lập trình hướng đối tượng, dễ học nếu bạn đã từng học Java hoặc các ngôn ngữ C-based khác.
Dưới đây là một số khái niệm cơ bản trong Dart:
- Biến:
var name = 'John'; - Hằng số:
const pi = 3.14; - Kiểu dữ liệu: int, double, bool, String,...
- Toán tử: + - * / % ++ --...
- Câu điều kiện: if/else if/else
- Vòng lặp: for, while, do/while
- Hàm: Cú pháp tương tự như Java hoặc JS,...
Ngoài ra còn các khái niệm về lớp, đối tượng, kế thừa,... tương tự như hướng đối tượng. Bạn có thể tham khảo thêm chi tiết về cú pháp Dart tại trang chủ Dart.
Các khái niệm cơ bản trong Flutter
Sau khi nắm được ngôn ngữ Dart, bạn cần tìm hiểu các khái niệm cơ bản của Flutter:
- Widget: Mọi thứ đều là widget trong Flutter. Chúng được sử dụng để xây dựng giao diện người dùng.
- Material Design: Flutter sử dụng Material Design để thiết kế giao diện người dùng đẹp mắt và tuân thủ các chuẩn UI/UX.
- Stateless và Stateful Widget: Stateless Widget không thay đổi trạng thái, Stateful Widget có thể thay đổi trạng thái.
- BuildContext: Cung cấp thông tin về cây widget hiện tại, giúp truy xuất các widget khác trong cây.
- Navigator: Điều hướng giữa các màn hình trong ứng dụng.
Ngoài ra còn rất nhiều khái niệm quan trọng khác mà bạn cần tìm hiểu khi học Flutter. Hãy đọc tài liệu trên trang chủ Flutter để nắm được những khái niệm cơ bản nhất.
Các bước để tạo ứng dụng Flutter đầu tiên
Sau khi đã hiểu các khái niệm cơ bản, bạn có thể bắt tay vào code ứng dụng Flutter đầu tiên với các bước sau:
- Tạo Flutter project: Mở Android Studio/VS Code, tạo một Flutter project mới và chọn ngôn ngữ lập trình là Dart.
- Viết code giao diện: Trong file main.dart, sử dụng các widget có sẵn của Flutter để xây dựng giao diện ban đầu, ví dụ gồm button, text, image,...
- Xử lý sự kiện: Xử lý các sự kiện như click button, scroll, popup,... bằng cách gán callback function
Các bạn có thể tham khảo thêm nguồn khác:
Học Flutter từ cơ bản đến nâng cao. Phần 1: Làm quen cô nàng Flutter
Học Flutter từ cơ bản đến nâng cao. Phần 1: Làm quen cô nàng Flutter Lời mở đầu Gần đây, Flutter nổi lên và được Google PR như một xu thế của lập trình di động vậy. Với bản tính say mê gái, á nhầm mê>
https://viblo.asia/p/hoc-flutter-tu-co-ban-den-nang-cao-phan-1-lam-quen-co-nang-flutter-4dbZNJOvZYM
Học lập trình Flutter cơ bản | Học Lập Trình Online Miễn Phí
Chúc các bạn học tập chăm chỉ. Bài 1: Giới thiệu Flutter Bài 2: Cài đặt Flutter Bài 3: Tạo ứng dụng Flutter đầu tiên Bài 4: Kiến trúc ứng dụng Flutter Bài 5: Giới thiệu ngôn ngữ Dart Bài 6: Widget tro>
https://vncoder.vn/android/hoc-lap-trinh-flutter-co-ban
Khóa học Lập trình di động đa nền tảng Flutter 2022
Giáo trình học Flutter từ cơ bản tới nâng cao, biên soạn chi tiết, thực hành >70% thời lượng Nhiều dự án mẫu demo từ đơn giản đến phức tạp trên các nền tảng MacOS, Linux, Windows Hỏi đáp trong và ngoà>
https://flutter.techmaster.vn
8 Khóa Học Lập Trình Flutter Nên Học - NordicCoder
8 Khóa học Flutter & Dart tốt nhất cho người mới bắt đầu. Nếu bạn tin rằng Flutter đang trở thành tương lai của ngành phát triển ứng dụng di động và muốn học thêm về nó, danh sách các khóa học Flutter>
https://nordiccoder.com/blog/flutter-co-ban
MIỄN PHÍ 100% | Series tự học Flutter từ cơ bản tới nâng cao » Cafedev.vn
MIỄN PHÍ 100% | Series tự học Flutter từ cơ bản tới nâng cao (cập nhật liên tục...) Flutter là một bộ công cụ giao diện người dùng để tạo các ứng dụng nhanh, đẹp, được biên dịch nguyên bản cho thiết b>
https://cafedev.vn/series-tu-hoc-flutter-tu-co-ban-toi-nang-cao
Tổng hợp các tài liệu học Flutter - Tự học | by Lê Thành Trung | F8
Học Flutter Ở trang chủ của Flutter, khi bạn đọc hết nội dung trong docs của Flutter => bạn đã nắm vững kiến thức nền => áp dụng nó vào bài toán thực tế. Link: https://flutter.dev/docs 2.3. API Refere>
https://fullstack.edu.vn/blog/tong-hop-cac-tai-lieu-hoc-flutter-tu-hoc.html
Top 6 khóa học và lộ trình học Flutter nên học nhất 2022
a) KH Flutter căn bản Chúng tôi đã tuyển chọn cho bạn 4 khóa học giúp bạn học căn bản như sau: 1. Flutter Docs Dĩ nhiên tìm hiểu căn bản thì không gì bằng tài liệu căn bản chính chủ của SDK này rồi. T>
https://sosanhgiakhoahoc.com/khoa-hoc-flutter
Học Flutter - phần 2: Cơ bản về WIdgets.
Hôm nay, chúng ta sẽ tiếp tục học Flutter bằng cách build một ứng dụng nhỏ và phân tích các dòng code để hiểu một cách thực tế các kiến thức. Các bạn chưa đọc phần 1 thì có thể đọc nó ở đây trước khi>
https://viblo.asia/p/hoc-flutter-phan-2-co-ban-ve-widgets-1Je5E9jA5nL
Báo Flutter - Chia sẻ kiến thức Flutter từ cơ bản đến nâng cao
Trong bài viết này, Báo Flutter sẽ hướng dẫn các bạn chi tiết về các kỹ thuật làm việc với REST API trong lập trình Flutter. REST API là gì API (Application Programming Interface) : Hiểu đơn giản… Đọc>
https://baoflutter.com
Học cách học Flutter sao cho hiệu quả.
Học cách học Flutter sao cho hiệu quả. Một trong những điều e ngại của các dev native đó là flutter có thể đáp ứng được đến mức độ nào so với những app native, với những app đơn thuần thì có lẽ ko cần>
https://viblo.asia/p/hoc-cach-hoc-flutter-sao-cho-hieu-qua-naQZRxev5vx
Bài 1: Giới thiệu Flutter - Học lập trình Flutter cơ bản
Flutter là gì? Flutter là một framework mã nguồn mở cho phép tạo ứng dụng di động với hiệu năng cao, chất lượng tốt hỗ trợ đa nền tảng, phù hợp với phát triển ứng dụng Android và iOS. Sử dụng ngôn ngữ>
https://vncoder.vn/bai-hoc/gioi-thieu-flutter-204
Khóa học Flutter từ cơ bản đến nâng cao - Báo Flutter
Dec 8, 2020- Học Flutter cơ bản (flutter cơ bản) - Học Phí 1.950.000 VND * Khóa học Flutter từ cơ bản đến nâng cao - Kéo dài 8 tuần - Tuần 2 buổi, mỗi buổi 2h - Học từ cơ bản đến nâng cao (flutter cơ>
https://baoflutter.com/cam-tay-chi-viec-lap-trinh-ung-dung-di-dong-flutter
Tự học Flutter | Kiến trúc của Flutter » Cafedev.vn
Mar 19, 2021CHỌN LỌC TOP NHỮNG KHOÁ HỌC LẬP TRÌNH ONLINE NHIỀU NGƯỜI THEO HOC TẠI ĐÂY Nội dung chính 1. Kiến trúc Flutter 2. Flutter Engine 3. Thư viện nền tảng (Foundation Library) 4. Vật dụng (widge>
https://cafedev.vn/tu-hoc-flutter-kien-truc-cua-flutter
0.0 Lộ Trình Học Flutter (Tự Học Flutter - Flutter Roadmap 2021)
#flutter #dart #dummy_fresher ????giới thiệu lộ trình tự học flutter flutter roadmap 2021 lập trình mà không biết tiếng anh thì toang đấy anh em ạ →đăng kí học tại đây...>
https://www.youtube.com/watch?v=u-XGOrHBB1c
????Giáo trình tự học Flutter/Dart - O₂ Education
Mar 20, 20213️⃣ Tự học Flutter qua các app đơn giản Viết app Flutter: I am Rich Viết app Flutter: MiCard Viết app Flutter: Simple Instrument Viết app Flutter: Counter App Viết app Flutter: Project Dic>
https://o2.edu.vn/giao-trinh-tu-hoc-flutter-dart
Học Flutter - phần 1: Tạo ứng dụng đầu tiên Hello World
1. Set-up môi trường. Đầu tiên chúng ta phải tạo môi trường để code Flutter, có 2 editor mà được mọi người sử dụng phổ biến đó là Visual Studio Code và Android Studio . Về bản thân mình thì xuất thân>
https://viblo.asia/p/hoc-flutter-phan-1-tao-ung-dung-dau-tien-hello-world-RnB5pMADKPG
5 Lý Do Developer Muốn Học Flutter - NordicCoder
5 Lý Do Developer Muốn Học Flutter. 31/07/2020. Google đã giới thiệu Flutter đến các Developer vào sự kiện I/O 2017. Đây là một Open Source mới cho việc tạo ra các ứng dụng Mobile.>
https://nordiccoder.com/blog/5-ly-do-hoc-flutter
Khóa học lập trình FLUTTER
NỘI DUNG KHÓA HỌC LẬP TRÌNH FLUTTER Chương 1: Ngôn ngữ Dart - Cài đặt môi trường - Kiểu dữ liệu cơ bản - Câu điều kiện - Mảng và object - Hướng đối tượng - Xử lý lỗi với try catch Chương 2: Lập trình>
https://khoapham.vn/khoa-hoc-lap-trinh-flutter.html
Flutter căn bản - Bài 1: Giới thiệu tổng quan khóa học - YouTube
Flutter căn bản - Bài 1: Giới thiệu tổng quan khóa học - YouTube 0:00 / 3:43 Flutter căn bản - Bài 1: Giới thiệu tổng quan khóa học 52,654 views Mar 26, 2019 Giới thiệu tổng quan...>
https://www.youtube.com/watch?v=WL3g5DHJ4pA
Flutter - Build apps for any screen
Flutter is an open source framework by Google for building beautiful, natively compiled, multi-platform applications from a single codebase. Fast; Productive; Flexible; Fast. Flutter code compiles to>
https://flutter.dev
Tự học Flutter | Giới thiệu chi tiết về Flutter và Series tự học Miễn ...
Mar 17, 2021Series tự học về Flutter của Cafedev cung cấp các khái niệm cơ bản và nâng cao về framework Flutter. Flutter là một bộ công cụ giao diện người dùng để xây dựng các ứng dụng nhanh, đẹp, đượ>
https://cafedev.vn/tu-hoc-flutter-gioi-thieu-chi-tiet-ve-flutter-va-series-tu-hoc-mien-phi
Cùng học Flutter - Dart OOP cho người mới bắt đầu - YouTube
Cùng học Flutter - Dart OOP cho người mới bắt đầu 39,493 views Jun 12, 2019 200 Dislike Share Save Code4Func - Kỹ thuật lập trình 6.07K subscribers Video này mình cung cấp một số kiến thức cơ bản...>
https://www.youtube.com/watch?v=zuuBWUZEVLk
Học Flutter kiểu mới (newbie không nên bỏ qua) | ???? Live Coding - Part 1
Thay vì học kiến thức lập trình Flutter căn bản một cách khô khan, trong series này mình sẽ giúp các bạn newbie học được nhiều kinh nghiệm thực tế hơn ...>
https://www.youtube.com/watch?v=NF_EMQrVVPE
Flutter căn bản - Freetuts
Chia sẻ kiến thức Flutter căn bản nằm trong chuyên mục Flutter, mọi thắc mắc về Flutter căn bản liên hệ admin để được hướng dẫn. ... > Flutter là gì? Lộ trình tự học Flutter từ căn bản đến nâng cao >>
https://freetuts.net/flutter/flutter-can-ban
Khoá lập trình Flutter cơ bản - Trung tâm CodeFresher - Đào tạo lập ...
- ngoài các kiến thức cơ bản, học viên được thường xuyên thực hành xây dựng ứng dụng flutter thực tế (app chat / xem phim / tiktok clone) trong quá trình học và được giảng viên hướng dẫn nâng cao kĩ n>
https://codefresher.vn/khoa-lap-trinh-flutter-co-ban
Tự học Flutter | Các câu hỏi phỏng vấn Flutter phần 1
May 3, 2021Flutter Interview Questions. CHỌN LỌC TOP NHỮNG KHOÁ HỌC LẬP TRÌNH ONLINE NHIỀU NGƯỜI THEO HOC TẠI ĐÂY. Sau đây cafedev sẽ tổng hợp và chọn lọc các câu hỏi hay về Flutter, Có những câu hỏi>
https://cafedev.vn/tu-hoc-flutter-cac-cau-hoi-phong-van-flutter-phan-1
01-Cài đặt Flutter trên Windows 10 và MacOS Catalina 10.15
Cài đặt Flutter trên Window, MacOS Flutter là mobile UI framework của Google để tạo ra các giao diện chất lượng cao trên iOS và Android.Với Flutter, bạn có thể xây dựng một ứng dụng đẹp, tính...>
https://www.youtube.com/watch?v=GkuKMSnERPE
Flutter Tutorial 2021 for Beginners: Giới thiệu về series
Aug 6, 2021Dành cho các bạn muốn tìm hiểu và thử sức với Flutter. Dành cho bạn nào muốn nắm vững các kiến thức cơ bản về Flutter để học những khóa nâng cao hơn. Những bạn nào không có kiến thức về Nat>
https://200lab.io/blog/flutter-tutorial-intro-english-app
Các hướng dẫn lập trình Flutter | openplanning.net
1. Tuyển dụng lập trình viên Flutter. Các hướng dẫn lập trình Dart. 3. Cài đặt Flutter SDK trên Windows. 4. Cài đặt Flutter Plugin cho Android Studio. 5. Tạo ứng dụng Flutter đầu tiên của bạn - Hello>
https://openplanning.net/12815/flutter
Học Lập trình Flutter - Dart cho người mới bắt đầu
Giới thiệu khóa học Học Lập trình Flutter - Dart cho người mới bắt đầu của Code4Func, cung cấp một số kiến thức cơ bản nhất về Dart khi tiếp cận Flutter. Dart là một ngôn ngữ lập trình hướng đối tượng>
https://laptrinhchuyennghiep.com/post/hoc-lap-trinh-flutter-dart-cho-nguoi-moi-bat-dau-p28.html
