Ví dụ cho StatefulWidget [20]

Một phần của tài liệu Phát triển ứng dụng di động hỗ trợ học trực tuyến trên các thiết bị thông minh và hỗ trợ thanh toán online (Trang 27 - 30)

6 KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN

2.3 Ví dụ cho StatefulWidget [20]

2.4.4 Layout

- Trong Flutter các layout cũng là một loại widget, nhiệm vụ của chúng là bố trí các widget con, tạo nên giao diện người dùng cho ứng dụng. Flutter cung cấp nhiều loại layout khác nhau như Container, Center, Align...

- Có hai loại widget layout chính trong Flutter • Single Child Widgets - Chỉ có một widget con • Multiple Child Widgets - Có nhiều widget con

Single Child Widgets - Chỉ có một widget con

- Các widget layout loại này chỉ có duy nhất một widget con và thường có chức năng bố trí nhất định.

- Một số single child layout widgets quan trọng trong Flutter

- Padding - Được sử dụng để padding child widget. Ở đây, padding có thể sử dụng EdgeInsets class.

- Align - Căn lề child widget sử dụng thuộc tính alignment. - Một số single child layout khác[2]:

• FittedBox • AspectRatio • ConstrainedBox • Baseline • FractinallySizedBox • IntrinsicHeight • IntrinsicWidth • LimitedBox • OffStage • OverflowBox • SizedBox • SizedOverflowBox • Transform • CustomSingleChildLayout

Multiple Child Widgets - Có nhiều widget con

- Loại widget layout này sẽ cho phép có nhiều hơn một widget con. Ví dụ Row widget cho phép bố trí các widget con theo chiều ngang thành một hàng trong khi Column widget cho phép bố trí các widget con theo chiều dọc thành một cột.

- Một số widget layout dạng này được sử dụng phổ biến: • Row • Column • ListView • GridView • Expanded • Table • Flow • Stack 2.4.5 ScopedModel

Flutter cung cấp một phương pháp đơn giản để quản lý trạng thái của ứng dụng sử dụng scoped_model package

scoped_model cung cấp 3 class chính cho phép quản lý trạng thái của ứng dụng một cách mạnh mẽ

dependencies: scoped_model: ˆ1.0.1

import ’package:scoped_model/scoped_model.dart’;

Model

Model đóng gói trạng thái của một ứng dụng. Có thể sử dụng nhiều Model (bằng việc kế thừa Model class) để quản lý trạng thái của ứng dụng. Model có một phương thức duy nhất là notifyListeners, nó được gọi bất cứ khi nào trạng thái của Model thay đổi. NotifyListeners sẽ thực hiện các công việc cần thiết để cập nhật giao diện[14].

Ví dụ tạo một model là Product

1 class ProductextendsModel{

2 final String name;

3 final String description;

4 final int price;

5 final String image;

6 int rating;

7 Product(this.name,this.description,this.price,this.image,this.rating);

8 factory Product.fromMap(Map<String,dynamic>json) {

9 return Product( 10 json['name'], 11 json['description'], 12 json['price'], 13 json['image'], 14 json['rating'], 15 ) ; 16 } Trang 16/83

17 void updateRating(intmyRating) {

18 rating=myRating;notifyListeners();

19 }

20 }

ScopedModel

ScopedModel là một widget, hiểu đơn giản nó là một tiện ích để có thể dễ dàng chuyển Data Model từ widget cha xuống các widget con, cháu của nó. Ngoài ra nó còn có nhiệm vụ xây dựng lại các widget con giữa các model mà trong trường hợp model này được cập nhật. Nếu cần nhiều hơn một Data Model thì có thể sử dụng lồng ScopeModel. Dưới đây là hai dạng ScopedModel :

Single model 1 ScopedModel<Product>( 2 model:item, 3 child:AnyWidget() 4 ) Multiple model 1 ScopedModel<Product>( 2 model:item1,

3 child:ScopedModel<Product>(

4 model:item2,

5 child:AnyWidget(),

6 ) ,

7 )

2.4.6 REST API

Flutter cung cấp gói http để sử dụng nguồn HTTP . http là một thư viện Future-based sử dụng tính năng await và async. Nó cung cấp phương thức cấp cao và đơn giản để phát triển REST trên ứng dụng di động.

Một vài phương thức chính :

• read : gởi yêu cầu lên sever thông qua phương thức GET và trả về Future<String>

• get : gởi yêu cầu lên sever thông qua phương thức GET và trả về Future<Response>. Re- sponse là lớp giữ lại các thông tin phản hồi

• post : gởi yêu cầu lên sever thông qua phương thức POST bằng việc đưa giá trị lên sever và phản hồi Future<Response>

• put : gởi yêu cầu lên sever thông qua phương thức PUT và trả về phản hồi như Fu- ture<Response>

• head : gởi yêu cầu lên sever thông qua phương thức HEAD và trả về phản hồi như Fu- ture<Response>

• delete : gởi yêu cầu lên sever thông qua phương thức DELETE và trả về phản hồi như Future<Response>

Http cũng cung cấp nhiều lớp HTTP client tiêu chuẩn. Client có nhiệm vụ hỗ trợ kết nối. Nó sẽ hữu ích khi có rất nhiều request lên sever

dependencies:

http: ˆ 0.12.0+2

2.4.7 Mô hình MVVM

Một phần của tài liệu Phát triển ứng dụng di động hỗ trợ học trực tuyến trên các thiết bị thông minh và hỗ trợ thanh toán online (Trang 27 - 30)