flutter Provider組件間獲取數據正確用法 （數據訂閱發佈）

1 . 根組件註冊Provider
安裝Provider庫：pubspec.yaml文件

dependencies:
  flutter:
    sdk: flutter
  ...
  provider: ^4.1.3

註冊Provider: main.dart文件：

void main() {
  runApp(
    //註冊Provider
    MultiProvider(
      providers: [
        ChangeNotifierProvider<TabBarData>(create: (_) => TabBarData())
      ],
      child: MyApp()
    )
  );
}

2. Provider 獲取數據封裝

//Provider 數據封裝
import 'dart:convert';
import 'package:app_ftr/common/MyBase.dart';
import 'package:dio/dio.dart';
import 'package:flutter/foundation.dart';

//定義TabBarData獲取數據事件
class TabBarData with ChangeNotifier, MyBase {
  List _tabBarList = [];
  //獲取數據
  List get tabBarList => _tabBarList;

  getTabBar() async {
    Response response = await httpClient.post('請求數據接口');
    List res = jsonDecode(response.data)['data'];
    _tabBarList = res;
    notifyListeners(); //通知更新數據
  }
}

使用：

A頁面請求數據

  @override
  Widget build(BuildContext context) {
    //廣告頁時獲取導航欄數據，跳轉後數據就直接頁面顯示 (優化)
    Provider.of<TabBarData>(context).getTabBar();
  }

B頁面監聽數據變化並渲染頁面

  @override
  Widget build(BuildContext context) {
    //通知更新數據後這裏就接受到最新數據
    List _tabBarList = Provider.of<TabBarData>(context).tabBarList;
    //下面就是渲染頁面啦
   return Scaffold(
     body: Row(
        children: _tabBarList.map((item) {
           return Text(text: item['tag_name']);
       }).toList())
     )  
   )
}