Open Jethro87 opened 3 years ago
Please, confirm that this also happens with flutter stable channel
@eduardoflorence I can confirm that this also occurs on flutter stable 1.22.0, thanks.
This issue is, indeed, related to GetX Transitions
. seems like it runs the "opening" transition backwards (same transition curve) when u pop() or replace the route. And is a common problem when u specify different transitions for different pages as you move alone the navigation the stack... the "strange black-box" is just the app's background... cause the new page entering transition should be like the previous one (iOS style, from right to left).
Could you provide us a reproducible code?
@Nipodemos Please see below a reproducible code sample demonstrating this issue, thanks.
import 'package:flutter/material.dart';
import 'package:get/get.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return GetMaterialApp(
title: 'Flutter Demo',
getPages: [
GetPage(
name: '/test',
page: () => TestPage(),
fullscreenDialog: true,
),
GetPage(
name: '/test1',
page: () => TestPage1(),
),
],
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Demo Home Page'),
),
body: Center(
child: Container(),
),
floatingActionButton: FloatingActionButton.extended(
onPressed: () => Get.toNamed('/test'),
label: Text('Next'),
icon: Icon(Icons.arrow_forward),
),
);
}
}
class TestPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Test Page'),
),
floatingActionButton: FloatingActionButton.extended(
onPressed: () => Get.toNamed('/test1'),
label: Text('Next'),
icon: Icon(Icons.arrow_forward),
),
);
}
}
class TestPage1 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Test Page 1'),
),
);
}
}
That is why a complete source code is important for us to reproduce. The problem is related to the fullscreenDialog flag: true Flutter allows you to open routes "fullScreenDialog", which looks more like a dialog with an "x" in the upper corner to close, it is a navigation feature of Flutter itself, it is not something of Getx. See more details in the issue below.
Duplicate of #335
This solves the problem:
GetPage(
name: '/test',
page: () => TestPage(),
fullscreenDialog: true,
transition: Transition.fade, // <-- Insert this
),
Thanks, @eduardoflorence. I don't quite understand the reference to my other issue #335, though, as after some back and forth @jonataslaw appeared to be able to fix it for iOS. While I can specify the transition in GetPage
, this isn't a great solution as I want different transitions for iOS and Android.
I have the same problem, you can see this snapshot image can resolve this problem, but my is ios 15,
When I push a full-screen route in Android (v10, Pixel 3a and 4a), then push another route on top of the full-screen route, a strange black box appears behind the route. This happens when popping the route as well. Shown in gif below.
Steps
Flutter Version: 1.22.0-12.3.pre (current beta channel)
Getx Version: 3.12.1