web-dev-qa-db-ja.com

FlutterでBottomSheetの高さとborderRadiusをどのように調整しますか？

ここには明らかなものが足りないかもしれませんが、私のBottomSheetは画面の下半分しか占めていません。したがって、BottomSheet内にスクロール動作があります。 BottomSheetを増やして、ユーザーがあまりスクロールする必要がないようにしたいのですが。

さらに、ボーダーラディウスをBottomSheetの上部に追加して、より「モーダル」や「タブ」のように見せたいと思います。

コード：

void _showBottomSheet(BuildContext context) {
    showModalBottomSheet<Null>(
      context: context,
      builder: (BuildContext context) {
        return _bottomSheetScreen; // defined earlier on
      },
    );
}

私はもう試した：

showModalBottomSheet<Null>(
  context: context,
  builder: (BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        borderRadius: _borderRadius,
      ),
      height: 1000.0,
      child: _bottomSheetScreen,
    );
  },
);

しかし、それはBottomSheet内のコンテンツにのみ影響し、BottomSheet自体をカスタマイズしないようです。

material-designflutterbottom-sheet
10
Mary

ShowModalBottomSheetの代わりにshowBottomSheetを使用します

グローバルキーとリスナーを作成する

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

メソッドを記述してシートを表示します

  void _showBottomSheet() {
    setState(() {
      _showPersBottomSheetCallBack = null;
    });

    _scaffoldKey.currentState
        .showBottomSheet((context) {
      return new Container(
        height: MediaQuery.of(context).size.height-100.0,
        color: Colors.greenAccent,
        child: new Center(
          child: new Text("Hi BottomSheet"),
        ),
      );
    })
        .closed
        .whenComplete(() {
      if (mounted) {
        setState(() {
          _showPersBottomSheetCallBack = _showBottomSheet;
        });
      }
    });
  }

リスナーを初期化する

void initState() {
    super.initState();
    _showPersBottomSheetCallBack = _showBottomSheet;
  }

必要な場所でメソッドを呼び出す

new RaisedButton(
                  onPressed: _showPersBottomSheetCallBack,
                  child: new Text("Persistent"),
                ),

それが役に立てば幸い ！

3
Shyju Madathil

最近、私はこれの回避策を見つけました。アプリのテーマでcanvasColorプロパティをColors.transparentに設定することで、BottomSheetのオーバーレイを非表示にすることができます。

return new MaterialApp(
  title: 'MyApp',
  theme: new ThemeData(
    primarySwatch: Colors.blue,
    canvasColor: Colors.transparent,
  ),
  //...
);

これを設定すると、角が丸いClipRRectまたは装飾を使用できます。

Bottomsheet with rounded corners

3
ryanafrish7

@Shyju Madathilによる上記のコードでは、それを機能させるために足場にキーを追加する必要があります

return new Scaffold(
  key: _scaffoldKey,
  ....
0
crimson suv