ブログ

Flutter OpenContainerで画面遷移をスムーズにする方法

OpenContainerとは

OpenContainerは、animationsパッケージに含まれるウィジェットの一つで、Material DesignのShared Element Transitionsを実現するための便利なツールです。具体的には、あるウィジェット（例えばリストのアイテムやカード）をタップした際に、アニメーションを伴って別の画面や詳細画面へスムーズに遷移させることができます。

従来の画面遷移では、画面が切り替わる際に唐突な印象を与えてしまうことがありましたが、OpenContainerを使用することで、視覚的に自然で滑らかなトランジションを実現し、ユーザーエクスペリエンスを向上させることができます。

OpenContainerは、以下の特徴を持っています。

  • Shared Element Transitionsの実現: 元のウィジェットが展開され、新しい画面へとシームレスに移行するように見せることができます。
  • カスタマイズ性: 遷移アニメーションの種類、期間、イージングなどを細かく調整できます。
  • シンプルなAPI: 比較的簡単に実装できるAPIを提供しており、少ないコードで高度なアニメーションを実現できます。
  • Material Designとの親和性: Material Designのガイドラインに沿ったアニメーションを簡単に実装できます。

OpenContainerは、アプリのUI/UXを向上させるために非常に有効なツールであり、特にリストやグリッドから詳細画面への遷移など、コンテンツが関連している画面間の遷移においてその効果を発揮します。

OpenContainerの基本的な使い方

OpenContainerを使うための基本的な手順は以下の通りです。

  1. animationsパッケージのインストール:

    まず、pubspec.yamlファイルにanimationsパッケージを追加し、dependenciesに以下を記述します。

    dependencies:
  flutter:
    sdk: flutter
  animations: ^2.0.7 # 最新バージョンを確認してください

    そして、ターミナルでflutter pub getを実行してパッケージをインストールします。

  2. OpenContainerウィジェットのインポート:

    OpenContainerを使うファイルに、animationsパッケージをインポートします。

    import 'package:animations/animations.dart';

  3. OpenContainerウィジェットの配置:

    OpenContainerウィジェットを、画面遷移の起点となるウィジェット（例：リストのアイテム）を囲むように配置します。

    OpenContainer(
  closedBuilder: (BuildContext context, VoidCallback openContainer) {
    // 遷移元のウィジェットを定義します。
    return Container(
      width: 120,
      height: 120,
      child: InkWell(
        onTap: openContainer, // タップで遷移を発火させる
        child: Center(
          child: Text('タップして開く'),
        ),
      ),
    );
  },
  openBuilder: (BuildContext context, VoidCallback _) {
    // 遷移先のウィジェットを定義します。
    return Scaffold(
      appBar: AppBar(
        title: Text('詳細画面'),
      ),
      body: Center(
        child: Text('詳細コンテンツ'),
      ),
    );
  },
  closedElevation: 6.0, //閉じた状態の影の大きさ
  openElevation: 0.0, //開いた状態の影の大きさ
);

  4. closedBuilderの定義:

    closedBuilderは、遷移元のウィジェットを構築するための関数です。この関数は、BuildContextとopenContainerというVoidCallbackを受け取ります。openContainerをウィジェットのタップイベントなどで呼び出すことで、画面遷移が開始されます。

  5. openBuilderの定義:

    openBuilderは、遷移先のウィジェットを構築するための関数です。この関数もBuildContextとVoidCallbackを受け取りますが、遷移先の画面ではopenContainerを呼び出す必要はありません。遷移先の画面の内容を定義します。

  6. 動作確認:

    アプリを実行し、closedBuilderで定義したウィジェットをタップすると、openBuilderで定義した画面へアニメーションを伴って遷移するはずです。

上記のコード例では、Containerをタップすると、Scaffoldで定義された詳細画面へとアニメーションと共に遷移します。closedBuilderとopenBuilderの中身をそれぞれ適切に定義することで、様々な画面遷移を実現できます。closedElevationとopenElevationは、それぞれ閉じた状態と開いた状態の影の大きさを調整します。影が必要ない場合は0.0を指定します。

OpenContainerのカスタマイズ

