Cheatsheet các snippet hữu ích cho Flutter

Tram Ho

Widget

Một widget là loại bộ điều khiển cơ bản trong Flutter Material. Có hai loại Widget cơ bản mà chúng ta có thể mở rộng các lớp của mình: StatefulWidget hoặc StatelessWidget.

Stateful

StatefulWidget là widget có giá trị động có thể thay đổi trong quá trình sử dụng. Nó có thể nhận một giá trị đầu vào trong hàm tạo hoặc tham chiếu đến các hàm. Bạn cần tạo hai lớp như:

Khi bạn định cập nhật giá trị, bạn cần bao bọc nó trong hàm setState (() {}).

Nếu bạn muốn bắt chước viewDidLoad của iOS, bạn có thể sử dụng lệnh gọi này trong lớp State

Thay vào đó, nếu bạn muốn được kích hoạt khi cập nhật trạng thái:

Stateless

StatelessWidget là các thành phần được kết xuất và giữ giá trị đó. Một lớp cha cần làm mới để cập nhật nội dung. Nó có thể nhận một giá trị từ hàm tạo.

Model

Dart có một cách hay để tạo init là sử dụng cách tiếp cận như {this.param, this.param2}.

Để có các thông số bắt buộc, bạn cần phải include flutter/material.dart để có thể chuyển đổi lớp của mình thành

Nếu bạn wrap một tham số giữa [] thì tham số đó là tùy chọn thay thế.

Scope Model

Là một cách tốt để chia sẻ dữ liệu trong ứng dụng ở một nơi duy nhất, có thể truy cập vào thiết bị di động ở bất kỳ lớp nào khác. Scope model cung cấp cho bạn một cách để giữ trạng thái của model đã tạo ở trên. Vì vậy, khi scope_model đã được imported, bạn có thể tạo model như sau:

Khi bạn làm việc với item thì tốt hơn nên tránh chuyển lại mảng mà bạn đang sử dụng để quản lý item, tốt hơn nên sử dụng bản sao của item đó. Vì vậy, chúng tôi phải sử dụng một getter.

Để sau này sử dụng điều đó, trong widget build, bạn phải:

Mỗi lần build được gọi là dữ liệu được đọc lại từ trạng thái.

Chúng ta có thể buộc làm mới một hàm build bằng cách sử dụng notifyListeners().

Nếu bạn có nhiều model, tốt hơn nên tạo một file main model như:

Tập trung hóa Để tránh phải gọi điều này trong tất cả các lớp, chúng ta có thể dễ dàng bọc MaterialApp của mình trong ScopeModel <EnModel>(child: MaterialApp[...], model: EnModel()).

Vì vậy, tất cả các phần tử con của MaterialApp sẽ có quyền truy cập vào cấu trúc EnModel.

Để có quyền truy cập, bạn vẫn phải sử dụng ScopeModelDescendant để bọc Widget sẽ sử dụng như trên.

UI

Icon & Splashpage

https://flutter.io/assets-and-images/#updating-the-launch-screen

Screen Size

Colors & Themes

Bạn có thể truy vấn màu bằng Colors.white. Mỗi màu có thêm một tham số withOpacity() bạn có thể sử dụng để đặt độ mờ.

Bạn có thể sử dụng màu chủ đề bằng Theme.of(context).accentColor

Styling

Bạn có thể thêm kiểu bổ sung (màu nền, các góc tròn, v.v.) vào widget bằng DecoratedBox.

Layout

ListView hoạt động giống như một ngăn xếp tốt để đưa các phần tử vào cột. Nếu nó chỉ chứa một đối tượng, hãy sử dụng SingleChildScrollView.

Cột và Hàng đều ổn nhưng không hỗ trợ cuộn. Nếu bạn muốn widget trong một cột / hàng để chiếm nhiều không gian nhất có thể, hãy bọc nó ở trong Expanded. Flexible cũng có sẵn và bạn có thể cung cấp mức độ ưu tiên về weight mà widget sẽ có.

SizeBox là một widget có kích thước cố định, nó rất hữu ích, ví dụ: để thêm lề đơn giản giữa các widget.

Container là một hộp nơi bạn có thể thêm Tiện ích của mình và đặt một số thông số như lề, padding, màu, trang trí, v.v.

Size

MediaQuery là một công cụ mạnh mẽ để tạo giao diện người dùng thích ứng theo tính năng của thiết bị (ví dụ: kích thước màn hình, hướng).

Navigation

Route to other page without back (eg android final)

Route to other page with back

Back (Basic)

Back (Passing data)

Sidebar

Add left drawer

Add right drawer

Tabs

Body of Scaffold cần có TabBarView để quản lý chuyển đổi giữa các nội dung tab. Số chiều dài bắt buộc phải giống nhau trong các mục trong tab TabBarView và TabBar.

Add drawer with tab on top like Android

Add drawer with tab on Botton like iOS

Alert

Modal

Link: https://gist.github.com/matteocrippa/3a8b84c7b49c10bc070e58a66860e83f

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo