NGHỆ THUẬT FLUTTER : FutureProvider, StreamProvider

Provider trong Flutter là một phần rất quan trọng, trong bài viết trước tôi đã giới thiệu các dùng Provider một cách cơ bản. Trong bài viết này tôi lại gửi tiếp đến các bạn về Provider Advanced. Provider Advanced trong bài viết này tôi sẽ viết về FutureProvider, StreamProvider. Như các bạn đã biết FutureBuilder và StreamBuilder, chúng được dùng để xử lý data khi load data từ internet hoặc database, chỉ load một lần, khi data thay đổi thì Widget cũng không được cập nhật cho đến khi người dùng load lại screen. Nhưng với FutureProvider và StreamProvider thì khác, chúng luôn lắng nghe sự thay đổi, khi có sự thay đổi giá trị của các thuộc tính thì Widget cũng sẽ tự cập nhật theo. Tạo một project mới FutureProvider Cài đăt thư viện provider trong file pubspec.yaml

//
provider: ^4.3.2+2

1 2	// provider: ^4.3.2+2

Tạo file Json Để sử dụng FutureProvider, tôi sẽ load data từ một file Json Tạo folder assets, trong folder này tạo một file : info.json

{
  "users": [
    {
      "name": "Báo Flutter",
      "job": "Software Engineer",
      "website": "baoflutter.com"
    },
    {
      "name": "Thành Công",
      "job": "Software Engineer",
      "website": "baoflutter.com"
    }

  ]
}

{

"users": [

{

"name": "Báo Flutter",

"job": "Software Engineer",

"website": "baoflutter.com"

{

"name": "Thành Công",

"job": "Software Engineer",

"website": "baoflutter.com"

}

]

}

Khai báo trong file : pubspec.yaml

assets:
    - info.json

1 2	assets: - info.json

Tạo Model - User Model Khi load một dữ liệu dưới dạng Json, chúng ta thường tạo model - một đối tượng để xử lý data.

// User Model
class User {
  final String name, job, website;
  const User(this.name, this.job, this.website);

  User.fromJson(Map<String, dynamic> json):
        this.name = json['name'],
        this.job = json['job'],
        this.website = json['website'];

  Map<String, dynamic> toJson() => {
    "name": this.name,
    "job": this.job,
    "website": this.website
  };
}

// User List Model
class UserList {
  final List<User> users;
  UserList(this.users);

  UserList.fromJson(List<dynamic> usersJson) :
        users = usersJson.map((user) => User.fromJson(user)).toList();
}

// User Model

class User {

final String name, job, website;

const User(this.name, this.job, this.website);

User.fromJson(Map<String, dynamic> json):

this.name = json['name'],

this.job = json['job'],

this.website = json['website'];

Map<String, dynamic> toJson() => {

"name": this.name,

"job": this.job,

"website": this.website

};

}

// User List Model

class UserList {

final List<User> users;

UserList(this.users);

UserList.fromJson(List<dynamic> usersJson) :

users = usersJson.map((user) => User.fromJson(user)).toList();

}

Load data từ Json file Load data từ file Json trong file assets, sẽ được converts sang User Model List

import 'dart:convert';

import 'package:advanced_provider/FutureProvider/user_model.dart';
import 'package:flutter/services.dart';

class LoadDataFromJson {
  final String _dataPath = "assets/info.json";
  List<User> users;

  // Load data, convert to List of Model
  Future<List<User>> loadUserData( ) async {
    var dataString = await loadAsset();
    Map<String, dynamic> jsonUserData = jsonDecode(dataString);
    users = UserList.fromJson(jsonUserData['users']).users;
    print('load thành công!' + jsonEncode(users));
    return users;
  }

  // Load Data from Assets
  Future<String> loadAsset() async {
    return await Future.delayed(Duration(seconds: 10), () async {
      return await rootBundle.loadString(_dataPath);
    });
  }
}

import 'dart:convert';

import 'package:advanced_provider/FutureProvider/user_model.dart';

import 'package:flutter/services.dart';

class LoadDataFromJson {

final String _dataPath = "assets/info.json";

List<User> users;

// Load data, convert to List of Model

Future<List<User>> loadUserData( ) async {

var dataString = await loadAsset();

Map<String, dynamic> jsonUserData = jsonDecode(dataString);

users = UserList.fromJson(jsonUserData['users']).users;

print('load thành công!' + jsonEncode(users));

return users;

}

// Load Data from Assets

Future<String> loadAsset() async {

return await Future.delayed(Duration(seconds: 10), () async {

return await rootBundle.loadString(_dataPath);

});

}

Tạo page hiển thị

import 'package:advanced_provider/FutureProvider/user_model.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class FutureProviderPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var _users = Provider.of<List<User>>(context);
    return Column(
      children: <Widget>[
        Padding(
          padding: EdgeInsets.all(10.0),
          child: Text(
              'FutureProvider Example - Load Infor từ file Json'
          ),
        ),
        Expanded(
            child: _users == null ? Container(child: CupertinoActivityIndicator(radius: 50.0)) :
            ListView.builder(
                itemCount: _users.length,
                itemBuilder: (context, index){
                  return Container(
                      height: 50,
                      color: Colors.grey[(index*200) % 400],
                      child: Center(
                          child: Text(
                              '${_users[index].name} - ${_users[index].job} | ${_users[index].website}'
                          )
                      )
                  );
                }
            )
        )
      ],
    );

  }
}

