TVF - Flutter Training Day 1

 

QUESTION



1.      Flutter là gì? Dart là gì?

 

Flutter là một nền tảng hỗ trợ phát triển  cho các ứng dụng đa nền cho hệ iOS và Android do tập đoàn Google phát triển

 

Flutter thường bao gồm 2 thành phần chính quan trọng như sau:

 

    • Một SDK (Software Development Kit): Đây là một bộ sưu tập bao gồm các công cụ có thể hỗ trợ cho người dùng có thể  phát triển được các ứng dụng nền của mình. Những điều này thường bao gồm các công cụ có trình để biên dịch mã thành các mã gốc dành riêng cho hệ điều hành iOS và Android.
    • Một Framework (UI Library based on widgets): Mỗi một tập hợp những thành phần giao diện của người dùng đều có thể thực hiện tái sử dụng vô cùng dễ dàng nên người sử dụng có thể cá nhân hóa tùy theo nhu cầu riêng của bản thân mình. 

 

 

Dart:

- Là 1 ngôn ngữ lập trình hướng đối tượng do Google phát triển

- Bạn có thể sử dụng Dart để code AngularDart, Flutter for web, Flutter app.

- Đc lấy cảm hứng từ các ngôn ngữ mạnh mẽ khác như Java, JavaScript, C#

- Dart is a compiled language (ngôn ngữ biên dịch). "That means, that your code isn’t

executed like you write it, but instead, a compiler parses + transform it (to machine

code)". Hiểu tạm là code của bạn chạy k như bạn code :v nó sẽ đc biên dịch sang ngôn ngữ máy.

Try it: https://dartpad.dartlang.org/

 

 

2.      Flutter hỗ trợ những nền tảng gì?

- Mobile, web, desktop, embedded

 

3.      Flutter được build từ ngôn ngữ gì?

- Dart

      

4.      Nêu các thành phần của framework Dart?

 

# Foundation

Đây được xem là core library, định nghĩa và cung cấp những utility classes, functions và được nhiều lớp (layer) khác sử dụng trong Flutter.


 

# Animation

Thư viện này cung cấp các khối xây dựng cơ bản (basic building blocks) cho việc thực hiện hóa các chuyển động trong flutter.

                                                

# Painting

Thư viện vẽ (painting) bao gồm nhiều classes được xây dựng để gọi tới Flutter engine’s painting API từ đó hỗ trợ để xây dựng giao diện với nhiều mục đính khác nhau trong flutter.

Một số ví dụ cần painting như phóng to, thu nhỏ hình ảnh (scale image), nội suy bóng mờ (interpolation of shadow), vẽ khung, viền khung (border-box), vv..

 


# Gesture

Thư viện được xây dựng để nhận dạng các tương tác cử chỉ (gesture) của người dùng như Drag, Long Press, Tap, vv...

 


# Rendering

Rendering Tree là hệ thống layout cấp thấp (low-level) và painting được tổ chức dưới dạng Tree Object, với những object là lớp kế thừa của RenderObject.

Widget được xây dựng theo dạng cây với những object là lớp kế thừa của RenderObject, cho nên cũng có thể nói widget là một dạng TreeObject. Thông thường thì developer không cần phải làm việc trực tiếp với RenderObject mà sẽ làm việc thông qua widget.

 


# Widgets

Ý tưởng trọng tâm của widgets là bạn sẽ xây dựng UI dựa trên các widgets này. Widgets nhận và lưu trữ trạng thái (state) của UI và widget sẽ được rebuild nếu state thay đổi.

Widget có 2 dạng là StatefulWidget và StatelessWidget


Material

Được xây dựng từ widgets library và thực hiện hóa theo chuẩn Material Design

Tìm hiểu thêm về Material design: https://material.io/design/

# Cupertino

Được xây dựng từ widgets library và thực hiện hóa theo ngôn ngữ thiết kế của iOS hiện tại.

Tìm hiểu thêm về iOS interface design: https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/


5.      Các IDE sử dụng để code Flutter bao gồm?

