Hello world, my name is Flutter

Xin chào mọi, đây là bài đầu tiên của năm mới 2019. Năm mới nên mình sẽ viết về công nghệ mới nhé. Hôm nay mình xin giới thiệu đến các bạn một platform cũng "khá mới" để xây dựng ứng dụng di động, đó là Flutter.

Trong bài viết này mình sẽ giới thiệu với các bạn những điều cơ bản nhất về Flutter, và xây dựng Hello World Application bằng Flutter. Bài viết sẽ gồm các mục như sau:

Flutter là gì?
What are the advantages of Flutter? Why we should use it?
Short brief about Dart Programming Language
Setup môi trường để lập trình Flutter
Hello World Application in Flutter

OK, Let's do this!

1. What is Flutter?

Flutter là một platform được xây dựng bởi Google vào năm 2018. Nó là một nền tảng crossplatform mới nhưng cũng đầy hứa hẹn, cho phép chúng ta có thể xây dựng ứng dụng iOS và Android trên cùng 1 codebase.
Flutter dù mới ra đời nhưng lại được các ông lớn công nghệ sử dụng vì nó có sự đơn giản so với lập trình Web nhưng lại có tốc độ sánh được với các native application viết bằng Swift hay Java/ Kotlin.

2. What are the advantages of Flutter? Why we should use it?

Vậy câu hỏi đặt ra là Flutter có những ưu điểm gì để chúng ta - các lập trình viên nên sử dụng nó.

Không như các mobile platform phổ biển hiện nay như React Native của Facebook, Flutter không được viết bằng Javascript mà được viết bằng Dart - một ngôn ngữ lập trình cũng được phát triển bới Google. Code của Flutter được compile trực tiếp thành binary code nên ứng dụng có viết bằng Flutter có thể chạy với performance tương đương với Native app được viết bằng Swift hay Java/Kotlin.
Flutter không sử dụng các Native UI component, thay vào đó các component như Text, Button, Media ... được render bởi Graphic Engine của Flutter.
Lấy cảm ứng từ React, Flutter sử dụng hướng tiếp cận declarative để xây dựng các UI widget (widget ứng với component trong thế giới của React). Tương tự như Virtual DOM của React, các widget cũng chỉ được render khi cần thiết thường là khi state của widget thay đổi.
Flutter được tích hợp tính năng hot-reload (một tính năng có trên web programming nhưng lại thiếu khi lập trình app di động). Điều này cho phép Flutter có thể rebuild lại widget tree một cách tự động, khi đó ta có thể nhanh chóng thấy được sự thay đổi khi phát triển ứng dụng.

Trong phần tiếp theo chúng ta sẽ tìm hiểu căn bản về Dart programming language để có thể hiểu rõ hơn việc viết một ứng dụng bằng Flutter sẽ như thế nào?

3. Short brief about Dart Programming Language

Dart là một ngôn ngữ lập trình mã nguồn mở được Google phát triển. Nó là ngôn ngữ mới, có thể được dùng ở cả server và browser.
Là ngôn ngữ lập trình hướng đối tượng với cú pháp gần giống với C (C-style syntax), Dart hỗ trợ các khái niệm như Interface, Class, Collection, Generic...
Một số đặc điểm có thể kể đến của Dart như sau:

Hỗ trợ dynamic type system
Đơn kế thừa với class
Đa kế thừa với interface

Đặc biệt, chúng ta có thể chạy code Dart online thông qua DartPad hoặc cũng có thể cài đặt môi trường ở local machine để phát triển ứng dụng Dart

Giao diện của DartPad

Trong phần tiếp theo chúng ta sẽ setup môi trường để có thể xây dựng một ứng dụng với Flutter (và tất nhiên viết bằng Dart)

4. Setup môi trường để lập trình Flutter

4.1. Install Flutter:

Các bạn vào đây để đọc hướng dẫn cài đặt Flutter. Bạn sẽ tải về bản cài đặt Flutter ứng với hệ điều hành đang dùng, ở đây mình sẽ tải về phiên bản dành cho MacOS

