之前用Scaffold的showModalBottomSheet方法实现了一个半屏幕弹窗.后来需求调整,要改成背景完全透明的.
Future<T> showModalBottomSheet<T>({
@required BuildContext context,
@required WidgetBuilder builder,
Color backgroundColor,
double elevation,
ShapeBorder shape,
Clip clipBehavior,
bool isScrollControlled = false,
bool useRootNavigator = false,
bool isDismissible = true,
})
showModalBottomSheet的backgroundColor参数确实是可以修改整体的背景颜色, 但即使设置为Colors.transparent也是自带半透明的黑,而且不能完全透明.
试了几个方案还是没有解决,例如包裹opacity/用route设置barrier颜色/XXX.
开始搜索吧,百度一下没什么靠谱的答案,在stackoverflow上有几个类似的提问,下面是两个最接近的.
- https://stackoverflow.com/questions/52663445/flutter-show-bottomsheet-transparency
- https://stackoverflow.com/questions/51204179/how-to-change-the-background-color-of-bottomsheet-in-flutter
但是仍然没有解决.
感觉自己思维被局限在这一个showModalBottomSheet方法里了.
喝口水冷静冷静,换个思路,换个dialog实现起来很简洁嘛
showGeneralDialog(
context: context,
barrierDismissible:true,
barrierLabel: '',
barrierColor: Colors.transparent,
transitionDuration: Duration(milliseconds: 200),
pageBuilder: (BuildContext context, Animation<double> animation,Animation<double> secondaryAnimation) {
return Scaffold(backgroundColor: Colors.transparent, body:yourWidget);
})
LGTM : )
