BottomSheet

BottomSheet

BottomSheetは、SnackBarのように画面下部から伸びてくる領域を作成できます。
一覧項目のメニューや、音楽再生のコントローラ、ヘルプなど色々な使い方ができます。

enum Answers{
  OK,
  CLOSE
}

class _MainPageState extends State<MainPage> {

  String _value = '';

  void _setValue(String value) => setState(() => _value = value);

  void _showBottom() async {
  
    var value = await showModalBottomSheet<Answers>(
      context: context,
      builder: (BuildContext context){
        return new Container(
          height: 250,
          padding: new EdgeInsets.all(10.0),
          child: new Column(
            children: <Widget>[
              new Text('複数行の内容を'),
              new Text('記載することができるので'),
              new Text('ヘルプなど'),
              new Text('ユーザ補助として'),
              new Text('つかえます。'),
              new RaisedButton(onPressed: () => Navigator.pop(context, Answers.OK), child: new Text('OK'),),
              new RaisedButton(onPressed: () => Navigator.pop(context, Answers.CLOSE), child: new Text('Close'),)
            ],
          ),
        );
      }
    );
    switch(value) {
      case Answers.OK:
        _setValue('OK');
        break;
      case Answers.CLOSE:
        _setValue('CLOSE');
        break;
    }
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('showModalBottomSheet'),
      ),
      body: new Center(
        child: new Column(
          children: <Widget>[
            new Text(_value, style: TextStyle(fontSize: 50, color: Colors.blueAccent, fontWeight: FontWeight.w600),),
            new RaisedButton(onPressed: _showBottom, child: new Text('Click me'),)
          ],
        ),
      ),
    );
  }
}
showModalBottomSheet

BottomSheetを作るにはまず、showModalBottomSheetにcontextを渡して、builderに内容を書きます。 この時showModalBottomSheetのジェネリクスには戻り値の型を定義してください。

showModalBottomSheet<Answers>(
  context: context,
  builder: (BuildContext context){
  }
);

内容に関しては自由に作成できるので、単純なリスト以外にも好きに配置して、表現することが可能です。

return new Container(
  height: 200,
  padding: new EdgeInsets.all(10.0),
  child: new Column(
    children: <Widget>[
      new Text('複数行の内容を'),
      new Text('記載することができるので'),
      new Text('ヘルプなど'),
      new Text('ユーザ補助として'),
      new Text('つかえます。'),
      new RaisedButton(onPressed: () => Navigator.pop(context, Answers.OK), child: new Text('OK'),),
      new RaisedButton(onPressed: () => Navigator.pop(context, Answers.CLOSE), child: new Text('Close'),)
    ],
  ),
);

showModalBottomSheetはshowDialogと同じくthenで書く方式とasync/awaitがあります。
今回はasync/awaitの書き方で戻り値を受け取っています。 ダイアログの閉じ方も、同じです。

また、GlobalKeyを使ってshowBottomSheetを利用すると以下のようになります。

class _MainPageState extends State<MainPage> {

  final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();

  void _showBottom(){
    _scaffoldKey.currentState
        .showBottomSheet<Null>((BuildContext context) {
          return new Container(
            height: 200,
            padding: new EdgeInsets.all(10.0),
            child: new Column(
              children: <Widget>[
                new Text('複数行の内容を'),
                new Text('記載することができるので'),
                new Text('ヘルプなど'),
                new Text('ユーザ補助としても'),
                new Text('つかえます。'),
                new RaisedButton(onPressed: () => Navigator.pop(context), child: new Text('Close'),)
              ],
            ),
          );
        }
    );
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      key: _scaffoldKey,
      appBar: new AppBar(
        title: new Text('showModalBottomSheet'),
      ),
      body: new Center(
        child: new Column(
          children: <Widget>[
            new RaisedButton(onPressed: _showBottom, child: new Text('Click me'),)
          ],
        ),
      ),
    );
  }
}

_scaffoldKeyをScaffoldクラスに渡し_scaffoldKey.currentStateを使ってshowBottomSheet表示することができます。