openplanning

Tạo ứng dụng Flutter đầu tiên của bạn - Hello Flutter

  1. Mục tiêu của bài viết
  2. Tạo dự án Flutter
  3. Giải thích cấu trúc dự án
  4. Viết mã cho ứng dụng
  5. Chạy ứng dụng

1. Mục tiêu của bài viết

Trong bài viết này tôi sẽ hướng dẫn bạn tạo một ứng dụng Flutter đầu tiên trên Android Studio và chạy ứng dụng này thành công với Android Emulator.
Trước hết hãy đảm bảo rằng bạn đã cài đặt thành công các công cụ cần thiết sau đây:

2. Tạo dự án Flutter

Trên Android Studio tạo mới một dự án Flutter:
  • File > New > New Flutter Project...
Dự án đã được tạo ra, và dưới đây là cấu trúc của nó:

3. Giải thích cấu trúc dự án

android
Thư mục sinh ra code một cách tự động cho ứng dụng Android.
ios
Thư mục sinh ra code một cách tự động cho ứng dụng iOS.
lib
Thư mục chính chứa mã Dart của ứng dụng.
lib/main.dart
Tập tin sẽ được gọi để bắt đầu (start) ứng dụng.
test
Thư mục chứa các mã Dart để test ứng dụng.
test/widget_test.dart
Sample code
.gitignore
Git version control file - Tập tin này chứa cấu hình cho dự án GIT.
.metadata
Tập tin này được sinh ra tự động bởi công cụ của Flutter.
.packages
Tập tin này được sinh ra tự động, nó chứa danh sách các phụ thuộc (dependencies) đang được sử dụng bởi dự án.
.iml
Một tập tin dự án của Android Studio.
pubspec.yaml
Một tập tin để khai báo các tài nguyên liên quan tới dự án, chẳng hạn hình ảnh, phông chữ, ...
pubspec.lock
Tập tin này nên được thêm vào GIT Control để đảm bảo rằng các thành viên trong nhóm phát triển sử dụng cùng các phiên bản thư viện.
README.md
Tập tin mô tả về dự án, được viết theo cấu trúc Markdown.

4. Viết mã cho ứng dụng

Xóa bỏ hết tất cả nội dung của tập tin main.dart và thay thế bởi nội dung mới.
lib/main.dart
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',
          )
      ),
    );
  }
}

5. Chạy ứng dụng

Ứng dụng Flutter cần được triển khai lên một thiết bị Android hoặc iOS để chạy, vì vậy trong quá trình phát triển ứng dụng bạn có một trong các lựa chọn sau đây:
  • Nối thiết bị Android thực của bạn với máy tính, và bật chế độ nhà phát triển (Developer mode) cho nó.
  • Nối thiết bị iOS thực của bạn với máy tính (chẳng hạn iPhone), và bật chế độ nhà phát triển (Developer mode) cho nó.
  • Chạy một thiết bị giả lập Android (Android Emulator).
Chúng ta đang lập trình ứng dụng Flutter trên Android Studio, vì vậy cách tiếp cận tốt nhất là chạy một Android Emulator (Trình giả lập Android).
Trên Android Studio chọn:
  • Tools > AVD Manager
Hoặc nhấn vào icon "AVD Manager" trên thanh công cụ:
Và khởi động một thiết bị ảo trong danh sách:
Nếu bạn không nhìn thấy thiết bị ảo nào trên danh sách, hãy tạo nó theo hướng dẫn dưới đây:
Android Emulator đã được khởi động, và sẵn sàng để triển khai ứng dụng Flutter:
Trên thanh công cụ của Android Studio, chạy ứng dụng Flutter của bạn như hình minh họa dưới đây:
Và kết quả mà bạn nhận được:

Các hướng dẫn lập trình Flutter

Show More