I get this strange black border when I navigate in my (web) app. The "zoom" animation itself is desirable but I would like to get rid of the black border. Any ideas?
Note that there are no black layers below the content area - this looks like an animation glitch.
The following is an abbreviated version of my widgets and setup:
class MyScaffold extends StatelessWidget {
const MyScaffold({
super.key,
required this.state,
required this.child,
});
final GoRouterState state;
final Widget child;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: //...,
body: AdaptiveLayout( // https://pub.dev/packages/flutter_adaptive_scaffold
internalAnimations: false,
primaryNavigation: // `NavigationRail` for large screens
bottomNavigation: // `NavigationBar` for small screens
body: SlotLayout(
config: {
Breakpoints.smallAndUp: SlotLayout.from(
key: PortalScaffold.bodyKey,
builder: (_) => Container(
clipBehavior: Clip.hardEdge,
decoration: const BoxDecoration(),
constraints: const BoxConstraints.expand(),
child: child,
),
),
},
),
),
);
}
}
class MyPage extends StatelessWidget {
const MyPage({super.key});
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
final t = AppLocalizations.of(context)!;
return Scaffold(
body: Container(
color: theme.colorScheme.background,
constraints: const BoxConstraints.expand(),
child: Text(t.myPageLabel),
),
);
}
}
final _routerConfig = GoRouter(
// ...
routes: [
// ...
ShellRoute( // ShellRoute allows navigation widget to be retained on page changes
builder: (context, state, child) {
return MyScaffold(state: state, child: child);
},
routes: [
// ...
GoRoute(
path: // ...
builder: (context, state) => const MyPage(),
);
]
)
]
);
MaterialApp.router(
// ...
routerConfig: _routerConfig
);
The resulting layout tree:
.
└── MaterialApp
└── MyScaffold
└── Scaffold
└── AdaptiveLayout
└── SlotLayout
└── MyPage
└── Scaffold
└── // ...
Some rambling to "provide enough detail" for SO to accept my question:
Initially, I had the issue described here which I was able to get around by restructuring my code. From this I got the impression that the Scaffold needs to be an immediate descendant of the Navigator for page transitions to work as expected. However, given my current code I believe this to be the case. I therefore am unsure what is causing the current transition glitch.