Weird scaling of whole flutter view

[Xioshock]

I have a weird issue with scaling that I cannot fix. Look at these screenshots:

This is the correct state, how it should look:
[DELETED]

Then I go to another modal flutter screen, it's just a popup over this one:
[DELETED]

And finally when I dismiss the popup, the scaling is wrong on the original screen:
[DELETED]

It's doing it even even native push/pop transition. Do you have any idea how to fix this?

edit: I deleted the images, not sure if i can post these online yet.

[Xioshock]

I think this happens when the flutter controllers all have different sizes, it takes the size from the last one and scales by it

[xujim]

hi, Xioshock,
What kind of iOS device, when you met such problem? Is all the page list above are implemented by Dart?
could you provide a mini-reproducable example?

[Xioshock]

Yes they are all in dart, but have custom transition and the modal is a child of different UIViewController. I'll provide example in a bit.

[Xioshock]

I modified the swift example so it produces the bug: repo

Just build it in xcode, click Start and wait. It will push "first" and then "second" flutter widget with smaller sized window. If you go back to "first" it will be scaled.

[xujim]

I can reproduce it now, seems related to the underlying surface painting. I will work on it, but not sure when it will be solved.
By the way, can you pop the subview in "first" view directly. I think it would be ok bypassing the UIViewController.

[xujim]

hi Xioshock,
Finally, I figured out a workaround. For the second page, you can subclass a new VC(e.g MyFlutterVC) from FLBFlutterViewContainer, and override the viewWillDisappear method, as following:

- (void)viewWillDisappear:(BOOL)animated
{
    [super viewWillDisappear:animated]; 
    if([self.name isEqualToString:@"second"]){
        self.view.frame = CGRectMake(0, 0, 375, 812);
    }
}

then, in the onClickPushFlutterPage function, you can push the SECOND page like this:

DispatchQueue.main.asyncAfter(wallDeadline: .now() + 2) { [weak self] in
            
            let vc = UIViewController()
            vc.view.backgroundColor = .blue;
            let flutterVC = MyFlutterVC.init();
            flutterVC.view.backgroundColor = .white
            flutterVC.setName("second", params: [:])
            
            vc.addChildViewController(flutterVC)
            vc.view.addSubview(flutterVC.view)
            
            // this is just to show that the bug occurs when controllers have different sizes.
            flutterVC.view.frame = CGRect(x: 0, y: 0, width: 400, height: 400)
            
            self?.navigationController?.pushViewController(vc, animated: true)
        }

[xujim]

The root cause is Flutter's underlying draw mechanism, which only support single window. However, in the flutter boost, we try to support more than one VC, it is conflict with previous assumption.

[xujim]

Be more specific, when you change the frame of VC, it will updateViewportMetrics, which finally change the size of Window(owned by flutter). The window is global, and shared by all dart objects. Consequently, when you pop back to the first, the layer is drew incorrectly due to the size change of window.
To fix it you need to updateViewportMetrics when the "first" is appear. Unfortunately, updateViewportMetrics is private function of FlutterViewController. To workaround, you can reset the frame size in viewWillAppear method mentioned above, which will incur the viewDidLayout, and finally invoke updateViewportMetrics.

[Xioshock]

I see. Thank you, I'll try it out tommorow

[Xioshock]

thank you, it works.

If anyone else is interested, this is enough:

class FlutterVC: FLBFlutterViewContainer {
    
    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        
        view.setNeedsLayout()
        view.layoutIfNeeded()
    }
}

[he15his]

I found that if there is a keyboard input event, there will be a problem with zooming.

[Xioshock]

Yes, i came across it as well recently. Not sure what's causing it.