Viết ứng dụng Android với Flutter và Dart

30 April 2020 Ronan-Pham Flutter
Final product image
What You'll Be Creating

Nếu bạn đang tìm kiếm các phương pháp thay thế để phát triển ứng dụng Android, bạn nên cân nhắc thử Flutter của Google, một framework dựa trên ngôn ngữ lập trình Dart.

Các ứng dụng được xây dựng với Flutter hầu như không thể phân biệt với những ứng dụng được xây dựng bằng cách sử dụng Android SDK, cả về giao diện và hiệu suất. Hơn nữa, với những tinh chỉnh nhỏ, chúng có thể chạy trên thiết bị iOS.

Trong hướng dẫn này, tôi sẽ giới thiệu đến bạn các khái niệm cơ bản của Flutter bằng cách chỉ cho bạn cách làm thế nào để xây dựng một ứng dụng tính tiền bo đơn giản cho Android.

Các yêu cầu

Để có thể thực hiện theo hướng dẫn này, bạn sẽ cần:

  • phiên bản mới nhất của IntelliJ IDEA
  • Studio Android 2.2 hoặc cao hơn
  • một thiết bị hoặc emulator chạy Android 4.4 hoặc cao hơn
  • máy tính chạy Mac hoặc Linux

1. Tại sao sử dụng Flutter?

Chạy ở 60 fps, giao diện người dùng được tạo ra với Flutter thực thi tốt hơn nhiều so với những ứng dụng được tạo ra với các framework phát triển đa nền tảng khác chẳng hạn như React Native và Ionic. Nếu điều đó không kích thích bạn, thì đây là một vài lý do khác tại sao bạn có thể muốn sử dụng Flutter:

  1. Flutter sử dụng Dart, một ngôn ngữ nhanh, hướng đối tượng với nhiều tính năng hữu ích như mixin, generic, isolate, và static type.
  2. Flutter có các thành phần UI của riêng nó, cùng với một cơ chế để kết xuất chúng trên nền tảng Android và iOS. Hầu hết các thành phần giao diện người dùng, đều sẵn dùng, phù hợp với các nguyên tắc của Material Design.
  3. Các ứng dụng Flutter có thể được phát triển bằng cách sử dụng IntelliJ IDEA, một IDE rất giống với Android Studio.
Advertisement

2. Cài đặt Flutter

Bạn có thể có được phiên bản mới nhất của Flutter bằng cách nhân bản kho lưu trữ của nó trên GitHub.

1
git clone https://github.com/flutter/flutter.git

Flutter có một số phụ thuộc, chẳng hạn như Dart SDK và các phông chữ Material Design. May mắn thay, lần đầu tiên bạn chạy công cụ chẩn đoán của Flutter, tất cả chúng đều được cài đặt tự động.

1
2
cd flutter/bin
./flutter doctor
Logs of Flutters diagnostic tool

Để có thể xây dựng các ứng dụng Android, bạn cũng phải trỏ Flutter đến thư mục nơi bạn cài đặt Android Studio.

1
./flutter config --android-studio-dir ~/android-studio

3. Cấu hình IntelliJ IDEA

Mặc dù bạn có thể trực tiếp sử dụng CLI của Flutter để tạo và chạy các ứng dụng mới, nhưng bạn sẽ có một trải nghiệm phát triển tốt hơn nếu bạn sử dụng một IDE. IDE được khuyến khích cho Flutter là IntelliJ IDEA.

Tuy nhiên, trước khi bạn bắt đầu phát triển các ứng dụng Flutter với nó, bạn phải cài đặt các plugin cho Dart và Flutter. Để làm như vậy, hãy bắt đầu bằng cách chọn Configure > Plugins trong màn hình chào mừng của IntelliJ.

The Configure menu

Trong hộp thoại bật lên, hãy bấm nút Browse repositories... và tìm kiếm plugin Dart. Một khi bạn tìm thấy nó, hãy bấm nút Install để cài đặt nó.

Dart plugin dialog

Tương tự như vậy, tìm kiếm và cài đặt plugin Flutter.

Flutter plugin dialog

Một khi cả hai plugin được cài đặt, hãy khởi động lại IntelliJ IDEA.

Bây giờ, bạn phải trỏ plugin Flutter đến thư mục mà bạn đã cài đặt Flutter. Để làm như vậy, hãy chọn Configure > Settings trong màn hình chào mừng và trong hộp thoại bật lên, điều hướng đến Languages & Frameworks > Flutter. Trong trường Flutter SDK path, gõ đường dẫn tuyệt đối của thư mục.

Flutter plugin configuration dialog

Nhấn OK để hoàn tất cấu hình.

4. Tạo một dự án mới

Để tạo ra một dự án Flutter mới, bấm nút Create New Project ở màn hình chào mừng. Trong hộp thoại New Project, chọn Flutter và nhấn Next.

Bây giờ, bạn có thể cung cấp một cái tên có ý nghĩa cho dự án của bạn và nhấn Finish.

New project dialog

