The PlatformView was working perfectly before the upgrade, then I updated Flutter to version 3.0.1 on the stable channel. Then, suddenly a strange behavior occurs.
I created a GIF for your reference. The strange behaviors are:
- The PlatformView gets on top of all other widgets. You can see the
DropDownMenugets behind it. And I have tried using aStackor other widgets, but it does not work. PlatformView always gets on top of things. - It gets even weirder. The PlatformView floats on the top of the screen when we go to the next page with
Navigator.push. As you can see there is another picture behind it. Even when there is noPlatformViewon the other page.
For the rest on the implementation for the NativeView, I followed the documentation here.
Once again, it was working perfectly before the upgrade.
What should've happened was the PlatformView should not get on top of other Widgets unless specified with Stack.
And when I go to the next page, it should be behind the new page and should not float around.
Did I miss anything? Please let me know. Thanks
My code on the Dart side:
main.dart
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
late EffectController _controller;
Uint8List? image;
Uint8List? imageOutline;
bool noLine = false;
String effectValue = 'No effect';
String filterValue = 'No filter';
static const imagePath = 'assets/images/test_image.jpg';
static const imageOutlinePath = 'assets/images/test_image_outline.png';
void resetValues() {
image = null;
imageOutline = null;
noLine = false;
effectValue = 'No effect';
filterValue = 'No filter';
}
@override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: FloatingActionButton(
onPressed: () => Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
PreviewPage(Image.memory(imageOutline!))))),
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SizedBox(
width: 400,
height: 400,
child: image == null
? TextButton(
onPressed: () async {
image = (await rootBundle.load(imagePath))
.buffer
.asUint8List();
imageOutline =
(await rootBundle.load(imageOutlinePath))
.buffer
.asUint8List();
setState(() {});
},
child: const Text("Apply Image"))
: NativeView(
onViewCreated: (controller) {
_controller = controller;
},
image: image!,
imageOutline: imageOutline!,
noLine: noLine,
width: 400,
height: 400,
// width and height is required for ios, CGRect is always zero, its a flutter bug
// setting bounds manually int docs below
// https://docs.flutter.dev/development/platform-integration/platform-views#on-the-platform-side-1
)),
//NOTE: image should be ready when showing NativeView
SingleChildScrollView(
scrollDirection: Axis.horizontal,
padding: const EdgeInsets.fromLTRB(10, 0, 10, 0),
child: image == null
? Container()
:
DropdownButton<String>(
value: effectValue,
icon: const Icon(Icons.arrow_downward_rounded),
elevation: 16,
style: const TextStyle(color: Colors.deepPurple),
underline: Container(
height: 2,
color: Colors.deepPurpleAccent,
),
onChanged: (String? newValue) {
},
items: <String>[
'No effect',
'Item 20',
'Item 19',
'Item 18',
'Item 17',
'Item 16',
'Item 15',
'Item 14',
'Item 13',
'Item 12',
'Item 11',
'Item 10',
'Item 9',
'Item 8',
'Item 7',
'Item 6',
'Item 5',
'Item 4',
'Item 3',
'Item 2',
'Item 1',
'Item 0',
].map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList()),
),
Visibility(
visible: image != null,
child: TextButton(
onPressed: () {
setState(() {
resetValues();
});
},
child: const Text("Remove Image")),
),
],
),
));
}
}
Here is my flutter doctor -v
[✓] Flutter (Channel stable, 3.0.1, on macOS 12.1 21C52 darwin-x64, locale en-US)
• Flutter version 3.0.1 at /Users/ME/development/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision fb57da5f94 (4 days ago), 2022-05-19 15:50:29 -0700
• Engine revision caaafc5604
• Dart version 2.17.1
• DevTools version 2.12.2
• Pub download mirror https://pub.flutter-io.cn
• Flutter download mirror https://storage.flutter-io.cn
Checking Android licenses is taking an unexpectedly long time...[✓] Android toolchain - develop for Android devices (Android SDK version 32.0.0)
• Android SDK at /Volumes/ME/Applications/Android/sdk
• Platform android-32, build-tools 32.0.0
• ANDROID_HOME = /Volumes/ME/Applications/Android/sdk
• Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
• All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS (Xcode 13.3.1)
• Xcode at /Applications/Xcode.app/Contents/Developer
• CocoaPods version 1.11.2
[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 2021.2)
• Android Studio at /Applications/Android Studio.app/Contents
• Flutter plugin can be installed from:
https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
[✓] VS Code (version 1.67.1)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.8.0
[✓] Connected device (3 available)
• SM G960U1 (mobile) • 5a53414a33573398 • android-arm64 • Android 10 (API 29)
• macOS (desktop) • macos • darwin-x64 • macOS 12.1 21C52 darwin-x64
• Chrome (web) • chrome • web-javascript • Google Chrome 101.0.4951.64
[✓] HTTP Host Availability
• All required HTTP hosts are available
• No issues found!