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

    ứng dụng flutter đầu tiên

    Chọn Flutter -> Kích vào nút Next

    ứng dụng flutter đầu tiên

    Nhập tên dự án vào ô Project name , trong VD này bạn đặt tên dự án là Hello_World

    ứng dụng flutter đầu tiên

    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

    ứng dụng flutter đầu tiên

    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 :

    hello flutter app

    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