Một khi dự án đã được tạo ra, tôi đề nghị bạn nhấn nút Run để đảm bảo rằng Dart SDK, các plugin và framework Flutter tất cả được cấu hình một cách chính xác. Nếu mọi thứ đều ổn, sau một vài giây, bạn sẽ thấy màn hình sau đây trên thiết bị hoặc emulator:

Flutter demo app

Lưu ý rằng, từ thời điểm này về sau, bạn không cần phải bấm lại nút Run ngay cả sau khi thực hiện thay đổi code. Flutter hỗ trợ hot reload (tải lại nóng), một tính năng cho phép bạn ngay lập tức đẩy các bản cập nhật cho ứng dụng mà không cần khởi động lại nó.

Hot Reload App button

5. Tạo các Thành phần giao diện

Trong hướng dẫn này, chúng ta sẽ tạo ra một ứng dụng tính tiền bo với các thành phần sau:

  • một TextField để chấp nhận một hóa đơn
  • một TextField để chấp nhận một tỷ lệ phần trăm tiền bo
  • một RaisedButton mà người dùng có thể bấm để tính toán tiền bo

Mỗi thành phần của Flutter có thể là một StatelessWidget hoặc một StatefulWidget. Như tên gọi của nó, một StatefulWidget có một đối tượng State liên kết với nó, cho phép nó không chỉ lưu trữ dữ liệu, mà còn để phản ứng với những thay đổi trong dữ liệu.

Một StatelessWidget, mặt khác, là một đối tượng đơn giản, không được thiết kế để lưu trữ cố định bất kỳ dữ liệu nào. Để hướng dẫn này được ngắn gọn, chúng ta sẽ tạo ra ứng dụng tính tiền bo như là một StatelessWidget. Do đó, mở main.dart, loại bỏ tất cả các nội dung của nó, và thêm code sau đây:

1
2
3
4
5
import 'package:flutter/material.dart';
 
class TipCalculator extends StatelessWidget {
 
}

Trong đoạn code ở trên, dòng import là quan trọng bởi vì material.dart là thư viện có chứa tất cả các thành phần Material Design mà chúng ta sẽ sử dụng trong ứng dụng này.

Để lưu trữ hóa đơn và phần trăm tiền bo, thêm hai biến thành viên vào lớp.

1
2
double billAmount = 0.0;
double tipPercentage = 0.0;

Để bắt đầu tạo ra giao diện người dùng của ứng dụng, hãy override phương thức build().

1
2
3
4
@override
Widget build(BuildContext context) {
    // More code goes here
}

Hãy để chúng tôi tạo ra hai thành phần TextField. Trong lúc làm như vậy, chúng ta có thể chỉ rõ các chi tiết chẳng hạn như nhãn mà chúng ta muốn kết hợp với các thành phần và kiểu của bàn phím ảo được hiển thị khi chúng ở trong trạng thái tập trung.

Bởi vì chúng ta không thể truy xuất trực tiếp nội dung của một thành phần TextField, nên chúng ta cũng phải kết hợp một trình xử lý sự kiện onChanged với nó. Bên trong trình xử lý, trong đó nhận được một đối tượng InputValue, chúng ta có thể cập nhật nội dung của các các biến thành viên của lớp.

Theo đó, thêm code sau đây bên trong phương thức build():

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// Create first input field
TextField billAmountField = new TextField(
  labelText: "Bill amount(\$)",
  keyboardType: TextInputType.number,
  onChanged: (InputValue value) {
    try {
      billAmount = double.parse(value.text);
    } catch (exception) {
      billAmount = 0.0;
    }
  }
);
 
// Create another input field
TextField tipPercentageField = new TextField(
  labelText: "Tip %",
  keyboardType: TextInputType.number,
  hintText: "15",
  onChanged: (InputValue value) {
    try {
      tipPercentage = double.parse(value.text);
    } catch (exception) {
      tipPercentage = 0.0;
    }
  }
);

Ngay cả khi bạn chưa bao giờ làm việc với Dart trước đây, thì đoạn code ở trên cũng khá trực quan, miễn là bạn quen với Java. Ví dụ, bạn có thể thấy rằng chúng ta đang sử dụng phương thức parse() để chuyển đổi mỗi nội dung văn bản của TextField thành một đối tượng double. Vì phương thức parse() có thể sinh ra một FormatException, nó cũng được bao quanh bởi một khối try...catch.

Tạo ra một thành phần RaisedButton giống như việc tạo ra một TextField. Tuy nhiên, để gán nhãn cho nó, bạn phải tạo ra một thành phần Text mới và thêm vào như là child (con) của nó.

1
2
3
4
5
6
7
// Create button
RaisedButton calculateButton = new RaisedButton(
    child: new Text("Calculate"),
    onPressed: () {
        // More code goes here
    }
);

Bên trong trình xử lý sự kiện onPressed của button, chúng ta sẽ tính toán tiền bo và tổng số tiền phải thanh toán, và hiển thị cả hai bên trong một hộp thoại. Để tạo hộp thoại, chúng ta có thể sử dụng lớp AlertDialog. Sau khi được tạo ra, hộp thoại có thể được hiển thị bằng cách truyền nó như là đối số vào phương thức showDialog().

