alibaba / alibaba/flutter_boost

[Bug]: 从iOS原生端模态弹出Flutter页面,Flutter页面设置透明,结果Flutter页面呈现白色全屏

Open
#2,155 13 comments 0 reactions 0 assignees View on GitHub
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打印

image
发现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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.