showModalBottomSheet not opening a bottom sheet, No MediaQuery widget found exception

Question

I'm new to flutter and i've been trying to create a bottom sheet that opens up when you click on the floating action button. I followed so many tutorials on how to do and they all showed the same thing but whenever I try to implement it i just doesn't work and instead throws me a 'No MediaQuery widget found' error in the debug console.

My flutter code :

import 'package:flutter/material.dart';

void main() => runApp(MyApp());


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(child: Text('hello world')),
        floatingActionButton: FloatingActionButton(
          onPressed: () => showMe(context),
          child: Icon(Icons.add),
        ),
      ),
    );
  }

  void showMe(BuildContext context) {
    showModalBottomSheet(
        context: context,
        builder: (BuildContext contex) {
          return Column(
            children: <Widget>[
              ListTile(
                leading: Icon(Icons.message),
                title: Text('Send a message'),
                onTap: () {
                  Navigator.pop(context);
                  print('done !');
                },
              ),
            ],
          );
        });
  }
}

Output of the Debug Console

════════ Exception caught by gesture ═══════════════════════════════════════════
The following assertion was thrown while handling a gesture:
No MediaQuery widget found.

MyApp widgets require a MediaQuery widget ancestor.
The specific widget that could not find a MediaQuery ancestor was: MyApp
The ownership chain for the affected widget is: "MyApp ← [root]"

Typically, the MediaQuery widget is introduced by the MaterialApp or WidgetsApp widget at the top of your application widget tree.

When the exception was thrown, this was the stack
#0      debugCheckHasMediaQuery.<anonymous closure> 
package:flutter/…/widgets/debug.dart:211
#1      debugCheckHasMediaQuery 
package:flutter/…/widgets/debug.dart:223
#2      showModalBottomSheet 
package:flutter/…/material/bottom_sheet.dart:469
#3      MyApp.showMe 
package:unitconverter/main.dart:21
#4      MyApp.build.<anonymous closure> 
package:unitconverter/main.dart:13
...
Handler: "onTap"
Recognizer: TapGestureRecognizer#e6e79
    debugOwner: GestureDetector
    state: possible
    won arena
    finalPosition: Offset(367.6, 640.7)
    finalLocalPosition: Offset(28.2, 29.3)
    button: 1
    sent tap down
════════════════════════════════════════════════════════════════════════════════

Answer 1

instead of passing a Scaffold as the home, create a StatefulWidget or StatelessWidget as your home and set your home attribute to the widget created

This should help you

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Home(),
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: (){
          showMe(context);
        },
      ),
    );
  }

  void showMe(BuildContext context) {
    showModalBottomSheet(
        context: context,
        builder: (BuildContext contex) {
          return Column(
            children: <Widget>[
              ListTile(
                leading: Icon(Icons.message),
                title: Text('Send a message'),
                onTap: () {
                  Navigator.pop(context);
                  print('done !');
                },
              ),
            ],
          );
        });
  }
}