alibaba / alibaba/flutter_boost
[Bug]: 从iOS原生端模态弹出Flutter页面,Flutter页面设置透明,结果Flutter页面呈现白色全屏
- Dominant language
- Dart
- Stars
- 7.2k
- Forks
- 1.3k
- PR merge metrics
- No merged PRs in 30d
Description
### 请描述遇到的问题,以及您所期望的正确的结果
iOS原生端:
```
let vc:FBFlutterViewContainer = FlutterVC()
vc.setName(options.pageName, uniqueId: options.uniqueId, params: options.arguments,opaque: options.opaque)
vc.view.backgroundColor = .clear
self.present(vc, animated: true, completion: nil)
```
Flutter端路由代理:
```
RouterPath.memberAlert: (settings, uniqueId) {
return ModalBottomSheetRoute(
settings: settings,
enableDrag: true,
isDismissible: true,
backgroundColor: Colors.transparent,
modalBarrierColor: Colors.transparent,
builder: (context) {
// return const MemberAlert();
return AnimatedPadding(
padding: MediaQuery.of(context).viewInsets,
// padding: EdgeInsets.zero,
duration: const Duration(milliseconds: 100),
curve: Curves.decelerate,
child: const MemberAlert());
},
isScrollControlled: false,
);
}
```
Widget
```
const MemberAlert({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.transparent,
body: Align(
alignment: Alignment.bottomCenter,
child: ClickWidget(
onTap: () => Nav.unfocus(),
child: ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(12.r),
topRight: Radius.circular(12.r)),
child: Container(
height: 280.h,
padding: EdgeInsets.symmetric(horizontal: 24.h),
color: Colors.white,
// width: 1.sw,
child: Column(
children: [
Container(
margin: EdgeInsets.only(top: 8.h),
width: 28.w,
height: 4.h,
decoration: BoxDecoration(
color: rgba(221, 222, 226, 1),
borderRadius: BorderRadius.circular(2.r)),
),
Box.gapV(41.h),
TextWidget(
MemberKeys.todaysFreeAlChatUsedUp.tr,
fontSize: 28.sp,
textAlign: TextAlign.center,
color: rgba(1, 1, 1, 1),
style: TextWidgetStyle.bold,
),
Box.gapV(12.h),
TextWidget(
MemberKeys.upgradeForUnlimitedAlChat.tr,
textAlign: TextAlign.center,
fontSize: 14.sp,
color: rgba(1, 1, 1, 1),
style: TextWidgetStyle.regular,
),
Box.gapV(24.h),
ClickableContainer(
onTap: () {
Nav.pushReplacement(RouterPath.member);
// Navigator.of(context).pop();
// Nav.push(RouterPath.member);
},
alignment: Alignment.center,
// width: 1.sw,
height: 44.h,
// padding: EdgeInsets,
borderRadius: BorderRadius.circular(12.r),
color: rgba(42, 112, 255, 1),
child: TextWidget(
MemberKeys.upgrade.tr,
fontSize: 16.sp,
color: Colors.white,
style: TextWidgetStyle.bold,
),
),
Box.gapV(30.h),
],
),
),
),
),
),
);
}
```
xCode , Debug View Hierarchy打印
发现FlutterView背景是UIExtendedGrayColorSpace
希望能在现有的页面之上,弹出一个透明的提示框
### 请说明如何操作会遇到上述问题
_No response_
### 在下面填入关键复现代码
```
```
### 复现的平台
iOS
### Flutter SDK版本
3.22.0
### FlutterBoost版本
master分支
### 是否延迟初始化FlutterBoost
No
### 解决方案
Contributor guide
No contributing guide indexed for this repository
Research direction
Reproduce the iOS case using FBFlutterViewContainer/FlutterVC with setName and a transparent ModalBottomSheetRoute, then inspect the FlutterView in Xcode's Debug View Hierarchy. Compare the native presentation and Flutter route configuration to determine why the view becomes white. Done means the Flutter prompt appears transparently over the existing native page on iOS with Flutter SDK 3.22.0.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- dart, ios
- Domain
- mobile-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 32/100