OpenContainerは、アニメーションの種類や期間、色、シェイプなど、様々な要素をカスタマイズできます。以下に、主なカスタマイズ項目とその方法を説明します。

  1. アニメーションの種類 (transitionType):

    transitionTypeパラメータを使用すると、アニメーションの種類を変更できます。利用可能な種類は以下の通りです。

    • ContainerTransitionType.fade: フェードイン/フェードアウトのアニメーション。シンプルで汎用性が高い。
    • ContainerTransitionType.fadeThrough: フェードイン/フェードアウトに加えて、背景が徐々に変化するアニメーション。コンテンツが大きく異なる画面遷移に適している。
    • ContainerTransitionType.sharedAxis: 軸（X, Y, Z）に沿ってスライドするアニメーション。コンテンツの関連性が高い画面遷移に適している。sharedAxisDirectionパラメータで軸を指定します。

    例：

    OpenContainer(
  transitionType: ContainerTransitionType.fadeThrough,
  // ...
);

  2. アニメーションの期間 (transitionDuration):

    transitionDurationパラメータを使用すると、アニメーションの期間を調整できます。Duration型で指定します。

    例：

    OpenContainer(
  transitionDuration: Duration(milliseconds: 500),
  // ...
);

  3. イージング (transitionDuration):

    transitionDurationと組み合わせて、アニメーションのイージング（速度変化）を調整することも可能です。openBuilderとclosedBuilderの内部でPageRouteBuilderを使用し、transitionsBuilderでアニメーションを定義することで実現できます。

    例：

    OpenContainer(
    openBuilder: (BuildContext context, VoidCallback _) {
      return Scaffold(
        appBar: AppBar(title: Text("詳細")),
        body: Center(child: Text("詳細")),
      );
    },
    closedBuilder: (BuildContext context, VoidCallback openContainer) {
      return Container(
        color: Colors.blue,
        child: Center(child: Text("タップ")),
      );
    },
    transitionDuration: Duration(milliseconds: 500),
    openElevation: 0,
    closedElevation: 0,
    transitionBuilder: (BuildContext context, Animation<double> animation,
        Animation<double> secondaryAnimation, Widget child) {
      return FadeThroughTransition(
        animation: animation,
        secondaryAnimation: secondaryAnimation,
        child: child,
      );
    });

  4. シェイプ (closedShape, openShape):

    closedShapeとopenShapeパラメータを使用すると、遷移元と遷移先のウィジェットのシェイプを調整できます。RoundedRectangleBorderやCircleBorderなどを指定できます。

    例：

    OpenContainer(
  closedShape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
  openShape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(0)),
  // ...
);

  5. 背景色 (closedColor, openColor):

    closedColorとopenColorパラメータを使用すると、遷移元と遷移先のウィジェットの背景色を調整できます。

    例：

    OpenContainer(
  closedColor: Colors.blue,
  openColor: Colors.white,
  // ...
);

  6. onClosed / onOpened:

    onClosedとonOpenedコールバックを使うと、アニメーション終了時に処理を実行できます。

    例:

    OpenContainer(
  onClosed: (isClosed){
    if(isClosed != null){
      print("アニメーション完了。遷移方向: $isClosed");
    }
  },
  // ...
);

これらのカスタマイズを組み合わせることで、アプリのデザインに合わせた独自の画面遷移アニメーションを作成できます。

OpenContainerを使った画面遷移の実装例

ここでは、リストのアイテムをタップすると、詳細画面へ遷移する例を実装します。

1. データモデルの定義:

まず、表示するデータを定義するクラスを作成します。

class Item {
  final String title;
  final String description;
  final Color color;

  Item({required this.title, required this.description, required this.color});
}

2. データリストの作成:

次に、表示するアイテムのリストを作成します。

List<Item> items = [
  Item(title: 'Item 1', description: 'Description for Item 1', color: Colors.red),
  Item(title: 'Item 2', description: 'Description for Item 2', color: Colors.green),
  Item(title: 'Item 3', description: 'Description for Item 3', color: Colors.blue),
];

3. リスト表示とOpenContainerの実装:

ListView.builderを使ってリストを表示し、各アイテムをOpenContainerで囲みます。

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

class OpenContainerExample extends StatelessWidget {
  final List<Item> items = [
    Item(title: 'Item 1', description: 'Description for Item 1', color: Colors.red),
    Item(title: 'Item 2', description: 'Description for Item 2', color: Colors.green),
    Item(title: 'Item 3', description: 'Description for Item 3', color: Colors.blue),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('OpenContainer Example'),
      ),
      body: ListView.builder(
        itemCount: items.length,
        itemBuilder: (context, index) {
          final item = items[index];
          return OpenContainer(
            transitionType: ContainerTransitionType.fade, // アニメーションの種類
            closedBuilder: (BuildContext context, VoidCallback openContainer) {
              return Container(
                margin: EdgeInsets.all(8.0),
                decoration: BoxDecoration(
                  color: item.color,
                  borderRadius: BorderRadius.circular(8.0),
                ),
                child: ListTile(
                  title: Text(
                    item.title,
                    style: TextStyle(color: Colors.white),
                  ),
                  onTap: openContainer, // タップで遷移を開始
                ),
              );
            },
            openBuilder: (BuildContext context, VoidCallback _) {
              return Scaffold(
                appBar: AppBar(
                  title: Text(item.title),
                  backgroundColor: item.color,
                ),
                backgroundColor: item.color,
                body: Center(
                  child: Padding(
                    padding: const EdgeInsets.all(16.0),
                    child: Text(
                      item.description,
                      style: TextStyle(fontSize: 20, color: Colors.white),
                    ),
                  ),
                ),
              );
            },
          );
        },
      ),
    );
  }
}

class Item {
  final String title;
  final String description;
  final Color color;

  Item({required this.title, required this.description, required this.color});
}

解説:

  • OpenContainerでリストの各アイテムを囲んでいます。
  • closedBuilderでは、リストのアイテムの見た目を定義しています。ListTileをContainerで囲み、背景色と角丸を設定しています。onTapでopenContainerを呼び出し、タップ時に遷移を開始するようにしています。
  • openBuilderでは、詳細画面の見た目を定義しています。AppBarのタイトルをアイテムのタイトルで、背景色をアイテムの色で設定しています。また、アイテムの説明を表示しています。
  • transitionTypeでアニメーションの種類をfadeに設定しています。 他の遷移タイプも試してみてください。

