Flutter上下文提供插件build_context_provider的使用

build_context_provider 是一个允许你在Flutter widgets之外运行需要 BuildContext 的函数的包。这使得在没有直接访问到 BuildContext 的地方（例如业务逻辑层或服务类）调用与UI交互的方法变得可能。下面我们将详细介绍如何安装、使用以及一些示例代码来帮助你更好地理解这个插件。

安装

要使用 build_context_provider，首先你需要将其添加到你的项目依赖中。然后，在应用的根部放置 ListenerThatRunsFunctionsWithBuildContext() 组件以确保所有需要 BuildContext 的操作都能正常工作。

return Stack(
  children: [
    child,
    const ListenerThatRunsFunctionsWithBuildContext(),
  ],
);

使用

你可以通过 BuildContextProvider.call() 方法包装任何你想执行且需要 BuildContext 的函数。这样做的好处是，这些函数可以在不需要 BuildContext 的地方被调用。

BuildContextProvider.call(
  (context) => Navigator.pushNamed(context, '/somewhere'),
);

示例

这里有一个完整的例子，展示了如何在一个不直接拥有 BuildContext 的地方导航到另一个页面：

class GoToProfilePage {
  static void call() {
    BuildContextProvider.call(
      (context) => Navigator.pushNamed(context, '/profile'),
    );
  }
}

// 这行代码可以在任何地方使用。如你所见，你不再受限于构建上下文。
GoToProfilePage.call();

如果你需要从函数返回值，可以通过包裹你的函数并捕获其结果来实现：

bool aValueToBeReturnedFromTheFunction = false;

bool functionThatReturnsValue(BuildContext context) {
  Navigator.of(context).pushNamed('/profile');
  return true;
}

void aFunctionThatCapturesReturnedValue(BuildContext context) {
  aValueToBeReturnedFromTheFunction = functionThatReturnsValue(context);
}

BuildContextProvider()(aFunctionThatCapturesReturnedValue);

expect(aValueToBeReturnedFromTheFunction, isTrue);

设计原则

• 无外部库：此包尽量减少对外部库的依赖。
• 单一职责：只做一件事，并且做好这件事。

完整示例代码

接下来是一个更全面的例子，它演示了如何在实际项目中使用 build_context_provider 包。此示例包括两个屏幕之间的导航和显示SnackBar的功能，而这些功能都是在没有直接访问到 BuildContext 的情况下完成的。

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

void _displaySnackbar() {
  BuildContextProvider()((context) {
    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(
        content: _Snackbar(),
      ),
    );
  });
}

class _App extends StatelessWidget {
  const _App({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: '/first',
      routes: {
        '/first': (context) => const _Layout(child: _FirstScreen()),
        '/second': (context) => const _Layout(child: _SecondScreen()),
      },
    );
  }
}

class _FirstScreen extends StatelessWidget {
  const _FirstScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Text('First screen'),
    );
  }
}

class _SecondScreen extends StatelessWidget {
  const _SecondScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Text('Second screen'),
    );
  }
}

class _Layout extends StatelessWidget {
  final Widget child;
  const _Layout({Key? key, required this.child}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final buildContextProvider = BuildContextProvider();
    return Scaffold(
      body: SafeArea(
        child: Column(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            child,
            const ListenerThatRunsFunctionsWithBuildContext(),
          ],
        ),
      ),
      persistentFooterButtons: [
        ElevatedButton(
          child: const Text('Go to first screen'),
          onPressed: () => buildContextProvider(
            (context) => Navigator.pushNamed(context, '/first'),
          ),
        ),
        ElevatedButton(
          child: const Text('Go to second screen'),
          onPressed: () => buildContextProvider(
            (context) => Navigator.pushNamed(context, '/second'),
          ),
        ),
      ],
      floatingActionButton: const FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: _displaySnackbar,
      ),
    );
  }
}

class _Snackbar extends StatelessWidget {
  const _Snackbar({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 100,
      child: Column(
        children: const [
          Text('If you see this snackbar then everything is working properly.'),
          Text(
            'Function that creates this snackbar was called without a build context.',
          )
        ],
      ),
    );
  }
}

void main(List<String> args) {
  runApp(const _App());
}

这段代码创建了一个简单的Flutter应用程序，其中包含两个屏幕（_FirstScreen 和 _SecondScreen），并且可以通过底部按钮进行切换。此外，还有一个浮动按钮用于展示SnackBar，即使是在没有直接获取到 BuildContext 的地方也可以成功触发。