從0開始設計Flutter獨立APP | 第三篇: 一勞永逸解決全域性BuildContext問題

魚子長發表於2020-07-14
FlutterAPPUIContext

鑑於Flutter的高效能渲染、跨平臺、多端一致性等優勢，閃點清單在移動端APP上，使用了完整的Flutter框架來開發。既然是完整APP，架構搭建完全不受歷史Native APP的影響，沒有歷史包袱的沉澱，設計也能更靈活和健壯。

全域性BuildContext，幾乎是所有Flutter開發者的一個痛點。這個痛點有多痛呢？我們來列舉一下場景:

  1. 路由跳轉、彈窗、媒體查詢，全部依賴於BuildContext，如果在Service層（或其他非UI層）做這些操作，必須要逐層傳遞正確的BuildContext例項。
  2. 依賴於BuildContext的邏輯，必須寫在某一個頁面的Widget初始化中，否則無法拿到正確的BuildContext；而一些全域性初始化的邏輯必須要寫在某一個頁面裡，而如果首次喚起的不是這個頁面，需要手動保證初始化邏輯不出問題。
  3. 獲取當前前臺頁面的路由，可以用ModalRoute物件，但必須拿到目標頁面的BuildContext才可以，Navigator的BuildContext是拿不到的。
  4. MediaQuery、Navigator、Overlays的BuildContext不是一個，不能用錯。
  5. Flutter絕大部分第三方UI庫是依賴於BuildContext，意味著你必須要在APP初始化後才能使用這些庫，即使是toast這樣的工具UI。
  6. 等等等等......

Flutter全域性BuildContext解決方案

社群推薦方案

在Android中，我們可以用getApplicationContext解決全域性context問題，Flutter官方並沒有提供建議的方案，不過社群有一些推薦的解決方案，比如使用GlobalKey的方案：

@override
Widget build(BuildContext context) {
  return MaterialApp(
    navigatorKey: globalNavigatorKey, // GlobalKey()
  )
}

globalNavigatorKey.currentState.push(
  MaterialPageRoute(builder: (context) => SomePage()),
);
複製程式碼

首先我們定義一個GlobalKey，然後在初始化MaterialApp的時候傳入navigatorKey，然後我們在需要使用路由跳轉的地方，不使用原始的方式，而使用navigatorKey來呼叫：

globalNavigatorKey.currentState.push(...)
複製程式碼

社群推薦方案的問題

看起來上述方案好像可以解決問題，但是目前只能解決頁面路由跳轉問題，而如果使用Overlays（比如Dialog）、MediaQuery等就會出現問題了，error提示context不合法:

The context used to push or pop routes from the Navigator must be that of a widget that is a descendant of a Navigator widget.
複製程式碼

而直接使用navigatorKey.currentState.context獲取全域性context也會出現同樣的error。

OneContext解決方案

在嘗試眾多方案都失敗後，我們仍然在繼續尋找更好的方案，最終找到了OneContext方案，倉庫地址: one_context。

Flutter全域性BuildContext解決方案

OneContext是一個非常新的庫，2020年5月初才發第一個版本，目前還未發1.0版本。不過API的完成度還是很高的。

使用方式

使用OneContext，首先我們需要在MaterialApp中配置OneContext：

MaterialApp(
  builder: (BuildContext context, Widget child) {
    return OneContext().builder(context, child, initialRoute: 'home');
  },
  /// builder: OneContext().builder, /// 如果不需要initialRoute，可以使用這種方式
  navigatorKey: OneContext().key,
)
複製程式碼

然後，需要使用context的地方，全部通過OneContext來呼叫：

OneContext().pushNamed('calendar');

OneContext().showModalBottomSheet(
  builder: (BuildContext context) {
    return Container();
  },
);
OneContext().showDialog(...);
OneContext().addOverlay(...);
複製程式碼

路由跳轉

OneContext().pushNamed('/second');
OneContext().push(MaterialPageRoute(builder: (_) => SecondPage()));
OneContext().pop();
複製程式碼

Overlays操作

/// 展示ModalBottomSheet
OneContext().showModalBottomSheet(
  builder: (BuildContext context) {
    return Container();
  },
);

/// 新增移除覆蓋物
OneContext().addOverlay(
    overlayId: myCustomAndAwesomeOverlayId,
    builder: (_) => MyCustomAndAwesomeOverlay()
);

OneContext().removeOverlay(myCustomAndAwesomeOverlayId);

