Ứng dụng Flutter đầu tiên “Hello Word”

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

• -        Stateless Widget

• -        Stateful Widget

• -        Inherited Widget

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

• -        Đầu tiên các bạn khai báo sử dụng thư viện material cho toàn bộ APP

import 'package:flutter/material.dart';

• -        Tiếp theo khi chạy ứng dụng, hệ thống sẽ tìm đến hàm main để thực hiện, trong hàm main lại gọi đến hàm HelloWord()

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