【 sliding_up_panel 】スライドアップパネルの実装【Flutter】

下からパネルが上がってくるような、スライドアップパネルを実装したい！

本記事ではそんな要望にお答えします。

sliding_up_panel パッケージを利用した、スライドアップパネルの実装方法について解説します。

基本的な使い方から、カスタマイズ方法まで解説します。

以下のようなUIを簡単に実装することが可能です。

ぜひ読んでみて実装してみてください！

基本的な使い方
1. 準備
2. 実装
カスタマイズ方法
まとめ
編集後記（2022/10/12）

基本的な使い方

基本的な使い方について解説していきます。

準備

まず準備として、パッケージのインストールと、
Dartファイルへのインポート文の追加を行います。

パッケージのインストール

CLI(macならターミナル)で、自分のプロジェクトのルートにて
以下のコマンドを実行しパッケージをインストールします。

flutter pub add sliding_up_panel

パッケージのインポート

実装したいDartファイルの上部に以下のインポート文を追加し、
パッケージをインポートします。

import 'package:sliding_up_panel/sliding_up_panel.dart';

実装

実装方法について解説します。

任意の場所にSlidingUpPanel ウィジェットを追加します。

body プロパティに背景で表示するウィジェットを、
pannelプロパティにスライドアップパネルに表示したいウィジェットを配置します。

SlidingUpPanel(
  body: // ・・・
  panel: // ・・・
),

GIFの実装コード全体

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyWidget(),
    );
  }
}

class MyWidget extends StatelessWidget {
  const MyWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.red[200],
      body: SlidingUpPanel(
        body: const Center(
          child: Text('Hello World!'),
        ),
        panel: const Center(
          child: Text('こんにちは世界！'),
        ),
      ),
    );
  }
}

カスタマイズ方法

カスタマイズ方法について解説していきます。

最小化時に表示するウィジェットの設定

最小化時(下部に表示されている時)に表示するウィジェットを、
collapsedプロパティにて設定できます。

      SlidingUpPanel(
        body: const Center(
          child: Text('Hello World!'),
        ),
        panel: const Center(
          child: Text('こんにちは世界！'),
        ),
        collapsed: const Center(
          child: Text('テスト'),
        ),
      ),

collapsedに何も設定しない場合、
pannelに設定したウィジェットの最上部部分が表示されます。

スライドアップと共にcollapsedに設定したウィジェットは非表示になります。

高さの指定

minHeightプロパティにて、最小化時の高さを、
maxHeightプロパティにて、最大化時の高さを指定可能です。

        SlidingUpPanel(
          body: const Center(
            child: Text('Hello World!'),
          ),
          panel: const Center(
            child: Text('こんにちは世界！'),
          ),
          minHeight: 300,
          maxHeight: 800,
        ),

枠線

borderプロパティにて、枠線の様々な設定が可能です。

        SlidingUpPanel(
          body: const Center(
            child: Text('Hello World!'),
          ),
          panel: const Center(
            child: Text('こんにちは世界！'),
          ),
          border: const Border(
            top: BorderSide(
              color: Colors.blue,
              width: 5,
            ),
          ),
        ),

また、borderRadiusプロパティにて、パネルの角を角丸にすることが可能です。

        SlidingUpPanel(
          body: const Center(
            child: Text('Hello World!'),
          ),
          panel: const Center(
            child: Text('こんにちは世界！'),
          ),
          borderRadius: const BorderRadius.only(
            topLeft: Radius.circular(24),
            topRight: Radius.circular(24),
          ),
        ),

現状、border とborderRaidus の同時設定はできない模様です。

パネルの背景色

colorプロパティにてパネルの背景色を設定可能です。

        SlidingUpPanel(
          body: const Center(
            child: Text('Hello World!'),
          ),
          panel: const Center(
            child: Text('こんにちは世界！'),
          ),
          color: Colors.yellow[200]!,
        ),