Android Studio, VS Code, IntelliJ Idea, Emacs, Codemagic

 

6.      Trong Flutter engine có bao nhiêu loại thread (runners)? Kể tên các loại đó?

Future, Async & Await

Platform Runner: UI Runner, GPU Runner, IO Runner, Platform Runner

More: https://medium0.com/m/global-identity?redirectUrl=https%3A%2F%2Fmedium.flutterdevs.com%2Fthreading-in-flutter-e5b84c7d8d31

 

7.      Khi tạo app mobile cần sử dụng internet thì phải config gì?

Android

Add this to file android/app/src/main/AndroidManifest.xml after the package name:

 

<uses-permission android:name="android.permission.INTERNET"/>

 

macOS

Add the following key-value pair to macos/Runner/DebugProfile.entitlements and macos/Runner/Release.entitlements:

 

<key>com.apple.security.network.client</key>

<true/>

 

8.      Khi đặt tên packages, classes, method cần chú ý điều gì?

Naming convention

- Classes, enums, typedefs, and extensions name should be in UpperCamelCase.

- Libraries, packages, directories, in snake_case (lowercase_with_underscores).

library firebase_dynamic_links;

import ‘socket/socket_manager.dart’;

- Variables, constants, parameters, and named parameters should be in lowerCamelCase.

var item;

const testValue= 14.28;

final urlScheme = RegExp(‘^([a-z]+):’);

void sum(int testValue) { // …}

 

More: https://dart.dev/guides/language/effective-dart/style

 


 

9.      Các kiểu dữ liệu trong Dart

 


10.  Phân biệt _ và ko _: có _ là private

 

11.  Thế nào là stateless, stateful?

- Stateless là những widget không quan tâm đến việc thay đổi, tạo ra 1 lần duy nhất hoặc hiểu cách đơn giản hơn thì đây là widget chỉ nhận khởi tạo có sẵn rồi thực thi nó và không có thay đổi State. Ví dụ như widget Text, Center, MaterialApp, ...

- Stateful sẽ xử lí các dữ liệu bên trong nó, lắng nghe những thay đổi, dữ liệu này sẽ liên tục thay đổi (mutable) trong suốt lifecycle của widget.

Tập hợp những dữ liệu thay đổi được giữ bởi StatefulWidget, thay đổi trong suốt lifecycle của widget và dữ liệu có thể đọc 1 cách đồng bộ khi widget đã được build thì ta gọi đó là State. State định nghĩa ra phần hành vi mà StatefulWidget thể hiện. 1 State chứa các thông tin tương tác với widget thông qua các khía cạnh về hành vi (behavior) và layout. Mỗi khi thay đổi State thì widget đó sẽ thay đổi theo.

Giữa State và BuildContext có 1 mối quan hệ khá khăn khít. Mỗi khi 1 State được tạo ra thì nó sẽ gắn với 1 BuildContext và lúc này State là mounted.

 

More: https://loctvt.blogspot.com/2021/09/statelesswidget-statefulwidget.html

 


 

12.  Để cập nhật state của app mà không sử dụng thư viện thì làm thế nào?

- Sử dụng callback


13.  Khi nào view bị overflow? Ví dụ 2 trường hợp và cách giải quyết

 



-View bị overflow khi nội dung tràn khỏi view

   +, TH1, nội dung text tràn quá width: cách giải quyết: xuống dòng hoặc … TextOverflow.ellipsis

+, TH2, nội dung bị tràn quá height: cách giải quyết: sử dụng SingleScrollView, ListView.

More: https://www.flutterclutter.dev/flutter/troubleshooting/widget-overflowed-by-pixels/2020/461/

 

https://loctvt.blogspot.com/2021/10/flutter-44-column-singlechildscrollview.html

 

14 & 15. Viết ứng dụng

Nhận xét

Bài đăng phổ biến từ blog này

Flutter 4.5 - Custom theme, font, image

Flutter 1.2 - Flutter Architecture

Flutter 2.5 - First App | Building a Widget Tree