Flutter Provider 之 FutureProvider 與 StreamProvider

Flutter程式設計開發 發表於 2019-12-06

Provider 基本使用

在之前的一篇文章中,介紹了 Provider 的基本使用,總結一下,Provider 的基本使用總結如下 :

  1. 定義資料 model 管理變數
  2. 通過 ChangeNotifierProvider 將狀態和需要使用的狀態的元件組合到一起
  3. 使用 Provider.of 或者 Consumer 監聽狀態或者改變狀態。

當然如果是在一個 widget 或者頁面裡面需要使用多個狀態, ChangeNotifierProvider 顯然是不夠的,因此 Provider 提供了 MultiProvider 來使用多個狀態,像這樣

  MultiProvider(
        providers: [
          ChangeNotifierProvider(builder: (_) => BasicCounter(0)),
          FutureProvider(builder: (_) => UserProvider().loadUserData()),
          StreamProvider(builder: (_) => EventProvider().intStream(), initialData:ThemeData.light() )
        ],
        child: MyApp()
    )
複製程式碼

就可以使用多個狀態了。

接下來介紹 Provider 裡面另外兩個比較重要的 Provider: FutureProvider 和 StreamProvider。 通過名字就看得出來,這兩個 Provider 和非同步執行有關。更詳細的介紹和使用參考這篇文章,如果你不能訪問這篇文章也沒有關係,接下來我會根據這篇文章來介紹一下這兩個 Provider 是如果使用的。

FutureProvider 的使用

FutureProvider 使用起來也很簡單。先看一下建構函式:

  FutureProvider({
    Key key,
    @required ValueBuilder<Future<T>> builder,
    T initialData,
    ErrorBuilder<T> catchError,
    UpdateShouldNotify<T> updateShouldNotify,
    Widget child,
  }) : this._(
          key: key,
          initialData: initialData,
          catchError: catchError,
          updateShouldNotify: updateShouldNotify,
          delegate: BuilderStateDelegate(builder),
          child: child,
        );

複製程式碼

可以看到,builder 的返回值型別確實是 Future 型別的,並且可以通過 initiaData 指定初始值。接下來具體看一下如何使用。

1、定義 非同步操作,返回值型別需要是 Future 型別的

比如讀取 assets 下的 json 檔案並解析,這肯定是一個耗時的操作,因此需要非同步進行。

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

  Future<List<User>> loadUserData( ) async {
    var dataString = await loadAsset();
    Map<String, dynamic> jsonUserData = jsonDecode(dataString);
    users = UserList.fromJson(jsonUserData['users']).users;
    print('done loading user!' + jsonEncode(users));
    return users;
  }

  Future<String> loadAsset() async {
    return await Future.delayed(Duration(seconds: 10), () async {
      return await rootBundle.loadString('assets/data/users.json');
    });
  }
}
複製程式碼

2、FutureProvider 中指定剛才定義的 UserProvider 並且呼叫初始化函式。

    MultiProvider(
        providers: [
          ChangeNotifierProvider(builder: (_) => BasicCounter(0)),
          FutureProvider(builder: (_) => UserProvider().loadUserData()),
          StreamProvider(builder: (_) => EventProvider().intStream(), initialData: 0)
        ],
        child: MyApp()
    )
複製程式碼

3、使用 Provider.of 獲取狀態

    var _users = Provider.of<List<User>>(context);
複製程式碼

接下來就可以通過 users 正常的使用變數了。

       ListView.builder(
                itemCount: _users.length,
                itemBuilder: (context, index){
                  return Container(
                      height: 50,
                      color: Colors.grey[(index*200) % 400],
                      child: Center(
                          child: Text(
                              '${_users[index].firstName} ${_users[index].lastName} | ${_users[index].website}'
                          )
                      )
                  );
                }
            )
複製程式碼

StreamProvider 的使用

其建構函式如下:

  StreamProvider({
    Key key,
    @required ValueBuilder<Stream<T>> builder,
    T initialData,
    ErrorBuilder<T> catchError,
    UpdateShouldNotify<T> updateShouldNotify,
    Widget child,
  }) : this._(
          key: key,
          delegate: BuilderStateDelegate<Stream<T>>(builder),
          initialData: initialData,
          catchError: catchError,
          updateShouldNotify: updateShouldNotify,
          child: child,
        );

複製程式碼

和 FuturePrivider 類似,返回值是 Stream 型別的,也可以指定初始值。接下來看如何使用。

1、定義可以返回 Stream 型別的操作

這裡只是每隔兩秒返回一個數字。

class EventProvider {

  Stream<int> intStream() {
    Duration interval = Duration(seconds: 2);
   return Stream<int>.periodic(interval, (int _count) => _count++);

  }

}
複製程式碼

2、初始化 StreamBuilder 並啟動傳送 Stream 的操作

   MultiProvider(
        providers: [
          ChangeNotifierProvider(builder: (_) => BasicCounter(0)),
          FutureProvider(builder: (_) => UserProvider().loadUserData()),
          StreamProvider(builder: (_) => EventProvider().intStream(), initialData:0)
        ],
        child: MyApp()
    )
複製程式碼

3、通過 Provider.of 讀取狀態

    var _value = Provider.of<ThemeData>(context);
複製程式碼

使用這個狀態:

Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text('StreamProvider Example'),
                SizedBox(height: 150),
                Text('${_value.toString()}',
                    style: Theme.of(context).textTheme.display1
                )
              ],
            )
        )
複製程式碼

這樣介面上的數字就是每隔兩秒鐘重新整理一次了。

接下來再看一個例子,通過 StreamProvider 來改變主題。 將剛才的 EventProvider 改為如下:

class EventProvider {

  Stream<ThemeData> intStream() {
    Duration interval = Duration(seconds: 2);
   // ThemeData  themeData = _themeData == ThemeData.light()?ThemeData.dark():ThemeData.light()
    return Stream<ThemeData>.periodic(interval, (int _count) => _count %2 == 0?ThemeData.light():ThemeData.dark() );
   //return Stream<int>.periodic(interval, (int _count) => _count %2 == 0? 11: 22  );
  // return Stream<int>.periodic(interval, (int _count) => _count++);
  }

}
複製程式碼

每隔兩秒改變一次主題。

初始化 StreamProvider:

   MultiProvider(
        providers: [
          ChangeNotifierProvider(builder: (_) => BasicCounter(0)),
          FutureProvider(builder: (_) => UserProvider().loadUserData()),
          StreamProvider(builder: (_) => EventProvider().intStream(), initialData:ThemeData.light())
        ],
        child: MyApp()
    )
複製程式碼

使用 Provider.of 讀取狀態

   return MaterialApp(
        title: 'Flutter Demo',
       // theme: ThemeData.light(),
      //  theme: themeData,
        theme:  Provider.of<ThemeData>(context),


        home:  DefaultTabController(
            length: 3,
            child: DefaultTabController(
              length: 3,
              child: Scaffold(
                appBar: AppBar(
                  title: Text("Provider Demo:" ),
                  bottom: TabBar(
                    tabs: [
                      Tab(icon: Icon(Icons.add)),
                      Tab(icon: Icon(Icons.person)),
                      Tab(icon: Icon(Icons.message)),
                    ],
                  ),
                ),
                body: TabBarView(
                  children: [
                    HomePage(),
                    MyUserPage(),
                    MyEventPage(),
                  ],
                ),
              ),
            )
        )

    );
複製程式碼

效果如下:

Flutter Provider 之 FutureProvider 與 StreamProvider

github

最後

歡迎關注「Flutter 程式設計開發」微信公眾號 。

Flutter Provider 之 FutureProvider 與 StreamProvider