flutter - 如何在 Flutter 中创建带有圆角的模态底页？

Question

showModalBottomSheet 不提供任何样式或装饰。我想创建类似 Google Tasks 底页的东西。

Answer 1

于 2019 年 8 月 5 日更新

您现在可以使用默认的 showModalBottomSheet 方法来执行此操作，该方法现在支持添加 ShapeBorder 和 backgroundColor!

showModalBottomSheet(
  shape: RoundedRectangleBorder(
     borderRadius: BorderRadius.circular(10.0),
  ),
  backgroundColor: Colors.white,
  ...
);

--

我决定查看 showModalBottomSheet 的实现并找到我自己的问题。事实证明，所需要的只是将模式的主要代码包装在包含 canvasColor: Colors.transparent 技巧的 Theme 小部件中。我还让自定义半径和模态本身的颜色变得更加容易。

您可以使用 package在酒吧或 gist包含相同的代码。不要忘记导入正确的包/文件。

showRoundedModalBottomSheet(
    context: context,
    radius: 20.0,  // This is the default
    color: Colors.white,  // Also default
    builder: (context) => ???,
);