/// 載入提示
OneContext().showProgressIndicator();
OneContext().showProgressIndicator(
    backgroundColor: Colors.blue.withOpacity(.3),
    circularProgressIndicatorColor: Colors.white
);
OneContext().hideProgressIndicator();
複製程式碼

主題和媒體查詢

print('Platform: ' + OneContext().theme.platform);
print('Orientation: ' + OneContext().mediaQuery.orientation);
複製程式碼

主題模式修改

OneContext().oneTheme.toggleMode();

OneContext().oneTheme.changeDarkThemeData(
  ThemeData(
    primarySwatch: Colors.amber,
    brightness: Brightness.dark
 )
);
複製程式碼

Flutter全域性BuildContext解決方案

原理分析

從OneContext配置中，可以看出來，OneContext最關鍵的一句配置是OneContext().builder，我們點進去看原始碼：

Widget builder(BuildContext context, Widget widget,
    {Key key,
    MediaQueryData mediaQueryData,
    String initialRoute,
    Route<dynamic> Function(RouteSettings) onGenerateRoute,
    Route<dynamic> Function(RouteSettings) onUnknownRoute,
    List<NavigatorObserver> observers = const <NavigatorObserver>[]}) =>
ParentContextWidget(
  child: widget,
  mediaQueryData: mediaQueryData,
  initialRoute: initialRoute,
  onGenerateRoute: onGenerateRoute,
  onUnknownRoute: onUnknownRoute,
  observers: observers,
);


class ParentContextWidget extends StatelessWidget {
  /// ...

  @override
  Widget build(BuildContext context) {
    return MediaQuery(
      data: mediaQueryData ?? MediaQuery.of(context),
      child: Navigator(
        initialRoute: initialRoute,
        onUnknownRoute: onUnknownRoute,
        observers: observers,
        onGenerateRoute: onGenerateRoute ??
            (settings) => MaterialPageRoute(
                builder: (context) => OneContextWidget(
                      child: child,
                    )),
      ),
    );
  }
}
複製程式碼

從原始碼中我們可以看到：

  • 在builder函式中，OneContext重寫了Widget結構中的MediaQuery和Navigator的初始化配置，並在每個頁面的Widget外層包了一層OneContextWidget，然後就可以在OneContextWidget拿到內層context，這個context可以用於絕大部分場景。
  • 在OneContextWidget中，提供了Overlay的常用方法，並繫結了內部的context物件，從而解決Overlay的context獲取問題。
import 'package:flutter/material.dart';
import 'package:one_context/src/controllers/one_context.dart';

class OneContextWidget extends StatefulWidget {
  final Widget child;
  OneContextWidget({Key key, this.child}) : super(key: key);
  _OneContextWidgetState createState() => _OneContextWidgetState();
}

class _OneContextWidgetState extends State<OneContextWidget> {
  @override
  void initState() {
    super.initState();
    OneContext().registerDialogCallback(
        showDialog: _showDialog,
        showSnackBar: _showSnackBar,
        showModalBottomSheet: _showModalBottomSheet,
        showBottomSheet: _showBottomSheet);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Builder(
        builder: (innerContext) {
          OneContext().context = innerContext;
          return widget.child;
        },
      ),
    );
  }

  Future<T> _showDialog<T>(...){...}

  ScaffoldFeatureController<SnackBar, SnackBarClosedReason> _showSnackBar(...){ ... }

  Future<T> _showModalBottomSheet<T>(...){ ... }

  PersistentBottomSheetController<T> _showBottomSheet<T>(...) { ... }
}
複製程式碼
  • OneContextWidget在每次build時，會更新全域性context：
@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Builder(
      builder: (innerContext) {
        OneContext().context = innerContext;
        return widget.child;
      },
    ),
  );
}
複製程式碼

Flutter全域性BuildContext解決方案

接入風險

  1. 接入OneContext後，務必對原有業務流程進行完成迴歸，尤其是頁面返回邏輯（我們就被坑了一次，Navigator.pop無法正確關閉Dialog）
  2. 頁面返回邏輯，Overlay的場景，需要使用OneContext().popDialog()代替Navigator.pop，切記切記。

總結

到目前我們解決了Flutter全域性BuildContext的問題，但這其實並不應該是最終的方案，OneContext是一個侵入性比較高的方案，Flutter官方應該提供更好的方案來解決這個問題。

講到這裡，還並沒有完成基礎框架的搭建，後面我們會講解更多的Flutter架構設計內容，比如：通知、分享、UI設計等等。

持續分享閃點清單在Flutter上的開發經驗。閃點清單，一款懸浮清單軟體：

閃點清單，一款懸浮清單軟體

相關文章