Trang chủ Lập trình Flutter Flutter | Bài 1: Hướng dẫn viết và chạy chương trình đầu...

Flutter | Bài 1: Hướng dẫn viết và chạy chương trình đầu tiên

109
0
Flutter & Bài 1: Build phát đầu tiên đã chạy
Flutter & Bài 1: Build phát đầu tiên đã chạy
Quảng cáo

Trong bài viết này, chúng ta sẽ bắt đầu học cách tạo ra một ứng dụng ban đầu cơ bản thôi bằng Android Studio để có thể hiểu được một ứng dụng Flutter sẽ code và chạy như thế nào nhé.

https://github.com/yennq/Flutter/tree/main/lession1

Chúng ta hãy bắt đầu bằng một ứng dụng đơn giản, cùng làm theo 10 bước sau đây:

Bước 1: Sau khi đã cài đặt ứng dụng Android Studio, các bạn hãy mở nó ra nào.

Bước 2: Tạo mới một ứng dụng Flutter. Để tạo mới các bạn làm như sau: File-> New->New Flutter Project. Một màn hình như sau sẽ hiển thị ra.

Tạo mới ứng dụng Flutter
Tạo mới ứng dụng Flutter

Bước 3: Trong các bước tiêp theo, bạn cần phải lựa chọn Flutter Application. Nhình hình dưới đây để chọn như sau: Flutter Application-> click Next.

Chọ tiếp Flutter Application
Chọ tiếp Flutter Application

Bước 4: Tiếp theo, cấu hình thông tin chi tiết ứng dụng của bạn như hình dưới đây, sao đó bầm vào nút Next nhé.

Project Name: Điền tên ứng dụng của bạn vô.

Flutter SDK Path: <path_to_flutter_sdk>

Project Location: <path_to_project_folder>

Descriptions: Một chút mô tả về ứng dụng của bạn

Nhập thông tin ứng dụng
Nhập thông tin ứng dụng

Bước 5: Trong bước cấu hình tiếp theo, bạn có thể nhập thông tin domain website công ty của bạn như hình dưới rồi bấm nút Finish nhé.

nhập thông tin domain website công ty của bạn
nhập thông tin domain website công ty của bạn

Sau khi bấm nút Finish, chúng ta ngồi chờ ứng dụng mới được tạo ra. Khi project mới được tạo ra, bạn sẽ nhìn thấy đầy đủ các tính năng để làm việc với ứng dụng.

Ứng dụng Flutter mới đã được tạo ra
Ứng dụng Flutter mới đã được tạo ra

Bước 6: Bây giờ bạn hãy kiểm tra xem cấu trúc của một dự án Flutter xem nó như thế nào nhé. Ở hình dưới đây, bạn có thể nhìn thấy cấu trúc cây thư mục, các component của ứng dụng Flutter sẽ như thế nào.

Tổ chức thư mục của một ứng dụng Flutter
Tổ chức thư mục của một ứng dụng Flutter

.idea: Thư mục này nằm trên cùng nhất của ứng dụng, nó chứa thông tin cấu hình cho Android Studio. Nó cũng không quan trọng trong việc viết ứng dụng của bạn đâu. Kệ xừ nó đi nhé.

.android: Thư mục này chứa dự án Android hoàn chỉnh và được sử dụng khi mà chúng ta build ứng dụng Flutter cho Android nhé. Khi chúng ta compie code của Flutter theo native code, nó sẽ tạo ra trong ứng dụng Android này một kết quả là một ứng dụng native Android. Ví dụ: Khi bạn đang sử dụng Android emulator, thì cái ứng dụng Android bạn đang viết ấy, nó sẽ tạo ra một cái app ngon lành, cái ứng dụng này được tạo bởi Android Vitrual Device.

.ios: Tương tự, thư mục này chứa dự án Mac hoàn chỉnh và được sử dụng khi bạn build ứng dụng Flutter cho iOS. Mã code khi được biên dịch ra kiểu native code. Nó sẽ tạo ra trong cái dự án iOS một kết quả native là một ứng dụng iOS. Muốn tao ra một dứng dụng Flutter cho iOS thì chỉ có thể làm việc trên máy Mac thôi nhé.

.lib: Thư mục này cực quan trọng, nó chứa các library. 99% là chúng ta sẽ làm việc trên thư mục này nhé các bạn. Thì bên trong thư mục này, bạn có thể tìm thấy các file Dart, mà Dart là ngôn ngữ để chúng ta xây dựng ứng dụng. Mặc định chúng ta sẽ có một file main.dart nhé, cái file này là của Flutter tự tạo ra.

.test: Thư mực này cũng chứa code Dart, nó có nhiệm vụ kiểm tra chất lượng, độ chịu tải của app một các tự động. Thư mục này cũng không phải là quá quan trọng nhé.

Chúng ta có thể có rất nhiều file mặc định trong một dự án Flutter. 99.99% là chúng ta bỏ mặc nó mà ko hề ngó ngàng gì tới. Những tệp đó như sau:

.gitignore: Nó là một tệp văn bản chứa danh sách các tệp, phần mở rộng tệp và thư mục cho Git biết tệp nào nên được bỏ qua trong một dự án. Git là một tệp kiểm soát phiên bản để theo dõi các thay đổi trong mã nguồn trong quá trình phát triển phần mềm Git.

