Flutter モーダルシートの便利なパッケージ「wolt_modal_sheet」

今回はFlutterでモーダルシートを実装する際にぜひ使ってほしい「wolt_modal_sheet」というパッケージを紹介します。

wolt_modal_sheetについて

モーダルシートを簡単に表示するためのウィジェットを提供するライブラリです。モーダルシートは、ユーザーが現在の画面の上に重なる形で表示され、ポップアップのようなインターフェース要素です。このパッケージを使うと、カスタマイズ可能で滑らかなアニメーションを伴うモーダルシートを簡単に実装できます。

特徴

  • 簡単にモーダルを表示: 1行でモーダルシートを表示でき、簡単に導入可能。
  • カスタマイズ可能: ヘッダーやフッターのカスタマイズ、アニメーションや動作の設定が可能。
  • スムーズなアニメーション: モーダルシートが上下にスライドして表示されるアニメーションがデフォルトで提供されます。
  • 柔軟なサイズ設定: モーダルの高さや位置を自由に設定できる。

実装例

wolt_modal_sheetパッケージを使って、ボタンを押したときにモーダルシートを表示する簡単なコードの例を紹介します。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Wolt Modal Sheet Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Wolt Modal Sheet Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // モーダルシートを表示する
            showWoltModalSheet(
              context: context,
              builder: (BuildContext context) {
                return Container(
                  height: 300, // モーダルの高さ
                  color: Colors.white,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Text(
                        'モーダルシートの内容',
                        style: TextStyle(fontSize: 18),
                      ),
                      SizedBox(height: 20),
                      ElevatedButton(
                        onPressed: () {
                          Navigator.pop(context); // モーダルを閉じる
                        },
                        child: Text('閉じる'),
                      ),
                    ],
                  ),
                );
              },
            );
          },
          child: Text('モーダルシートを表示'),
        ),
      ),
    );
  }
}

モーダルシートを表示 ボタンをタップすると、画面下からモーダルシートがスライドアップし、シート内に定義した内容が表示されます。モーダルシート内にある「閉じる」ボタンをタップすると、モーダルシートが閉じます。

解説

  1. showWoltModalSheet関数: この関数を使って、モーダルシートを表示します。contextとbuilderを引数に取ります。builder内でモーダルシートのコンテンツを定義します。
  2. モーダルのカスタマイズ: モーダルの高さやコンテンツを自由に設定できます。この例では、モーダルの高さを300に設定し、その中にテキストとボタンを配置しています。
  3. モーダルを閉じる: Navigator.pop(context)を使って、モーダルシートを閉じることができます。

カスタマイズ例

モーダルのアニメーションや位置を変更

showWoltModalSheet関数では、アニメーションや表示位置を細かく設定ができます。以下のコードは、モーダルの表示位置やアニメーションをカスタマイズする例です。

showWoltModalSheet(
  context: context,
  builder: (BuildContext context) {
    return Container(
      height: 250, // モーダルの高さ
      color: Colors.blueAccent,
      child: Center(
        child: Text(
          'カスタムアニメーション付きモーダル',
          style: TextStyle(color: Colors.white, fontSize: 18),
        ),
      ),
    );
  },
  animationDuration: Duration(milliseconds: 500), // アニメーションの時間
  curve: Curves.easeInOut, // アニメーションのカーブ
  isScrollControlled: true, // スクロール可能にする
);

注意点としては、
・モーダルのサイズ: モーダルの高さや幅を適切に設定する必要があります。コンテンツが大きすぎると、モーダルが画面外にはみ出ることがあります。
・閉じる操作: モーダルを閉じる際は、Navigator.pop(context)を使うことを忘れないようにしましょう。

wolt_modal_sheetを使うと、シンプルでカスタマイズ可能なモーダルシートを簡単に実装でき、ユーザーインターフェースがより魅力的になります。ぜひ使ってみてください！

タイトルとURLをコピーしました