jonataslaw / getx

Open screens/snackbars/dialogs/bottomSheets without context, manage states and inject dependencies easily with Get.
MIT License
10.24k stars 1.61k forks source link

Android full screen transition issue #679

Open Jethro87 opened 3 years ago

Jethro87 commented 3 years ago

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.

screen-20201005-100956_2

Steps

  1. A full-screen route is pushed
  2. Another route is pushed on top of the previous route (in this case, the second route is not a full-screen route)
  3. A black box is visible during both the push and pop transition.

Flutter Version: 1.22.0-12.3.pre (current beta channel)

Getx Version: 3.12.1

eduardoflorence commented 3 years ago

Please, confirm that this also happens with flutter stable channel

Jethro87 commented 3 years ago

@eduardoflorence I can confirm that this also occurs on flutter stable 1.22.0, thanks.

roipeker commented 3 years ago

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).

Nipodemos commented 3 years ago

Could you provide us a reproducible code?

Jethro87 commented 3 years ago

@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'),
      ),
    );
  }
}
eduardoflorence commented 3 years ago

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.

eduardoflorence commented 3 years ago

Duplicate of #335

eduardoflorence commented 3 years ago

This solves the problem:

GetPage(
  name: '/test',
  page: () => TestPage(),
  fullscreenDialog: true,
  transition: Transition.fade,  // <-- Insert this
),
Jethro87 commented 3 years ago

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.

canyonwan commented 2 years ago

I have the same problem, you can see this snapshot image can resolve this problem, but my is ios 15, image image