showBottomSheet throwing an error complaining no scaffold

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

Thank you @ByteMe. I just added the code snippet for the showbottomsheet — Sowmyan Soman, Jul 20 '20 at 15:54

score 0 · Answer 1 · answered Jul 20 '20 at 15:51

0

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

answered Jul 20 '20 at 15:51

Alexandru

143
9

Just pasted the main.dart code. Can you help me understand how can I wrap the Scaffold immediately after MaterialApp> – Sowmyan Soman Jul 20 '20 at 15:58
You can open the `OnBoardingPage` and the first widget should be `Scaffold`. Do the same with the other pages. You can press ALT+ENTER after you click on the first widget name, and click on `Wrap with Widget` and set it to `Scaffold` – Alexandru Jul 20 '20 at 16:01
Thanks. If you look at the screenshot Scaffold is the immediate widget in OnboardingPage. Am I missing anything ? Here is the code snippet for the same. class _OnboardingPageState extends State { @override Widget build(BuildContext context) { return Scaffold( body: PageView( – Sowmyan Soman Jul 20 '20 at 16:07
Maybe this is the reason, check this answer, it might work: https://stackoverflow.com/a/60161353/6317556 – Alexandru Jul 20 '20 at 16:14
Thank you, the workaround mentioned in that link worked :) – Sowmyan Soman Jul 20 '20 at 17:33

score 0 · Answer 2 · answered Jul 20 '20 at 18:08

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"),
        ),
      ),
    );

showBottomSheet throwing an error complaining no scaffold

2 Answers2