Install Flutter

Tại đây bạn sẽ tải về bản cài và thực hiện theo hướng dẫn rất cụ thể

Sau khi cài đặt xong, kiểm tra bằng cách gõ lệnh sau trong terminal

 flutter -v

Và kết quả thu được như sau:

flutter -v

4.2. Setup Editor

Sau khi cài đặt thành công chúng ta sẽ bắt đầu cài đặt các plugin cần thiết cho editor để code Flutter. Tại trang tài liệu của Flutter có hướng dẫn setup cho 2 Editor là Android Studio và VS Code. Ở đây mình sẽ sử dụng Android Studio.

Bước 1: Mở Android Studio, Mở Plugin Preferences (Preferences > Plugins)

Preference > Plugins

Chọn Browse Repositories ...., sau đó trên khung tìm kiếm gõ Flutter và cài đặt

Install Flutter plugin

Sẽ xuất hiện bảng yêu cầu cài Dart plugin, chọn Yes để tiến hành cài đặt. Sau khi cài đặt xong chọn Restart Android Studio để hoàn thành

Sau khi mở lại Android studio ta có thể thấy dòng "Start a new Flutter Project"

Sau khi môi trường đã được cài đặt xong, chúng ta sẽ chuyển qua bước cuối cùng là xây dựng HelloWorld App bằng Flutter.

5. Hello World Application in Flutter

5.1. Khởi tạo project

Mở Android Studio, chọn File > New Flutter Project.
Chọn Flutter Application, sau đó Next

Đặt tên cho Project, setup SDK path, root folder path, sau đó chọn Next

Đặt tên Company Domain, sau đó chọn Finish để hoàn tất.

5.2. Coding

Trong file main.dart, thêm đoạn code sau:

1:  import 'package:flutter/material.dart';  
2:  void main() => runApp(MyApp());  
3:  class MyApp extends StatelessWidget {  
4:   @override  
5:   Widget build(BuildContext context) {  
6:    return MaterialApp(  
7:     title: 'Welcome to Flutter',  
8:     home: Scaffold(  
9:      appBar: AppBar(  
10:       title: Text('Welcome to Flutter'),  
11:      ),  
12:      body: Center(  
13:       child: Text('Hello World'),  
14:      ),  
15:     ),  
16:    );  
17:   }  
18:  }

5.3. Running

Sau khi code xong, bạn chọn thiết bị để chạy app sau đó chọn run (hình tam giác màu xanh lá như hình).

Build on Simulator

Đợi quá trình build thực hiện xong, bạn sẽ thấy kết quả là dòng Hello World trên Simulator

Hello world in Flutter

5.4. Hot reload

Bây giờ chúng ta sẽ thử tính năng hot reload của Flutter. Trong đoạn code trên ở dòng 13, bạn thay string "Hello World" thành "Hello Julian" chẳng hạn. Sau đó Save lại (Cmd + S). Ngay lập tức Simulator sẽ hiển thị dòng "Hello Julian" trên màn hình.

Hot reload

Vậy là chúng ta đã hoàn thành một ứng dụng Hello World vô cùng đơn giản với Flutter.

Kết

Hi vọng qua bài viết này, bạn đã có thể cài đặt và viết được một ứng dụng di động đơn giản bằng Flutter, làm tiền đề cho quá trình học và tìm hiểu về Flutter cũng như Dart của các bạn sau này. Ở các bài viết tiếp theo mình sẽ xây dựng ứng dụng phức tạp hơn bằng Flutter (ví dụ Todo List chẳng hạn) để có thể giới thiệu với các bạn các thành phần khác của Flutter.

Nếu các bạn thấy bài viết này hay, hữu ích, có thể share để mọi người cùng biết. Xin cảm ơn!

Ps: Bạn có thể để lại email ở phía cuối bài viết để có thể nhận được những thông báo khi có bài viết mới nhất nhé!

Subscribe here

Julian Dong