Theo đó, thêm code sau đây vào trình xử lý sự kiện onPressed:

01
02
03
04
05
06
07
08
09
10
11
12
// Calculate tip and total
double calculatedTip = billAmount * tipPercentage / 100.0;
double total = billAmount + calculatedTip;
 
// Generate dialog
AlertDialog dialog = new AlertDialog(
content: new Text("Tip: \$$calculatedTip \n"
    "Total: \$$total")
);
 
// Show dialog
showDialog(context: context, child: dialog);

Trong đoạn code ở trên, lưu ý rằng chúng ta đã sử dụng tính năng nội suy chuỗi của Dart để nhúng các biến bên trong content (nội dung) của hộp thoại. Ngoài ra, bạn có thể thấy rằng chuỗi trong Dart có thể được nối chỉ bằng cách đặt chúng bên cạnh nhau—tuy vậy bạn cũng có thể sử dụng toán tử +, nếu bạn muốn.

6. Tập một Cây của các Thành phần

Một ứng dụng Flutter thường không có gì khác ngoài một cây của các thành phần. Nói cách khác, bạn tạo một ứng dụng Flutter chỉ bằng cách đơn giản là tạo ra nhiều thành phần và thiết lập mối quan hệ cha-con giữa chúng.

Hiện tại, không có mối quan hệ giữa các thành phần mà chúng ta đã tạo ra trong bước trước. Như bạn có thể thấy, tất cả chúng sẽ là anh chị em, vì vậy bây giờ hãy tạo ra một thành phần cha cho chúng.

Một thành phần có thể có nhiều con thường được gọi là một thành phần layout. Flutter cung cấp một số thành phần layout để bạn lựa chọn. Đối với ứng dụng của chúng ta, thành phần Column (Cột) là phù hợp nhất vì nó đặt tất cả các con của nó từng cái một lên trên nhau.

Ngoài ra, để phù hợp với đặc tả Material Design, chúng ta phải thêm một padding 16 dp vào thành phần Column. Chúng ta có thể làm như vậy bằng cách thành child (con) của một thành phần Container

1
2
3
4
5
6
7
8
Container container = new Container(
  padding: const EdgeInsets.all(16.0),
  child: new Column(
    children: [ billAmountField,
                tipPercentageField,
                calculateButton ]
  )
);

Giao diện người dùng Material Design không hoàn thiện mà không có một thanh ứng dụng. Vì vậy, hãy tạo một cái ngay bây giờ bằng cách sử dụng thành phần AppBar.

1
AppBar appBar = new AppBar(title: new Text("Tip Calculator"));

Các layout có chứa thanh ứng dụng và container là rất phổ biến và Flutter cung cấp một thành phần Scaffold để giúp bạn nhanh chóng thiết lập một mối quan hệ giữa chúng.

1
2
Scaffold scaffold = new Scaffold(appBar: appBar,
                                 body: container);

Với thành phần Scaffold tại gốc của nó, cây thành phần của chúng ta đã sẵn sàng. Bạn có thể sử dụng thành phần Scaffold như là giá trị trả về của phương thức build().

1
return scaffold;

Nếu bạn đang cảm thấy khó để hình dung cái cây, thì sơ đồ sau đây sẽ giúp bạn:

Diagram of the widget tree

7. Tạo một Khởi điểm

Tập tin Dart của chúng ta cần một hàm main() như là khởi điểm của nó. Bên trong nó, chúng ta phải gọi hàm runApp() để thật sự inflate và kết xuất cây thành phần mà chúng ta đã tạo trong bước trước.

Ngoài ra, thành phần TipCalculator của chúng ta phải được đặt bên trong một thành phần MaterialApp để một theme Material Design và bảng màu có thể được áp dụng cho nó. Vì vậy, hãy thêm code sau đây vào main.dart:

1
2
3
4
5
6
void main() {
  runApp(new MaterialApp(
    title: 'Tip Calculator',
    home: new TipCalculator()
  ));
}

Bây giờ, bạn có thể nhấn nút Hot Reload App (trực tiếp tải lại ứng dụng) để bắt đầu sử dụng ứng dụng trên thiết bị của bạn.

Tip calculator app

Tóm tắt

Trong hướng dẫn này, bạn đã biết cách để sử dụng Flutter và Dart, cùng với IntelliJ IDEA, để tạo ra một ứng dụng đơn giản cho Android.

Theo tôi, Flutter có hầu như tất cả mọi thứ mà một nhà phát triển tìm kiếm đối với một framework phát triển ứng dụng di động đa nền tảng. Tuy nhiên, trước khi bạn quyết định bắt đầu xây dựng ứng dụng tiếp theo của bạn với nó, lưu ý rằng nó vẫn còn là một framework rất mới và đang phát triển nhanh chóng.

Để tìm hiểu thêm về Flutter, bạn có thể tham khảo tài liệu chính thức của nó.

https://code.tutsplus.com/vi/tutorials/developing-an-android-app-with-flutter--cms-28270

Tags :

Add comment