[Flutter] Flutter Slidableを使用して、スライドリストアイテムと方向スライド操作を簡単に実装します

記事ディレクトリ

I.はじめに

より多くのヒントやベストプラクティスを活用して Flutter のエキスパートになりたいと思っていますか? 素晴らしいニュースがあります! ゼロからワンまでのフラッター基本エントリーから全体戦略の応用ラインまで、皆様のご参加をお待ちしております！このコラムには、コードサンプルや詳細な分析など、Flutter を学習するために必要なすべてのリソースが含まれています。コラムの内容は今後も更新され、それに応じて価格も上昇していきます。今すぐ参加して、お得な価格でお楽しみください! さらに、専用のディスカッショングループもあります。ここをクリックしてディスカッショングループに参加し、他の Flutter 学習者とコミュニケーションを取り、学習することができます。今日から Flutter 学習の旅を始めましょう!

この記事では、強力な Flutter プラグインである Flutter Slidable について説明します。

この記事の要点は次のとおりです。

Flutter Slidable とは何かを理解する
Flutter Slidable のインストールと使用方法を学ぶ
Flutter Slidableの基本機能をマスターする
サンプルコードを通じて Flutter Slidable の使用法を理解する

執筆時点では、Flutter バージョン 3.10.0 と Dart SDK バージョン 3.0.0 を使用しています。Flutter Slidable のバージョンは 3.0.0 です。

これは、Xiaoyu Youthが2023年にCSDNで公開したブログです。収集ステーションの著作権侵害が横行しているため、CSDNでこの記事が見つからない場合は、CSDNを通じて私に連絡してください。サポートありがとうございます~

2. Flutter Slidable の概要

1. Flutter Slidableとは

Flutter Slidable は、スワイプ可能なリスト項目と方向性スワイプを実装する Flutter プラグインです。

つまり、Flutter アプリでリスト項目を作成し、ユーザーがスワイプして削除や共有などの非表示のアクションを表示できるようになります。

2. Flutter Slidableの主な特徴

Flutter Slidable の主な機能は次のとおりです。

開始 (左/上) と終了 (右/下) を受け入れる操作パネル
持ち上げることができます
4種類の操作パネルを内蔵
2種類のスライド操作ウィジェットを内蔵
内蔵の 1 つの解除アニメーション
カスタムレイアウトやアニメーションを簡単に作成できます
スワイプアクションがタップされたときに閉じる (オーバーライド可能)
最も近いスクロール可能な項目がスクロールを開始すると閉じる (オーバーライド可能)
スライド効果を簡単に無効にするオプション

3. Flutter Slidableのインストールと使用方法

1. Flutter Slidable をインストールする

Flutter プロジェクトで Flutter Slidable を使用するには、まずpubspec.yaml次の依存関係をファイルに追加する必要があります。

dependencies:
  flutter_slidable: 3.0.0

次に、次のインポートをライブラリに追加する必要があります。

import 'package:flutter_slidable/flutter_slidable.dart';

2. Flutter Slidableの基本的な使い方

基本的な Flutter Slidable の使用例を次に示します。

Slidable(
  key: const ValueKey(0),
  startActionPane: ActionPane(
    motion: const ScrollMotion(),
    dismissible: DismissiblePane(onDismissed: () {
    
    }),
    children: const [
      SlidableAction(
        onPressed: doNothing,
        backgroundColor: Color(0xFFFE4A49),
        foregroundColor: Colors.white,
        icon: Icons.delete,
        label: 'Delete',
      ),
      SlidableAction(
        onPressed: doNothing,
        backgroundColor: Color(0xFF21B7CA),
        foregroundColor: Colors.white,
        icon: Icons.share,
        label: 'Share',
      ),
    ],
  ),
  endActionPane: const ActionPane(
    motion: ScrollMotion(),
    children: [
      SlidableAction(
        flex: 2,
        onPressed: doNothing,
        backgroundColor: Color(0xFF7BC043),
        foregroundColor: Colors.white,
        icon: Icons.archive,
        label: 'Archive',
      ),
      SlidableAction(
        onPressed: doNothing,
        backgroundColor: Color(0xFF0392CF),
        foregroundColor: Colors.white,
        icon: Icons.save,
        label: 'Save',
      ),
    ],
  ),
  child: const ListTile(title: Text('Slide me')),
);

この例では、Slidable開始アクションパネルと終了アクションパネルを持つものを作成しました。各アクションペインには、削除と共有、およびアーカイブと保存の 2 つのアクションがあります。

4. Flutter Slidableの基本機能

1.アクションペインの開始

開始アクションパネルは、左側または上部のパネルです。このパネルでは、削除、共有などのアクションを追加できます。

startActionPane: ActionPane(
  motion: const ScrollMotion(),
  dismissible: DismissiblePane(onDismissed: () {
    
    }),
  children: const [
    SlidableAction(
      onPressed: doNothing,
      backgroundColor: Color(0xFFFE4A49),
      foregroundColor: Colors.white,
      icon: Icons.delete,
      label: 'Delete',
    ),
    SlidableAction(
      onPressed: doNothing,
      backgroundColor: Color(0xFF21B7CA),
      foregroundColor: Colors.white,
      icon: Icons.share,
      label: 'Share',
    ),
  ],
),

2.アクションペインの終了

エンドアクションパネルは右または下にあるパネルです。このパネルでは、アーカイブ、保存などのアクションを追加できます。

endActionPane: const ActionPane(
  motion: ScrollMotion(),
  children: [
    SlidableAction(
      flex: 2,
      onPressed: doNothing,
      backgroundColor: Color(0xFF7BC043),
      foregroundColor: Colors.white,
      icon: Icons.archive,
      label: 'Archive',
    ),
    SlidableAction(
      onPressed: doNothing,
      backgroundColor: Color(0xFF0392CF),
      foregroundColor: Colors.white,
      icon: Icons.save,
      label: 'Save',
    ),
  ],
),

V. まとめ

この記事では、強力な Flutter プラグインである Flutter Slidable について説明しました。私たちはその基本概念を学び、インストール方法と使用方法、そしてその基本機能を活用する方法を学びました。

開始アクションパネルと終了アクションパネルを作成し、それらにアクションを追加する方法を学びました。また、サンプルコードを通じて Flutter プロジェクトで Flutter Slidable を使用する方法についても詳しく説明しました。

Flutter について興味があり、さらに詳しく知りたいですか? それなら、Flutter のゼロから 1 までの基本入門からアプリケーション起動ガイドが最適です。ここでは、コードサンプルや詳細な分析を含む、包括的な Flutter 学習リソースを見つけることができます。Flutter を使ってアプリを構築する方法を知りたいですか? すべての答えはコラムにあります。コラムの内容は今後も更新され、価格もそれに応じて増加しますので、もうご遠慮ください。今すぐ参加して、お得な価格でお楽しみください! 一緒に Flutter の世界を探検しましょう! もっと知りたい？Flutter Developer 101 Getting Started ブックレットのコラムガイドを参照するには、ここをクリックしてください。さらに、専用のディスカッショングループもあります。ここをクリックしてディスカッショングループに参加し、他の Flutter 学習者とコミュニケーションを取り、学習することができます。