.metadata: Nó là một tệp được tạo tự động bởi các công cụ Flutter, được sử dụng để theo dõi các thuộc tính của dự án Flutter. Tệp này thực hiện các tác vụ nội bộ, vì vậy bạn không cần phải chỉnh sửa nội dung theo cách thủ công bất cứ lúc nào.

.packages: Đây là một tệp được tạo tự động bởi Flutter SDK, được sử dụng để chứa danh sách các phụ thuộc cho dự án Flutter của bạn.

flutter_demoapp.iml: Nó luôn được đặt tên theo tên của dự án Flutter chứa các cài đặt bổ sung của dự án. Tệp này thực hiện các tác vụ nội bộ, được quản lý bởi Flutter SDK, vì vậy bạn không cần phải chỉnh sửa nội dung theo cách thủ công bất cứ lúc nào.

pubspec.yaml: Đó là tệp cấu hình của dự án sẽ sử dụng rất nhiều trong quá trình làm việc với dự án Flutter. Nó cho phép bạn cách ứng dụng của bạn hoạt động. Tệp này chứa:

  • Cài đặt chung của dự án như tên, mô tả và phiên bản của dự án.
  • Sự phụ thuộc của dự án.
  • Nội dung dự án (ví dụ: hình ảnh).

pubspec.lock: Nó là một tệp được tạo tự động dựa trên tệp .yaml. Nó có thiết lập chi tiết hơn về tất cả các phụ thuộc.

README.md: Nó là một tệp được tạo tự động chứa thông tin về dự án. Chúng tôi có thể chỉnh sửa tệp này nếu chúng tôi muốn chia sẻ thông tin với các nhà phát triển.

Bước 7: Làm việc với main.dart nhé, hãy thử thay đoạn code có sẵn bằng đoạn code dưới đây nhé các bạn.

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
   // This widget is the root of your application.
   @override
   Widget build(BuildContext context) {
      return MaterialApp(
         title: 'Hello World Demo Application',
         theme: ThemeData(
            primarySwatch: Colors.blue,
         ),
         home: MyHomePage(title: 'Home page'),
      );
   }
}
class MyHomePage extends StatelessWidget {
   MyHomePage({Key key, this.title}) : super(key: key);
   final String title;
 
   @override
   Widget build(BuildContext context) {
      return Scaffold(
         appBar: AppBar(
            title: Text(this.title),
         ),
         body: Center(
            child:
            Text(
               'Hello World',
            )
         ),
      );
   }
}

Bước 8: Hãy bắt đầu hiểu các dòng code trên nào.

  • Dòng 1 − import flutter package, tên là materialMaterial là một flutter package được sử dụng để tạo giao diện người dùng theo Material design cho Android.
  • Dòng 3 − là điểm khởi đầu của Flutter application là hàm main của ứng dụng. Phương thức runApp được gọi và truyền vào đối tượng của lớp MyApp. Mục đích chính của phương thức runApp là đưa giao diện widget vào hiển thị trên màn hình.
  • Dòng 5-17 − Widget được sử dụng để tạo UI (giao diện người dùng) qua flutter framework. StatelessWidget là một widget, nó không bao gồm trạng thái nào của widget. MyApp kế thừa StatelessWidget và ghi đè phương thức build method. Mục đích của phương thức build là tạo một phần UI cho ứng dụng. Ở đây, phương thức build sử dụng MaterialApp, một widget để tạo layout UI gốc cho ứng dụng. Bao gồm 3 thành phần chính là – title (tiêu đề), theme (chủ đề) và home (trang chủ hay phần màn hình).title là tiêu đề của ứng dụngtheme là chủ đề của widget. Ở đây, chúng ta set chủ đề là blue đó là màu sắc chủ đạo của ứng dụng thông qua class ThemeData và các thuộc tính của nó ví dụ primarySwatch.home phần màn hình của ứng dụng, nó được tạo bởi một widget khác, MyHomePage
  • Dòng 19 – 38 − MyHomePage tương tự MyApp ngoại trừ nó trả về Scaffold Widget. Scaffold là môt top level widget đứng sau MaterialApp widget được sử dụng để tạo UI theo material design. Nó có hai thuộc tính quan trọng nhất là appBar để hiển thị phần đầu của ứng dụng và body để hiển thị nôi dung chính của ứng dụng. AppBar là một widget khác để tạo phần đầu của ứng dụng và sử dụng các thuộc tính của appBar. Trong các thuộc tính của body, chúng ta sử dụng một Center widget, đây là một widget con. Text là một widget cuối cùng, phổ biến để hiển thị một văn bản giữa màn hình

Bước 9: Bây giờ thì bạn có thể chạy trương chình được rồi. Hình bên dưới đây hướng dẫn các bạn chạy file main.dart, bấm vô Run->Run main.dart.

Khởi chạy ứng dụng
Khởi chạy ứng dụng

Bước 10: Kết quả là chúng ta có dòng chữ “Hello Word” ra giữa mà hình.

Kết quả chạy thử Flutter
Kết quả chạy thử Flutter

https://github.com/yennq/Flutter/tree/main/lession1

Như vậy là các bạn đã theo dõi 10 bước để có thể viết một ứng dụng nho nhỏ hiển thị dòng chữ ra giữa màn hình bằng Flutter rồi nhé. Hãy thử thực hiện việc này và xem chạy nó, bạn sẽ thấy bất ngờ là làm mobile cũng đơn giản thôi.

Chúc các bạn thành công!

Quảng cáo