import 'package:advanced_provider/FutureProvider/user_model.dart';

import 'package:flutter/cupertino.dart';

import 'package:flutter/material.dart';

import 'package:provider/provider.dart';

class FutureProviderPage extends StatelessWidget {

@override

Widget build(BuildContext context) {

var _users = Provider.of<List<User>>(context);

return Column(

children: <Widget>[

Padding(

padding: EdgeInsets.all(10.0),

child: Text(

'FutureProvider Example - Load Infor từ file Json'

Expanded(

child: _users == null ? Container(child: CupertinoActivityIndicator(radius: 50.0)) :

ListView.builder(

itemCount: _users.length,

itemBuilder: (context, index){

return Container(

height: 50,

color: Colors.grey[(index*200) % 400],

child: Center(

child: Text(

'${_users[index].name} - ${_users[index].job} | ${_users[index].website}'

)

);

}

)

);

}

Như đoạn code trên chúng ta đã thấy, sử dụng Provider :

var _users = Provider.of<List<User>>(context);

1	var _users = Provider.of<List<User>>(context);

Khai báo FutureProvider trong Widget cha, ở đây chúng ta dùng trong MaterialApp

home: MultiProvider(
            providers: [
              FutureProvider(create: (_) => LoadDataFromJson().loadUserData()),
             
            ],
            child:

home: MultiProvider(

providers: [

FutureProvider(create: (_) => LoadDataFromJson().loadUserData()),

child:

StreamProvider Stream là một khái niệm thường dùng trong lập trình bất đồng bộ ( asynchronous programming ), cũng tương tự khi dùng trong StreamProvider nhưng StreamProvider luôn lắng nghe khi có sự cập nhật, sẽ dẫn đến cập nhật Widget. 1. Tạo Stream Tạo một stream là một chuỗi số tăng tự động sau một giây

class NumberStream {
  Stream<int> intStream() {
    Duration interval = Duration(seconds: 1);
    int _count = 0;
    return Stream<int>.periodic(interval, (int _count) => _count++);
  }
}

class NumberStream {

Stream<int> intStream() {

Duration interval = Duration(seconds: 1);

int _count = 0;

return Stream<int>.periodic(interval, (int _count) => _count++);

}

2. Sử dụng Provider và hiển thị

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

class StreamProviderPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var _value = Provider.of<int>(context);
    return Container(
        child: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text('StreamProvider - Load giá trị số tăng tự động sau 1s'),
                SizedBox(height: 150),
                Text('${_value.toString()}',
                    style: Theme.of(context).textTheme.display1
                )
              ],
            )
        )
    );
  }
}

import 'package:flutter/material.dart';

import 'package:provider/provider.dart';

class StreamProviderPage extends StatelessWidget {

@override

Widget build(BuildContext context) {

var _value = Provider.of<int>(context);

return Container(

child: Center(

child: Column(

mainAxisAlignment: MainAxisAlignment.center,

children: [

Text('StreamProvider - Load giá trị số tăng tự động sau 1s'),

SizedBox(height: 150),

Text('${_value.toString()}',

style: Theme.of(context).textTheme.display1

)

);

}

Cũng giống như FutureProvider, sử dụng provider cũng tương tự:

 var _value = Provider.of<int>(context);

1	var _value = Provider.of<int>(context);

Đăng ký StreamProvider trong Widget tổ tiên

home: MultiProvider(
            providers: [
              
             StreamProvider(create: (_) => NumberStream().intStream(), initialData: 0)
            ],
            child:

home: MultiProvider(

providers: [

StreamProvider(create: (_) => NumberStream().intStream(), initialData: 0)

child:

Hiển thị giao diện khi sử dụng FutureProvider, StreamProvider Trong file main.dart, cập nhật hoàn chỉnh như bên dưới

import 'dart:convert';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:provider/provider.dart';

import 'FutureProvider/future_provider_page.dart';
import 'FutureProvider/load_data_from_json.dart';
import 'StreamProvider/number_stream.dart';
import 'StreamProvider/stream_provider_page.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Advance Flutter',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: MultiProvider(
            providers: [
              FutureProvider(create: (_) => LoadDataFromJson().loadUserData()),
             StreamProvider(create: (_) => NumberStream().intStream(), initialData: 0)
            ],
            child: DefaultTabController(
                length: 2,
                child: DefaultTabController(
                  length: 2,
                  child: Scaffold(
                    appBar: AppBar(
                      title: Text("Advanced Provider"),
                      bottom: TabBar(
                        tabs: [
                          Tab(child: Text("FutureProvider"),),
                          Tab(child: Text("StreamProvider"),),
                        ],
                      ),
                    ),
                    body: TabBarView(
                      children: [
                        FutureProviderPage(),
                        StreamProviderPage(),
                      ],
                    ),
                  ),
                )
            )
        )
    );
  }
}

import 'dart:convert';

import 'package:flutter/cupertino.dart';

import 'package:flutter/material.dart';

import 'package:flutter/services.dart';

import 'package:provider/provider.dart';

import 'FutureProvider/future_provider_page.dart';

import 'FutureProvider/load_data_from_json.dart';

import 'StreamProvider/number_stream.dart';

import 'StreamProvider/stream_provider_page.dart';

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

class MyApp extends StatelessWidget {

@override

Widget build(BuildContext context) {

return MaterialApp(

title: 'Advance Flutter',

theme: ThemeData(

primarySwatch: Colors.blue,

home: MultiProvider(

providers: [

FutureProvider(create: (_) => LoadDataFromJson().loadUserData()),

StreamProvider(create: (_) => NumberStream().intStream(), initialData: 0)

child: DefaultTabController(

length: 2,

child: DefaultTabController(

length: 2,

child: Scaffold(

appBar: AppBar(

title: Text("Advanced Provider"),

bottom: TabBar(

tabs: [

Tab(child: Text("FutureProvider"),),

Tab(child: Text("StreamProvider"),),

body: TabBarView(

children: [

FutureProviderPage(),

StreamProviderPage(),

)

);

}

Dưới đây là kết quả:

Sourcecode của bài viết này sẽ được lưu tại Github. Kết luận: Như vậy FutureProvider, StreamProvider có rất nhiều ưu việt. Nó không chỉ được dùng để load data từ internet hay từ database, mà nó còn luôn lắng nghe, khi có sự thay đổi thì Widget đăng kí provider sẽ được cập nhật theo. Chúc các bạn có được nhiều kiến thức từ Báo Flutter !

One Reply to “NGHỆ THUẬT FLUTTER : FutureProvider, StreamProvider”

Đầu đất viết:

21/02/2021 lúc 2:37 sáng

StreamProvider

Cho mình hỏi xíu là. lsao có thể stop được cái StreamProvider ạ.

Ví dụ như trên bạn đang làm 1 bài toán là sau 1s thì count++. vậy mình muốn stop nó lại thì làm ntn ạ

thanks

Trả lời

NGHỆ THUẬT FLUTTER : FutureProvider, StreamProvider

Published by Báo Flutter

One Reply to “NGHỆ THUẬT FLUTTER : FutureProvider, StreamProvider”

Trả lời Hủy