Trong bài viết này VTS xin hướng dẫn các bạn chi tiết viết ứng dụng chạy trên APP Mobile đầu tiên có tên gọi là “Hello Word”, Phía cuối bài viết chúng tôi sẽ giải thích chi tiết mục đích các câu lệnh tạo nên ứng dụng
Ứng dụng được viết trên Adroid Studio sử dụng Flutter và ngôn ngữ Dart
Mọi thứ trong Flutter đều là Widget, các Widget đã được định nghĩa sẵn và bạn chỉ cần sử dụng. Có 3 loại Widget trong Flutter
Trong ứng dụng này chúng tôi sẽ sử dụng Stateless Widget, Material App, Center và Text Widget
Stateless Widget trong Flutter là Widget không có phép thay đổi trạng thái của màn hình, nó có phương thức được gọi là build có nhiệm vụ hiển thị màn hình một lần duy nhất và không thay đổi dù bạn có thực hiện bất kỳ các function nào. Để vẽ lại màn hình thì bạn phải sử dụng Statefull Widget
MaterialApp là một widget được cung cấp sẵn bởi Flutter Team, MaterialApp là một lớp chứa một loạt các thành phần, nó được ví như ngôi nhà mà trong đó chứa các widget khác
Center Widget : Center cũng là một widget được cung cấp sẵn bởi Flutter Team, dùng để căn giữa màn hình và nó thường đi kèm với child
Center( child: Widget( ), ),
Text Widget là một widget dùng để hiển thị văn bản trên màn hình
Sau khi đã hiểu một số widget được sử dụng trong bài viết, bây giờ các bạn hãy bắt tay vào viết ứng dụng Flutter đầu tiên nhé
- Tạo một ứng dụng mới
Để tạo ứng dụng mới trước tiên bạn phải khởi động Adroid Studio
Vào menu File -> New -> New Fluter Project
Chọn Flutter -> Kích vào nút Next
Nhập tên dự án vào ô Project name , trong VD này bạn đặt tên dự án là Hello_World
Kích vào nút Finish để chúng ta hoàn thành bước tạo dự án mới
Viết đoạn lệnh cho ứng dụng
Mở file lib/main.dart
Xóa nội dung cũ trong file main.dart và sau đó copy code dưới đây vào thay thế
import 'package:flutter/material.dart'; void main() { runApp(const HelloWord()); } class HelloWord extends StatelessWidget { const HelloWord({Key? key}) : super(key: key); @override Widget build(BuildContext context) { // Material App return MaterialApp( // Scaffold Widget home: Scaffold( appBar: AppBar( // AppBar takes a Text Widget // in it's title parameter title: const Text('VTSOFT'), ), body: const Center(child: Text('Hello World')), )); } }
Chạy ứng dụng sẽ ra kết quả như sau :
Như vậy chúng ta đã hoàn thành viết APP đầu tiên, APP này còn khá đơn giải và chưa có các trang trí giao diện để cho đẹp hơn, trong các bài tiếp theo tôi sẽ hướng dẫn các bạn cách trang trí giao diện, bổ sung thêm các widget khác nhé
Giải thích quy trình thực hiện đoạn mã lệnh
import 'package:flutter/material.dart';
runApp(const HelloWord());
Trong hàm main được kế thừa từ StatelessWidget, đây là một cấu trúc hình cây cơ bản của ứng dụng "hello World", khi chạy nó sẽ trả về một MaterialApp
Trước khi trả về một MeterialApp hệ thống sẽ thực hiện một Scaffold widget, Scaffold widget chứa hầu hết toàn bộ màn hình của ứng dụng, trong vd này Scaffold có chứa appBar dùng để hiển thị tiêu đề của APP "VTSOFT"
appBar: AppBar( // AppBar takes a Text Widget // in it's title parameter title: const Text('VTSOFT'), ),
Phần body của ứng dụng có thuộc tính Center dùng để căn giữa, lớp Child nằm bên trong body lại chứ widget Text dùng để hiển thị văn bản
body: const Center(child: Text('Hello World')),
---------------
Bài trước --> Flutter là gì? Giới thiệu về Flutter
Bài tiếp theo ---> Tìm hiểu lớp Scaffold và các thành phần trong Flutter
Bài trước: Tìm hiểu BottomAppBar trong Flutter
Bài tiếp theo: Hướng dẫn sử dụng Flutter TabBar và ví dụ
11/11/2022
28/10/2022
27/10/2022
25/10/2022
24/10/2022
22/08/2021
30/08/2021
19/08/2021
14/10/2022
22/08/2024
15/08/2024
08/08/2024
06/08/2024
01/08/2024
Khám phá sự khác biệt với phần mềm quản trị doanh nghiệp hàng đầu! Đăng ký ngay để sử dụng phần mềm miễn phí.
Nhanh tay đăng ký để được tư vấn dịch vụ miễn phí và tìm ra giải pháp tốt nhất cho nhu cầu của bạn!