このコードを実行すると、リストのアイテムをタップすると、フェードアニメーションを伴って詳細画面に遷移するようになります。 アニメーションの種類や期間、イージングなどを調整することで、より洗練されたUIを実現できます。

OpenContainerを使う上での注意点

OpenContainerは非常に便利なウィジェットですが、使用する際にはいくつかの注意点があります。

  1. パフォーマンス:

    アニメーションはリソースを消費するため、多数のOpenContainerを同時に使用するとパフォーマンスに影響が出る可能性があります。特に、複雑なウィジェットをアニメーションさせる場合は、パフォーマンスを意識して実装する必要があります。

    • 対策:

      • 必要以上に複雑なアニメーションは避ける。
      • リストなど大量のアイテムがある場合は、アイテムが表示される範囲でのみOpenContainerを使用する（ListView.builderのcacheExtentやaddAutomaticKeepAlivesなどを適切に設定する）。
      • 必要に応じて、transitionDurationを短くする。

  2. コンテキスト:

    openBuilderとclosedBuilder内でBuildContextを使用する際には、スコープに注意する必要があります。特に、Navigatorなどの操作を行う場合は、正しいBuildContextを使用していることを確認してください。

    • 対策:

      • openBuilderとclosedBuilderに渡されるBuildContextをそのまま使用する。
      • 必要であれば、Builderウィジェットを使用して、新しいBuildContextを作成する。

  3. キー (Key):

    動的に生成されるリストアイテムなどでOpenContainerを使用する場合、各OpenContainerに一意なKeyを付与することを推奨します。Keyがない場合、Flutterがウィジェットを正しく再構築できない可能性があり、予期せぬアニメーションやエラーが発生する可能性があります。

    • 対策:

      • ValueKeyやObjectKeyなどを使用して、OpenContainerに一意なKeyを付与する。
      • 例：OpenContainer(key: ValueKey(item.id), ...)

  4. アニメーションの競合:

    複数のOpenContainerが同時にアニメーションを開始すると、アニメーションが競合し、予期せぬ結果になる可能性があります。

    • 対策:

      • 同時に複数のOpenContainerがアニメーションしないように、UIを設計する。
      • アニメーションを制御するためのロジックを追加する。

  5. アクセシビリティ:

    OpenContainerを使用する際には、アクセシビリティにも配慮する必要があります。アニメーションが視覚的に美しいだけでなく、すべてのユーザーが利用しやすいように考慮することが重要です。

    • 対策:

      • アニメーションの期間を調整し、ユーザーが快適に視聴できる速度にする。
      • 色覚異常のユーザーにも配慮した色使いをする。
      • アニメーションをオフにするオプションを提供する（MediaQuery.of(context).disableAnimations が true の場合）。

  6. 依存関係のバージョン:

    animationsパッケージは、Flutterのバージョンに依存する場合があります。パッケージを使用する前に、Flutterのバージョンとの互換性を確認し、最新バージョンを使用するように心がけてください。

  7. ネスト:

    OpenContainerをネスト（入れ子）にすると、アニメーションが複雑になり、パフォーマンスにも影響が出やすくなります。可能な限りネストは避け、UIの構造をシンプルに保つように心がけましょう。

これらの注意点に留意しながらOpenContainerを使用することで、よりスムーズで快適なユーザーエクスペリエンスを提供できるでしょう。

まとめ：OpenContainerでより快適なFlutterアプリ開発を

OpenContainerは、Flutterアプリに洗練された画面遷移アニメーションを簡単に追加できる強力なウィジェットです。Material DesignのShared Element Transitionsを実装することで、ユーザーに視覚的に自然でスムーズな体験を提供し、アプリのUI/UXを大きく向上させることができます。

この記事では、OpenContainerの基本的な使い方からカスタマイズ、実装例、そして使用上の注意点までを解説しました。OpenContainerを活用することで、以下のようなメリットが得られます。

  • UI/UXの向上: スムーズなアニメーションにより、アプリの操作性が向上し、ユーザーエンゲージメントを高めることができます。
  • 開発効率の向上: アニメーションの実装にかかる手間を大幅に削減し、より重要な機能の開発に集中できます。
  • Material Design準拠: Material Designのガイドラインに沿ったアニメーションを簡単に実装でき、統一感のあるアプリデザインを実現できます。

ただし、OpenContainerを使用する際には、パフォーマンスやアクセシビリティに配慮し、適切なカスタマイズを行うことが重要です。また、複数のOpenContainerを同時に使用したり、ネストしたりする場合には、パフォーマンスに影響が出ないように注意が必要です。

今回紹介した内容を参考に、OpenContainerを効果的に活用し、より快適で魅力的なFlutterアプリ開発を目指してください。animationsパッケージにはOpenContainer以外にも便利なアニメーションウィジェットが含まれているので、ぜひ試してみてください。

コメントを残す