Flutter là một framework phát triển ứng dụng đa nền tảng mạnh mẽ, và hôm nay chúng ta sẽ khám phá những điều cơ bản về Flutter để bắt đầu hành trình lập trình của bạn. Flutter không chỉ được áp dụng trong môi trường di động mà còn trên nhiều nền tảng khác nhau như Website, hệ thống nhúng và ứng dụng máy tính (Desktop). Điều đó có nghĩa là hiểu rõ về Flutter cơ bản là rất quan trọng và sau này sẽ làm cho bạn thành một chuyên gia Flutter đích thực.
Contents
Flutter cơ bản: Thiết lập môi trường
Trước khi bắt đầu học về Flutter, bạn cần đảm bảo rằng bạn đã cài đặt Visual Studio Code làm trình soạn thảo của mình. Tất nhiên, bạn có thể sử dụng bất kỳ trình soạn thảo nào mà bạn thích. Sau đó, hãy chắc chắn rằng Flutter SDK đã được cài đặt trên máy tính của bạn. Ngoài ra, bạn cần cài đặt Android Studio để chạy ứng dụng trên Emulator hoặc thiết bị Android của bạn. Nếu bạn đang sử dụng macOS, bạn có thể thiết lập XCode để chạy các ứng dụng Flutter của mình trên mô phỏng iOS hoặc các thiết bị iOS thực tế.
Ứng dụng Demo của chúng ta
Ở đây, chúng ta sẽ xây dựng một demo ứng dụng single page (ứng dụng chỉ có một màn hình duy nhất) để giúp bạn làm quen với Flutter và một số widget cơ bản của nó. Ứng dụng demo của chúng ta sẽ có giao diện như trong hình dưới:
Đây là một ứng dụng rất đơn giản nơi chúng ta có thể hiển thị một số Text trên App Bar và một Button. Khi nhấp vào button, màu nền của ứng dụng sẽ thay đổi.
Cách khởi tạo ứng dụng mới từ Flutter
Để khởi tạo một ứng dụng mới, hãy mở terminal/console và điều hướng đến thư mục bạn muốn tạo dự án Flutter mới. Sau đó, sử dụng lệnh sau:
flutter create tên_dự_án_của_bạn
Ngoài ra, bạn cũng có thể tạo một dự án Flutter mới từ Android Studio hoặc VS Code.
Cấu trúc thư mục dự án trong Flutter
Trước khi bắt đầu xây dựng ứng dụng đầu tiên, hãy xem qua cấu trúc thư mục của dự án Flutter.
-
android: Thư mục này chứa tất cả các file dự án cho ứng dụng Android. Bạn có thể thực hiện thay đổi, thêm các quyền cần thiết và mã nguồn Android native tại đây.
-
build: Thư mục này chứa tất cả các file đầu ra được biên dịch như app bundles, file APK và các file và thư mục khác liên quan.
-
ios: Trong thư mục này, tất cả code native cho ứng dụng iOS đều nằm ở đây. Tương tự như thư mục android, bạn có thể thêm các quyền cần thiết và mã nguồn iOS native tại đây.
-
lib: Thư mục lib là nơi mà tất cả các điều kỳ diệu xảy ra. Trong thư mục lib, bạn sẽ thấy file main.dart. Tất cả mã nguồn Dart của bạn được viết trong thư mục này sẽ được biên dịch thành mã nguồn native platform (Android và iOS) trong quá trình biên dịch.
-
test: Trong thư mục test, bạn có thể viết các unit test cho ứng dụng Flutter của mình.
-
.gitignore: File này được sử dụng để khai báo những file và thư mục bạn không muốn theo dõi và kiểm soát bằng GIT.
-
pubspec.lock và pubspec.yaml: Cả hai file này chứa toàn bộ thông tin về tên gói cần thiết, phiên bản của chúng, đường dẫn đến nội dung, các phụ thuộc (dependencies), tên ứng dụng, phiên bản của ứng dụng và các phần liên quan đến các phụ thuộc của ứng dụng.
-
README.md: Đây là một file markdown chứa tất cả thông tin cơ bản và mô tả về ứng dụng.
Chạy ứng dụng Flutter trên trình giả lập hoặc thiết bị thực
Để chạy ứng dụng của bạn, hãy mở một trình giả lập Android hoặc một trình mô phỏng iOS hiện có. Tiếp theo, mở thư mục lib và file main.dart trong trình soạn thảo của bạn, và nhấn F5 để chạy ứng dụng của bạn. Nếu bạn đã cài đặt tiện ích mở rộng Flutter và Dart trong VS Code, bạn cũng có thể chọn “Run” hoặc “Debug” trực tiếp từ file main.dart. Khi bạn chạy ứng dụng, bạn sẽ thấy một ứng dụng Flutter cơ bản được tạo tự động. File main.dart là điểm vào của ứng dụng Flutter của bạn, và việc thực thi bất kỳ ứng dụng Flutter nào cũng bắt đầu từ hàm void main() {...}
. Bây giờ, hãy xóa mọi thứ và bắt đầu lại với ứng dụng của chúng ta từ đầu.
Học Flutter cơ bản: Hướng dẫn xây dựng ứng dụng
Cuối cùng, chúng ta sẽ xây dựng một ứng dụng Flutter cơ bản bằng cách làm theo hướng dẫn dưới đây!
-
Import các packages cần thiết:
import 'package:flutter/material.dart';
-
Tạo một widget trong Flutter:
Mọi thứ trong Flutter đều là widget, vì vậy chúng ta sẽ xây dựng các widget của riêng mình. Ở đây, chúng ta sẽ tạo một widget Stateless với tên MyApp:class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return Container(); } }
-
Hàm main:
void main() { runApp(MyApp()); }
-
Tạo một StatefulWidget:
Chúng ta sẽ tạo một StatefulWidget với tên DummyWidget để hiển thị một nút và thay đổi màu nền khi nhấp vào nút.class DummyWidget extends StatefulWidget { @override _DummyWidgetState createState() => _DummyWidgetState(); }
class _DummyWidgetState extends State {
bool _isGreen = false;
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: _isGreen ? Colors.green : Colors.red,
appBar: AppBar(
title: Text(‘Your First App’),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
FlatButton(
onPressed: () {
setState(() {
_isGreen = !_isGreen;
});
},
child: Text(_isGreen ? ‘TURN RED’ : ‘TURN GREEN’),
),
],
),
),
);
}
}
5. Trả về StatefulWidget trong MyApp:
Thay vì trả về một Container trống, chúng ta sẽ trả về DummyWidget của chúng ta:
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: ‘First App Demo’,
theme: ThemeData(
primarySwatch: Colors.amber,
),
home: DummyWidget(),
);
}
}
Cuối cùng, khi bạn chạy ứng dụng, bạn sẽ thấy widget tùy chỉnh của mình trên màn hình. Bạn đã hoàn thành ứng dụng đầu tiên của mình với Flutter! Hy vọng bạn sẽ có một trải nghiệm tuyệt vời khi làm việc với Flutter.
*Đọc thêm về các Flutter Widgets trong bài viết dưới đây:*
[Flutter Widgets - Tất cả những gì bạn cần biết](https://laptrinhc.edu.vn/flutter-widgets-tat-ca-nhung-gi-ban-can-biet)
Kết:
Flutter là một công nghệ tuyệt vời để phát triển ứng dụng đa nền tảng. Qua bài viết này, bạn đã có một cái nhìn tổng quan về Flutter cơ bản và đã tạo ứng dụng đầu tiên của mình. Hy vọng rằng bạn sẽ tiếp tục khám phá và phát triển các ứng dụng phong phú và sáng tạo bằng Flutter.