when i use tween animation in app bar flexibleSpace, ios swipe navigation that time background image overlape

Question

When utilizing tween animation within the flexibleSpace of the AppBar and performing swipe navigation on iOS, there is an issue where the image experiences overlap.

this actual result.

i have expect result

class SecondScreen extends StatelessWidget {
@OverRide
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.red,
appBar: AppBar(
flexibleSpace: CommunityBannerInAppBarWidget(),
),
body: const Center(child: Text('second Screen')),
);
}
}

class CommunityBannerInAppBarWidget extends StatefulWidget {
CommunityBannerInAppBarWidget({
Key? key,
}) : super(key: key);
@OverRide
State createState() =>
_CommunityBannerInAppBarWidgetState();
}

class _CommunityBannerInAppBarWidgetState
extends State {
@OverRide
Widget build(BuildContext context) {
return TweenAnimationBuilder(
tween: Tween(begin: 1.0, end: 1.5),
duration: const Duration(milliseconds: 500),
builder: (context, progress, child) {
return Transform.scale(scale: progress, child: 

);
},
);
}
}

Answer 1

You just need to clip the content of the second page using a widget like ClipRect

update your second screen:

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ClipRect( // add this widget 
      child: Scaffold(
        backgroundColor: Colors.red,
        appBar: AppBar(
          flexibleSpace: CommunityBannerInAppBarWidget(),
        ),
        body: const Center(child: Text('Second Screen')),
      ),
    );
  }
}

It should look like this after the change :