showBottomSheet throwing an error complaining no scaffold - flutter

Question

Redirecting from LoginPage to OnBoarding. While onboarding click on a button need to show the bottom sheet. Using the Named routes for navigation.
Later in the Loginpage will be navigating to the onboarding using Navigator.pushNamed(context, '/onboarding'); to redirect.
here is the main.dart
void main() {
runApp(
MultiProvider(
providers: [ChangeNotifierProvider(create: (context) => ThemeModel())],
child: DevicePreview(
enabled: !kReleaseMode,
builder: (context) => MyApp(),
),
),
);
SystemChrome.setEnabledSystemUIOverlays([]);
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
locale: DevicePreview.of(context).locale, // <--- Add the locale
builder: DevicePreview.appBuilder, // <--- Add the builder
theme: Provider.of<ThemeModel>(context).currentTheme,
debugShowCheckedModeBanner: false,
initialRoute: '/',
routes: {
// When navigating to the "/" route, build the FirstScreen widget.
'/': (context) => LoginPage(),
// When navigating to the "/second" route, build the SecondScreen widget.
'/onboarding': (context) => OnboardingPage(),
'/home': (context) => Home(),
},
);
}
}
here is the code snippet for the buttonClick and then open the bottomsheet
_getButton(String hint, int index, BuildContext context) {
return MaterialButton(
height: 58,
minWidth: 340,
shape: RoundedRectangleBorder(borderRadius: new BorderRadius.circular(12)),
onPressed: () {
if(index == 1){
**showBottomSheet(
context: context,
builder: (context) => BasicProfileBottomSheetWidget());
}**
},
child: Text(
hint,
style: TextStyle(
fontSize: 22,
color: Colors.black,
),
),
color: Colors.white,
);
}
Here is my widget tree
Here is the error.
[38;5;248m════════ Exception caught by gesture ═══════════════════════════════════════════[39;49m
[38;5;244mThe following assertion was thrown while handling a gesture:[39;49m
No Scaffold widget found.
[38;5;244mOnboardingPage widgets require a Scaffold widget ancestor.[39;49m
[38;5;244mThe specific widget that could not find a Scaffold ancestor was: OnboardingPage[39;49m
[38;5;244mstate: _OnboardingPageState#4c2bb[39;49m
[38;5;244mThe ancestors of this widget were[39;49m
[38;5;244mMaterialApp[39;49m
[38;5;244mstate: _MaterialAppState#e362b[39;49m
[38;5;244mMyApp[39;49m
[38;5;244mdependencies: [_InheritedProviderScope<ThemeModel>][39;49m
[38;5;244mDevicePreview[39;49m
[38;5;244mstate: DevicePreviewState#2a192[39;49m
[38;5;244mChangeNotifierProvider<ThemeModel>[39;49m
[38;5;244mvalue: Instance of 'ThemeModel'[39;49m
[38;5;244mlistening to value[39;49m
[38;5;244mMultiProvider[39;49m
[38;5;244m...[39;49m
[38;5;248mTypically, the Scaffold widget is introduced by the MaterialApp or WidgetsApp widget at the top of your application widget tree.[39;49m
[38;5;244mWhen the exception was thrown, this was the stack[39;49m
[38;5;244m#0 debugCheckHasScaffold.<anonymous closure>[39;49m
[38;5;244m#1 debugCheckHasScaffold[39;49m
[38;5;244m#2 showBottomSheet[39;49m
[38;5;248m#3 _getButton.<anonymous closure>[39;49m
[38;5;244m#4 _InkResponseState._handleTap[39;49m
[38;5;244m...[39;49m
[38;5;244mHandler: "onTap"[39;49m
[38;5;244mRecognizer: TapGestureRecognizer#bb0ca[39;49m
[38;5;244mdebugOwner: GestureDetector[39;49m
[38;5;244mstate: ready[39;49m
[38;5;244mwon arena[39;49m
[38;5;244mfinalPosition: Offset(422.5, 960.5)[39;49m
[38;5;244mfinalLocalPosition: Offset(166.7, 29.3)[39;49m
[38;5;244mbutton: 1[39;49m
[38;5;244msent tap down[39;49m
[38;5;248m════════════════════════════════════════════════════════════════════════════════[39;49m

Answer 1

Try putting the Scaffold widget immediately after the MaterialApp, then OnBoardingPage can be inside the body of the Scaffold

Answer 2

Also, without using globalkey workaround below code worked..No clue on what is the actual root cause and fix though :)
showModalBottomSheet(
context: context,
isScrollControlled: true,
backgroundColor: Colors.transparent,
builder: (context) => Container(
height: MediaQuery.of(context).size.height * 0.50,
decoration: new BoxDecoration(
color: Colors.white,
borderRadius: new BorderRadius.only(
topLeft: const Radius.circular(25.0),
topRight: const Radius.circular(25.0),
),
),
child: Center(
child: Text("Modal content goes here"),
),
),
);