[Flutter]Containerをスワイプアップで表示するには？

どうも、ちょげ(@chogetarou)です。

Containerを上にスワイプして表示する方法を紹介します。

方法

Containerを上にスワイプして表示するには、「sliding_up_panel」パッケージを使います。

まず、「pubspec.yaml」でパッケージを追加します。

dependencies:
  sliding_up_panel: ^2.0.0+1

そして、該当ファイルでインポートします。

import 'package:sliding_up_panel/sliding_up_panel.dart';

次に、SlidingUpPanelを用意し、引数「body」にContainerの背面に表示されるウェジェットを指定します。

SlidingUpPanel(
  body: /*スワイプされた時に背面になるウェジェット*/,
),

そして、引数「panel」にスワイプして表示したいContainerを指定します。

SlidingUpPanel(
  panel: Container(),//スワイプで表示
  body: /*スワイプされた時に背面になるウェジェット*/,
),

これでContainerをスワイプアップで表示することが出来ます。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SlidingUpPanel(
        panel: Container(
          color: Colors.blue,
        ),
        body: Center(
          child: Text("Containerが上にスワイプされた時に後ろに表示される部分"),
        ),
      ),
    );
  }