Chúng ta đã biết rằng trong Flutter, tất cả những gì chúng ta được nhìn thấy trên UI là Widget.

Bài 2 - Widgets trong Flutter

2021-06-06 1351 lượt xem

sau bài 1 hướng dẫn tạo project flutter xong thì nay chúng ta sẽ tìm hiểu trọng tâm của flutter là các widget

1. tại sao học widget đầu tiên

Gắn với khái niệm code ra được cái app hello world thì bạn cần biết widget là gì để có thể tạo ra các widget. Vì trong flutter, khái niệm widget là khái niệm xuyên suốt trong quá trình code với flutter. 

nếu bạn nào đã từng tiếp xúc với react, vue, … nói chung là các frameword khuynh hướng hiện đại sẽ mang tư tưởng của component. và flutter cũng thế, Flutter widgets cũng giống 1 component trong reactjs. Flutter widgets mục đích là biểu thị UI, render UI cho người dùng thấy. Flutter có cơ chế state, khi state thay đổi thì widget của flutter sẽ được render lại.

2. Chỉnh sửa lại code của project fluter cho dễ đọc.

Ở bài 1 chúng ta có tìm hiểu cách tạo 1 ứng dụng flutter. Như các ngôn ngữ như java hoặc C# thì phải có 1 file với function void main nào đó được thực thi đầu tiên. Vậy flutter cũng thế, nó cũng sẽ có 1 nơi nào đó thực thi đầu tiên, và file đó nằm ở được dẫn : <TÊN PROJECT>/lib/main.dart

bữa cái code của flutter nó thấy gớm quá, bay giừo mình nghĩ alf chũng ta nên viết lại 1 cách ngắn gọn như này : 

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: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text("đây là title của app bar")
        ),
        body: Center(
          child: Text("đây là thẻ center thử hot reload"),
        ),
      )
    );
  }
}

bạn copy dán vào file main.dart để xem code thực hiện của flutter sẽ có kết quả như này: 

 

Tổng quanvề Widget

Không giống code native như ở Android hoặc IOS, Flutter có một cơ chế build, update UI hoàn toàn khác biệt. Và cơ chế đó như sau :

khi trạng thái ( state ) thay đổi thì UI sẽ được render lại ( function Widget build(BuildContext context) { sẽ được gọi lại. 

Tức là với ví dụ trên, thì đầu game flutter chạy hàm main.dart, vào đây thấy cái hàm void main thì chạy trước, hàm voi main thì cho chạy cái hàm runApp, mà cụ thể cái runApp là hàm gì thì bạn kệ bà nó đi, vì nó là thư viện flutter cung cấp.

Trong hàm runApp nó chạy cái widget MyApp do chính chúng ta định nghĩa. Mình thích định nghĩa cái gì cũng được. tạm thời chúng ta sẽ thấy là MyApp sẽ extend từ cái  StatelessWidget  ngoài ra chúng ta còn có 1 loại khác để có thể kế thừa là StatefulWidget 

  • StatelessWidget là không có state ( không thay đổi nội bộ UI )
  • StatefullWidget là có state ( có sự thay đổi quản lý state và sự thay đổi UI theo state)

Trong flutter họ có định nghĩa sẵn cho chúng ta vài cái widget để sài cho tiện

trong ví dụ là MaterialApp là widget kế thừa các kiến trúc theo chuẩn design marterial, Scaffold là widget bao chứa toàn bộ code chúng ta vào trong nó ( phủ đầy giao diện chúng ta).

Nói thì hơi mông lung như 1 trò đùa 😄 => Bạn nào code HTML rồi thì cứ tưởng tượng cái thẻ marterial giống như là thẻ html có thẻ head rồi nhúng css của marterial vào, còn thẻ scaffold là như thẻ body của html vậy thôi.

Trong 1 thẻ widget thì sẽ có các Thộc tính đi kèm, có thể các thuộc tính đi kèm lại truyền thêm các widget, giống như bạn xây dùng 1 thẻ Widget cho riêng bạn, tuy kế thừa từ widget nhưng cũng có thể có các thuộc tính đi kèm là đối tượng widget được truyền vào 😄 

ví dụ trên là thẻ MaterialApp có thuộc tính title truyền vào là 1 text, và thuộc tính theme truyền vào là 1 ThemeData. Nhưng còn thẻ Scaffold thì co thuộc tính body truyền vào 1 widget Center

Widget thì được chia ra làm 2 loại. Đó là StatelessWidget và StatefulWidget. Hiện tại chúng ta cũng thấy có 2 cái widget Text và Center trong ví dụ trên, vậy câu hỏi mình tự đặt ra khi mới học flutter đó là 2 cái widget đó là dạng nào trong 2 loại widget của flutter ? Vậy câu trả lời là nếu bạn view define nó ra sẽ thấy nó extend từ đứa nào là biết chứ cần gì search chi phức tạp 😄 

Tổng kết

Bài này dài rồi, mình xin tóm gọn là chỉ bằng 2 câu nói: 

1. Để xây dựng các thành phần UI trong fluttter chúng ta dùng các widget ( widget thì giống khái niệm component trong các kiến trúc web )

2. chúng ta có 2 loại widget làStatelessWidgetvàStatefulWidget

Bài sau chúng ta sẽ tìm hiểu kỹ hơn về 2 widget trên.