Danh mục: Tin tức
Bài viết gần đây
-
-
Bài 2: Làm chủ dữ liệu OHLCV và Sức mạnh của Pandas trong Trading
Tháng 5 12, 2026
| 🚀 Cơ bản về Flutter & Dart
Được viết bởi thanhdt vào ngày 13/11/2025 lúc 06:11 | 95 lượt xem
🚀 Cơ bản về Flutter & Dart
📊 Phân tích danh mục đầu tư
🚀 Cơ bản về Flutter & Dart
Làm quen với ngôn ngữ Dart dành cho lập trình Flutter
Mục lục
- Giới thiệu
- Ngôn ngữ Dart – Nền tảng của Flutter
- Cấu trúc cơ bản trong Dart
- Flutter Widgets – Xây dựng UI
- Xây dựng ứng dụng đầu tiên
- Các tips và thực hành tốt nhất
- Kết luận
Giới thiệu
Flutter là framework phát triển ứng dụng di động đa nền tảng do Google phát triển, cho phép lập trình viên tạo ra các ứng dụng đẹp, nhanh và hoạt động trên nhiều nền tảng (iOS, Android, Web, Desktop) từ cùng một codebase. Trung tâm của Flutter là ngôn ngữ lập trình Dart, cũng được phát triển bởi Google.
Bài viết này sẽ giới thiệu cơ bản về Dart và Flutter, giúp bạn có cái nhìn tổng quan về cách phát triển ứng dụng với công nghệ hiện đại này.
Ngôn ngữ Dart – Nền tảng của Flutter
Dart là một ngôn ngữ lập trình hướng đối tượng được phát triển bởi Google. Nó được thiết kế để dễ học, đặc biệt là đối với các lập trình viên đã quen thuộc với C#, Java hoặc JavaScript.
Những đặc điểm chính của Dart:
-
Strongly typed: Dart là ngôn ngữ được định kiểu mạnh, giúp phát hiện lỗi sớm trong quá trình phát triển.
-
Null safety: Từ Dart 2.12, ngôn ngữ này hỗ trợ null safety, giúp tránh các lỗi liên quan đến null reference.
-
Async/await: Dart cung cấp cú pháp async/await để xử lý bất đồng bộ một cách dễ dàng.
-
JIT và AOT compilation: Dart hỗ trợ cả Just-In-Time (JIT) để phát triển nhanh và Ahead-Of-Time (AOT) để triển khai hiệu quả.
Cú pháp cơ bản trong Dart:
// Biến và kiểu dữ liệu
String name = 'Flutter';
int age = 5;
double version = 3.10;
bool isAwesome = true;
var dynamicType = 'Tự động xác định kiểu';
// Danh sách và Collections
List<String> frameworks = ['Flutter', 'React Native', 'Xamarin'];
Map<String, String> languageCreators = {
'Dart': 'Google',
'Swift': 'Apple',
'Kotlin': 'JetBrains'
};
// Hàm
int add(int a, int b) {
return a + b;
}
// Arrow function (Lambda)
int subtract(int a, int b) => a - b;
// Lớp và đối tượng
class Person {
String name;
int age;
// Constructor
Person(this.name, this.age);
// Method
void introduce() {
print('Xin chào, tôi là $name và tôi $age tuổi.');
}
}
// Sử dụng async/await
Future<void> fetchData() async {
try {
var result = await getDataFromServer();
print(result);
} catch (e) {
print('Lỗi: $e');
}
}Cấu trúc cơ bản trong Dart
1. Biến và kiểu dữ liệu
Dart có các kiểu dữ liệu cơ bản như:
int: Số nguyêndouble: Số thựcString: Chuỗibool: Boolean (true/false)List: Danh sáchSet: Tập hợpMap: Từ điển (key-value)
Khi khai báo biến, bạn có thể chỉ định kiểu rõ ràng hoặc sử dụng từ khóa var để Dart tự suy luận kiểu:
// Chỉ định kiểu rõ ràng
String name = 'Nguyen Van A';
// Tự suy luận kiểu
var age = 30; // age sẽ có kiểu intVới Null Safety, bạn cần sử dụng dấu ? để chỉ định rằng một biến có thể nhận giá trị null:
String? nullableName; // Có thể null
String nonNullableName = 'Flutter'; // Không thể null2. Hàm và phương thức
Cú pháp định nghĩa hàm trong Dart:
// Hàm cơ bản
int sum(int a, int b) {
return a + b;
}
// Arrow function
int multiply(int a, int b) => a * b;
// Tham số tùy chọn
void greet(String name, {String greeting = 'Xin chào'}) {
print('$greeting, $name!');
}
// Gọi hàm với tham số tùy chọn
greet('Flutter'); // Output: Xin chào, Flutter!
greet('Dart', greeting: 'Chào mừng'); // Output: Chào mừng, Dart!3. Lớp và đối tượng
Dart là ngôn ngữ hướng đối tượng, hỗ trợ đầy đủ các tính năng như kế thừa, đa hình, trừu tượng và đóng gói:
// Định nghĩa lớp
class Developer {
String name;
List<String> skills;
// Constructor
Developer(this.name, this.skills);
// Named constructor
Developer.junior(String name) : this(name, ['Dart', 'Flutter']);
// Method
void introduce() {
print('Tôi là $name và tôi biết: ${skills.join(', ')}');
}
}
// Kế thừa
class SeniorDeveloper extends Developer {
int experienceYears;
SeniorDeveloper(String name, List<String> skills, this.experienceYears)
: super(name, skills);
// Ghi đè phương thức
@override
void introduce() {
print('Senior Dev $name với $experienceYears năm kinh nghiệm.');
print('Kỹ năng: ${skills.join(', ')}');
}
}
// Sử dụng
var dev = Developer('An', ['Flutter', 'Firebase']);
dev.introduce();
var senior = SeniorDeveloper('Binh', ['Flutter', 'Dart', 'Firebase', 'AWS'], 5);
senior.introduce();Flutter Widgets – Xây dựng UI
Flutter sử dụng một paradigm gọi là “Everything is a Widget”. Tất cả UI trong Flutter được xây dựng bằng cách kết hợp các widget lại với nhau.
Các loại widget chính:
- Stateless Widgets: Widgets không có trạng thái, không thay đổi sau khi được xây dựng.
class WelcomeCard extends StatelessWidget {
final String name;
const WelcomeCard({Key? key, required this.name}) : super(key: key);
@override
Widget build(BuildContext context) {
return Card(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Text('Chào mừng, $name!'),
),
);
}
}- Stateful Widgets: Widgets có trạng thái nội bộ, có thể thay đổi trong vòng đời của widget.
class Counter extends StatefulWidget {
const Counter({Key? key}) : super(key: key);
@override
_CounterState createState() => _CounterState();
}
class _CounterState extends State<Counter> {
int _count = 0;
void _increment() {
setState(() {
_count++;
});
}
@override
Widget build(BuildContext context) {
return Column(
children: [
Text('Số lần nhấn: $_count'),
ElevatedButton(
onPressed: _increment,
child: Text('Tăng'),
),
],
);
}
}Các widget thông dụng:
- Container: Widget đa năng cho phép tùy chỉnh kích thước, padding, margin và trang trí.
- Row, Column: Sắp xếp các widget con theo chiều ngang hoặc dọc.
- Stack: Xếp chồng các widget lên nhau.
- ListView: Hiển thị danh sách các widget có thể cuộn.
- GridView: Hiển thị lưới các widget.
- Text: Hiển thị văn bản có thể tùy chỉnh.
- Image: Hiển thị hình ảnh.
- Button: Các loại nút như ElevatedButton, TextButton, OutlinedButton.
Ví dụ về bố cục UI:
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Ứng dụng Flutter'),
),
body: Column(
children: [
// Header section
Container(
color: Colors.blue[100],
padding: EdgeInsets.all(16.0),
child: Row(
children: [
CircleAvatar(
radius: 30,
backgroundImage: AssetImage('assets/avatar.png'),
),
SizedBox(width: 16),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Nguyen Van A',
style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
),
Text('Flutter Developer'),
],
),
],
),
),
// Content section
Expanded(
child: ListView.builder(
itemCount: 20,
itemBuilder: (context, index) {
return ListTile(
leading: Icon(Icons.article),
title: Text('Bài viết ${index + 1}'),
subtitle: Text('Mô tả ngắn về bài viết'),
onTap: () {
// Xử lý khi nhấn vào item
},
);
},
),
),
],
),
floatingActionButton: FloatingActionButton(
onPressed: () {
// Xử lý khi nhấn nút
},
child: Icon(Icons.add),
),
);
}Xây dựng ứng dụng đầu tiên
Để tạo một ứng dụng Flutter đơn giản, hãy thực hiện các bước sau:
1. Cài đặt Flutter SDK
# Tải và cài đặt Flutter SDK từ https://flutter.dev/docs/get-started/install
# Sau khi cài đặt, kiểm tra cài đặt
flutter doctor2. Tạo dự án mới
flutter create my_first_app
cd my_first_app3. Cấu trúc dự án Flutter
my_first_app/
├── android/ # Mã nguồn Android
├── ios/ # Mã nguồn iOS
├── lib/ # Mã nguồn Dart
│ └── main.dart # File chính của ứng dụng
├── test/ # Thư mục kiểm thử
├── pubspec.yaml # Khai báo dependencies
└── README.md4. File main.dart cơ bản
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Ứng dụng đầu tiên',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Trang chủ Flutter'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Bạn đã nhấn nút:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Tăng',
child: Icon(Icons.add),
),
);
}
}5. Chạy ứng dụng
flutter runCác tips và thực hành tốt nhất
-
State Management: Sử dụng các giải pháp quản lý trạng thái như Provider, Riverpod, Bloc, GetX để quản lý trạng thái ứng dụng một cách hiệu quả.
-
Cấu trúc dự án: Tổ chức mã nguồn theo các lớp logic như:
lib/models/: Các model dữ liệulib/screens/: Các màn hình UIlib/widgets/: Các widget tái sử dụnglib/services/: Các dịch vụ (API, database, authentication)lib/utils/: Các hàm tiện ích
-
Tách biệt UI và Logic: Sử dụng các mẫu thiết kế như MVVM, Repository để tách biệt UI và business logic.
-
Responsive UI: Sử dụng MediaQuery, LayoutBuilder để xây dựng UI thích ứng với nhiều kích thước màn hình.
-
Code style: Tuân thủ quy tắc đặt tên và cấu trúc mã nguồn của Dart.
// Sử dụng camelCase cho biến và hàm
String userName;
void fetchUserData() { ... }
// Sử dụng PascalCase cho lớp
class UserRepository { ... }
// Sử dụng lowerCamelCase cho tham số hàm
void updateUser({required String firstName, String? lastName}) { ... }- Optimization: Sử dụng
constconstructor khi có thể để tối ưu hiệu suất rebuild.
// Thay vì
Container(
color: Colors.blue,
child: Text('Hello'),
)
// Sử dụng const
const Container(
color: Colors.blue,
child: Text('Hello'),
)Kết luận
Dart và Flutter cung cấp một cách tiếp cận hiện đại và hiệu quả để phát triển ứng dụng đa nền tảng. Với cú pháp rõ ràng của Dart và hệ thống widget mạnh mẽ của Flutter, bạn có thể tạo ra các ứng dụng đẹp, nhanh và có thể chạy trên nhiều nền tảng từ cùng một codebase.
Đây chỉ là những kiến thức cơ bản để bắt đầu với Flutter và Dart. Để trở thành một nhà phát triển Flutter chuyên nghiệp, bạn cần thực hành và khám phá thêm nhiều tính năng nâng cao như:
- Animation và Transitions
- Navigation và Routing
- Internationalization
- Testing
- Firebase integration
- Custom Widgets và Platform Channels
Hãy bắt đầu hành trình khám phá Flutter và Dart ngay hôm nay!