showModalBottomSheet() not opening bottom modal in Flutter

Programming
, ,
1

me is with the code below. The showModalBottomSheet does not create a modal bottom sheet. I am new to flutter and dart and would appreciate any help.

```
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        appBar: new AppBar(title: const Text('Modal bottom sheet')),
        body: new Center(
          child: new RaisedButton(
            child: const Text('SHOW BOTTOM SHEET'),
            onPressed: () {
              showModalBottomSheet<void>(
                context: context,
                builder: (BuildContext context) {
                  return new Container(
                    child: new Padding(
                      padding: const EdgeInsets.all(32.0),
                      child: new Text(
                        'This is the modal bottom sheet. Click anywhere to dismiss.',
                        textAlign: TextAlign.center,
                        style: new TextStyle(
                          color: Theme.of(context).accentColor,
                          fontSize: 24.0
                        )
                      )
                    )
                  );
                }
              );
            }
          )
        )
      )
    );
  }
}
```

I am having difficulty getting the showModalBottomSheet to create a modal bottom sheet. I am new to flutter and dart and would appreciate any help.
The code below should pop up a modal bottom sheet, but it does not seem to be working.

```
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        appBar: new AppBar(title: const Text('Modal bottom sheet')),
        body: new Center(
          child: new RaisedButton(
            child: const Text('SHOW BOTTOM SHEET'),
            onPressed: () {
              showModalBottomSheet<void>(
                context: context,
                builder: (BuildContext context) {
                  return new Container(
                    child: new Padding(
                      padding: const EdgeInsets.all(32.0),
                      child: new Text(
                        'This is the modal bottom sheet. Click anywhere to dismiss.',
                        textAlign: TextAlign.center,
                        style: new TextStyle(
                          color: Theme.of(context).accentColor,
                          fontSize: 24.0
                        )
                      )
                    )
                  );
                }
              );
            }
          )
        )
      )
    );
  }
}
```
2

The showModalBottomSheet method requires a builder function that returns a widget to be displayed inside the bottom sheet. In the provided code, the builder function is returning a Container with a Padding and a Text widget inside it. However, the Container does not have a fixed height, so it does not take up any space and the Text widget is not visible. To fix this, you can set a fixed height for the Container, or use a different widget like ListView that can expand to fill the available space. Here’s an updated version of the code that uses a ListView:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        appBar: new AppBar(title: const Text('Modal bottom sheet')),
        body: new Center(
          child: new RaisedButton(
            child: const Text('SHOW BOTTOM SHEET'),
            onPressed: () {
              showModalBottomSheet<void>(
                context: context,
                builder: (BuildContext context) {
                  return new Container(
                    height: 200.0,
                    child: new ListView(
                      children: <Widget>[
                        new Padding(
                          padding: const EdgeInsets.all(32.0),
                          child: new Text(
                            'This is the modal bottom sheet. Click anywhere to dismiss.',
                            textAlign: TextAlign.center,
                            style: new TextStyle(
                              color: Theme.of(context).accentColor,
                              fontSize: 24.0
                            )
                          )
                        )
                      ]
                    )
                  );
                }
              );
            }
          )
        )
      )
    );
  }
}