Flutter 中 BuildContext 引发的血案

今天和各位分享一个博主在实际开发中遇到的问题，以及解决方法。废话不多说，我们先来看需求：

相信这个弹出菜单视图都有见过吧？下面重点来了：在本次的项目需求中，该视图的选项文字是由服务端返回的。也就是说，这些选项的内容和个数都不固定，因此不能将其在代码中写固定值。

如上所示，需要将 Context 传递到 CustomBottomSheet 的构造函数中，否则在绘制时会引发错误。

问题出在哪儿？

Flutter 中的 BuildContext 是一个非常重要的概念，它包含了有关当前小部件及其父小部件树的信息。在 Flutter 中，构建小部件树的过程称为“构建”。每个小部件都有一个构建方法，它会返回一个新的子树。

当我们调用 BuildContext.build() 方法时，Flutter 会调用小部件的构建方法，并将该方法返回的新子树附加到当前子树中。该过程一直持续到构建整个小部件树。

在我们的例子中，CustomBottomSheet 小部件需要访问其父小部件的 BuildContext，以便它可以访问其父小部件的状态和依赖项。但是，在我们的代码中，我们没有将 BuildContext 传递给 CustomBottomSheet 的构造函数。这会导致 Flutter 在尝试构建 CustomBottomSheet 小部件时引发错误。

解决方案

为了解决此问题，我们需要将 BuildContext 传递给 CustomBottomSheet 的构造函数。我们可以通过在 CustomBottomSheet 类中添加一个构造函数来实现这一点，该构造函数接受 BuildContext 作为参数。

class CustomBottomSheet extends StatelessWidget {
  final BuildContext context;

  const CustomBottomSheet({required this.context});

  @override
  Widget build(BuildContext context) {
    // ...
  }
}

然后，我们在调用 CustomBottomSheet 的构造函数时，需要将 BuildContext 作为参数传递。

showModalBottomSheet(
  context: context,
  builder: (BuildContext context) {
    return CustomBottomSheet(context: context);
  },
);

这样，CustomBottomSheet 小部件就可以访问其父小部件的 BuildContext，并且不会引发错误。

结论

BuildContext 是 Flutter 中一个非常重要的概念，了解其工作原理非常重要。通过理解 BuildContext 的作用，我们可以编写更强大、更健壮的 Flutter 应用程序。