Site icon Kiso

Bắt đầu làm việc với Flutter (Phần II)

admin

Tiếp theo bài trước, bài này ta sẽ bắt đầu tập trung vào code.

Đây là hướng dẫn để tạo ứng dụng Flutter đầu tiên của bạn. Nếu bạn đã quen với mã hướng đối tượng và các khái niệm lập trình cơ bản như biến, vòng lặp và điều kiện, bạn có thể hoàn thành hướng dẫn này. Bạn không cần kinh nghiệm trước đó với ngôn ngữ Dart hoặc thiết bị di động.

Những gì bạn sẽ xây dựng trong phần này

Bạn sẽ triển khai một ứng dụng di động đơn giản tạo tên được đề xuất cho một công ty khởi nghiệp. Người dùng có thể chọn và bỏ chọn tên, lưu tên tốt nhất. Khi người dùng cuộn, nhiều tên hơn được tạo. Không có giới hạn về mức độ người dùng có thể cuộn.

GIF động hiển thị cách ứng dụng hoạt động khi hoàn thành.

Những gì bạn sẽ học

  • Cách viết ứng dụng Flutter trông tự nhiên trên cả iOS và Android.
  • Cấu trúc cơ bản của ứng dụng Flutter.
  • Tìm và sử dụng các gói để mở rộng chức năng.
  • Sử dụng Hot reload cho chu kỳ phát triển nhanh hơn.
  • Làm thế nào để thực hiện một widget stateful.
  • Làm thế nào để tạo ra một danh sách vô hạn, được tải nhẹ nhàng.

Những gì bạn sẽ sử dụng

Bạn cần hai phần mềm để hoàn thành bài này: SDK Flutter và trình chỉnh sửa . Codelab này giả định sử dụng Android Studio, nhưng bạn có thể sử dụng trình soạn thảo ưa thích của mình.

Bạn có thể chạy codelab này bằng bất kỳ thiết bị nào sau đây:

  • Thiết bị vật lý ( Android hoặc iOS ) được kết nối với máy tính của bạn và được đặt ở chế độ nhà phát triển.
  • Trình mô phỏng iOS.
  • Trình giả lập Android.

Bước 1: Tạo ứng dụng khởi động Flutter

Tạo một ứng dụng Flutter đơn giản, có khuôn mẫu, sử dụng các hướng dẫn trong bài trước. Đặt tên cho dự án startup_namer (thay vì myapp ).

Trong codelab này, bạn hầu như sẽ chỉnh sửa lib/main.dart , nơi mã Dart tồn tại.

  1. Thay thế nội dung của lib/main.dart .
    Xóa tất cả mã khỏi lib/main.dart . Thay thế bằng mã sau đây, hiển thị “Hello World” ở giữa màn hình.
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     title: 'Welcome to Flutter',
     home: Scaffold(
       appBar: AppBar(
         title: Text('Welcome to Flutter'),
       ),
       body: Center(
         child: Text('Hello World'),
       ),
     ),
   );
 }
}

Mẹo: Khi dán mã vào ứng dụng của bạn, thụt đầu dòng có thể bị lệch. Bạn có thể tự động sửa lỗi này bằng các công cụ của Flutter:

  • Android Studio / IntelliJ IDEA: Nhấp chuột phải vào mã và chọn Reformat Code with dartfmt.
  • VS Code: Nhấp chuột phải và chọn Format Document.
  • Terminal: Chạy flutter format <filename> .
    Chạy ứng dụng bằng cách nhấp vào mũi tên màu xanh lá cây trong IDE. Bạn sẽ thấy output Android hoặc iOS, tùy thuộc vào thiết bị của bạn.

Mẹo: Lần đầu tiên bạn chạy trên thiết bị thực, có thể mất một lúc để tải. Sau này, bạn có thể sử dụng Hot reload để cập nhật nhanh. Save cũng thực hiện tải lại nóng nếu ứng dụng đang chạy.

Quan sát

Bước 2: Sử dụng package bên ngoài

Trong bước này, bạn sẽ bắt đầu sử dụng một package mã nguồn mở có tên là english_words , chứa một vài nghìn từ tiếng Anh được sử dụng nhiều nhất cộng với một số hàm tiện ích.

Bạn có thể tìm thấy package english_words, cũng như nhiều package nguồn mở khác, trên pub.dartlang.org .

  1. Tệp pubspec quản lý nội dung và dependencies cho ứng dụng Flutter. Trong pubspec.yaml , thêm english_words (3.1.0 hoặc cao hơn) vào danh sách dependencies. Thêm dòng được đánh dấu bên dưới:
dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^0.1.0
  english_words: ^3.1.0
  1. Trong khi xem pubspec trong chế độ xem trình chỉnh sửa của Android Studio, nhấp vào Packages get. Nó sẽ tải package vào dự án của bạn. Bạn sẽ thấy những điều sau trong bảng điều khiển:
 > flutter packages get
 Running "flutter packages get" in startup_namer...
 Process finished with exit code 0

Chạy Packages get cũng tự động tạo tệp pubspec.lock với danh sách tất cả các gói được đưa vào dự án và số phiên bản của chúng.

  1. Trong lib/main.dart, import package mới:
import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';

Khi bạn import, Android Studio cung cấp cho bạn các đề xuất cho thư viện để import. Sau đó nó sẽ hiển thị chuỗi import màu xám, cho bạn biết rằng thư viện đã import không được sử dụng (cho đến thời điểm hiện tại).

  1. Sử dụng package english_words để tạo văn bản thay vì sử dụng chuỗi “Hello World”.

Thực hiện các thay đổi sau:

import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final wordPair = WordPair.random();
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        body: Center(
          //child: Text('Hello World'), // Replace the highlighted text...
          child: Text(wordPair.asPascalCase),  // With this highlighted text.
        ),
      ),
    );
  }
}

Lưu ý: “Pascal case” (còn được gọi là “upper camel case”), có nghĩa là mỗi từ trong chuỗi, bao gồm cả từ đầu tiên, bắt đầu với một chữ hoa. Vì vậy, “uppercamelcase” trở thành “UpperCamelCase”.

Nếu ứng dụng đang chạy, hãy sử dụng nút Hot reload (biểu tượng tia chớp) để cập nhật ứng dụng đang chạy. Mỗi khi bạn nhấp vào tải lại nóng hoặc lưu dự án, bạn sẽ thấy một cặp từ khác nhau, được chọn ngẫu nhiên, trong ứng dụng đang chạy. Điều này là do việc ghép nối từ được tạo bên trong phương thức xây dựng, được chạy mỗi khi MaterialApp yêu cầu hiển thị hoặc khi chuyển đổi nền tảng trong Flutter Inspector.

Ảnh chụp màn hình khi hoàn thành bước thứ hai

Gặp vấn đề?
Nếu ứng dụng của bạn không hoạt động chính xác, hãy tìm lỗi chính tả. Nếu cần, hãy sử dụng mã tại các liên kết sau để trở lại đúng hướng.

Còn tiếp

Exit mobile version