ドラッグアンドドロップのFlutterアプリをドラッグ可能なウィジェットとBack4Appで構築する

22min
はじめに
インタラクティブなドラッグアンドドロップインターフェースは、ユーザーがUI要素を直感的に操作できるようにすることで、ユーザーエクスペリエンスを向上させます。Flutterは、こうしたインタラクションを作成するためのDraggableとDragTargetウィジェットを提供します。このチュートリアルでは、Draggableウィジェットを使用してリスト間でアイテムを移動させ、Parse Serverによって提供されるバックエンドサービスであるBack4Appを使用してデータの永続性を持たせるFlutterアプリケーションの構築方法を学びます。
このチュートリアルの終わりまでに、ユーザーがアイテムを1つのリストから別のリストにドラッグできる機能的なFlutterアプリを持つことができ、変更はBack4Appから保存され、取得されます。このチュートリアルは、すべての経験レベルのFlutter開発者に適しています。
前提条件
このチュートリアルを完了するには、次のものが必要です:
Flutter SDKがあなたのマシンにインストールされていること。あなたのオペレーティングシステムに対する公式Flutterインストールガイドを参照してください。
FlutterとDartの基本的な知識。Flutterが初めての場合は、Flutterドキュメントを確認して基本を理解してください。
IDEまたはテキストエディタ（Visual Studio CodeやAndroid Studioなど）。
バック4アプリのアカウント。Back4Appで無料アカウントにサインアップしてください。
Flutter用のParse Server SDKをプロジェクトに追加します。Back4App Flutter SDKガイドを参照して設定方法を学びます。
概要
タスクを「やること」リストから「完了」リストにドラッグできるタスク管理アプリを構築します。このアプリは:
タスクのドラッグを有効にするために Draggable ウィジェットを使用します。
ドロップゾーンを定義するために DragTarget ウィジェットを使用します。
データを永続化するために Back4App からタスクを保存および取得します。
ステップ 1 – Flutter プロジェクトの設定
1.1. 新しい Flutter プロジェクトを作成する
ターミナルを開いて、次のコマンドを実行します:
Bash
flutter create drag_drop_app
flutter create drag_drop_app
﻿
プロジェクトディレクトリに移動します:
Bash
cd drag_drop_app
cd drag_drop_app
﻿
1.2. 依存関係を追加する
「pubspec.yaml」を開いて、次の依存関係を追加します:
YAML
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: ^4.0.1
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: ^4.0.1
﻿
「flutter pub get」を実行して、パッケージをインストールします。
ステップ 2 – Back4Appの設定
2.1. 新しいBack4Appアプリケーションを作成する
あなたのBack4Appダッシュボードにログインします。
「新しいアプリを作成する」をクリックします。
アプリケーションの名前を入力します。例: 「DragDropApp」, そして「作成」をクリックします。
2.2. データモデルの設定
アプリケーションダッシュボードで、"データベース"セクションに移動します。
"クラスを作成"をクリックします。
モーダルで:
"カスタム"を選択します。
クラス名として"タスク"を入力します。
"クラスを作成"をクリックします。
2.3. クラスにカラムを追加
"タスク"クラスで、"+"をクリックして新しいカラムを追加します。
次のカラムを追加します:
タイトル: タイプ 文字列
ステータス: タイプ 文字列
"タスク"クラスにサンプルデータを追加します。例えば:
2.4. アプリケーションの認証情報を取得
アプリ設定 > セキュリティとキーに移動します。
あなたのアプリケーションIDとクライアントキーをメモします。
ステップ3 – FlutterアプリでParseを初期化
開く lib/main.dart そして次のように修正します:
Dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'screens/home_page.dart'; // You'll create this file next

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  const keyApplicationId = 'YOUR_APPLICATION_ID';
  const keyClientKey = 'YOUR_CLIENT_KEY';
  const keyParseServerUrl = 'https://parseapi.back4app.com';

  await Parse().initialize(
    keyApplicationId,
    keyParseServerUrl,
    clientKey: keyClientKey,
    debug: true,
  );

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Drag and Drop App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'screens/home_page.dart'; // You'll create this file next

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  const keyApplicationId = 'YOUR_APPLICATION_ID';
  const keyClientKey = 'YOUR_CLIENT_KEY';
  const keyParseServerUrl = 'https://parseapi.back4app.com';

  await Parse().initialize(
    keyApplicationId,
    keyParseServerUrl,
    clientKey: keyClientKey,
    debug: true,
  );

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Drag and Drop App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}
﻿
置き換える 'YOUR_APPLICATION_ID' と 'YOUR_CLIENT_KEY' を実際のBack4Appの資格情報に置き換えます。
ステップ4 – タスクモデルの作成
新しいディレクトリを作成します models の下に lib そして task.dart という名前のファイルを追加します:
Dart
// lib/models/task.dart
class Task {
  String id;
  String title;
  String status;

  Task({required this.id, required this.title, required this.status});
}
// lib/models/task.dart
class Task {
  String id;
  String title;
  String status;

  Task({required this.id, required this.title, required this.status});
}
﻿
ステップ5 – Back4Appからタスクを取得する
新しいディレクトリを作成します services の下に lib そして task_service.dart という名前のファイルを追加します:
Dart
// lib/services/task_service.dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import '../models/task.dart';

class TaskService {
  Future<List<Task>> getTasksByStatus(String status) async {
    final QueryBuilder<ParseObject> query =
        QueryBuilder<ParseObject>(ParseObject('Task'))
          ..whereEqualTo('status', status);

    final ParseResponse apiResponse = await query.query();

    if (apiResponse.success && apiResponse.results != null) {
      return apiResponse.results!.map((data) {
        return Task(
          id: data.objectId!,
          title: data.get<String>('title') ?? '',
          status: data.get<String>('status') ?? '',
        );
      }).toList();
    } else {
      return [];
    }
  }

  Future<void> updateTaskStatus(String id, String status) async {
    var task = ParseObject('Task')
      ..objectId = id
      ..set('status', status);

    await task.save();
  }
}
// lib/services/task_service.dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import '../models/task.dart';

class TaskService {
  Future<List<Task>> getTasksByStatus(String status) async {
    final QueryBuilder<ParseObject> query =
        QueryBuilder<ParseObject>(ParseObject('Task'))
          ..whereEqualTo('status', status);

    final ParseResponse apiResponse = await query.query();

    if (apiResponse.success && apiResponse.results != null) {
      return apiResponse.results!.map((data) {
        return Task(
          id: data.objectId!,
          title: data.get<String>('title') ?? '',
          status: data.get<String>('status') ?? '',
        );
      }).toList();
    } else {
      return [];
    }
  }

  Future<void> updateTaskStatus(String id, String status) async {
    var task = ParseObject('Task')
      ..objectId = id
      ..set('status', status);

    await task.save();
  }
}
﻿
ステップ 6 – Draggable と DragTarget を使った UI の構築
新しいディレクトリを作成します screens を lib の下に作成し、次の名前のファイルを追加します home_page.dart:
Dart
// lib/screens/home_page.dart
import 'package:flutter/material.dart';
import '../models/task.dart';
import '../services/task_service.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final TaskService _taskService = TaskService();
  List<Task> toDoTasks = [];
  List<Task> completedTasks = [];

  @override
  void initState() {
    super.initState();
    fetchTasks();
  }

  Future<void> fetchTasks() async {
    var toDo = await _taskService.getTasksByStatus('To Do');
    var completed = await _taskService.getTasksByStatus('Completed');

    setState(() {
      toDoTasks = toDo;
      completedTasks = completed;
    });
  }

  void onDragAccept(Task task, String newStatus) async {
    await _taskService.updateTaskStatus(task.id, newStatus);
    await fetchTasks();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Drag and Drop Tasks'),
      ),
      body: Row(
        children: [
          Expanded(
            child: TaskColumn(
              title: 'To Do',
              tasks: toDoTasks,
              onDragAccept: (task) => onDragAccept(task, 'To Do'),
            ),
          ),
          Expanded(
            child: TaskColumn(
              title: 'Completed',
              tasks: completedTasks,
              onDragAccept: (task) => onDragAccept(task, 'Completed'),
            ),
          ),
        ],
      ),
    );
  }
}

class TaskColumn extends StatelessWidget {
  final String title;
  final List<Task> tasks;
  final Function(Task) onDragAccept;

  TaskColumn({
    required this.title,
    required this.tasks,
    required this.onDragAccept,
  });

  @override
  Widget build(BuildContext context) {
    return DragTarget<Task>(
      onWillAccept: (task) => true,
      onAccept: (task) {
        onDragAccept(task);
      },
      builder: (context, candidateData, rejectedData) {
        return Container(
          padding: EdgeInsets.all(16.0),
          child: Column(
            children: [
              Text(
                title,
                style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold),
              ),
              Expanded(
                child: ListView(
                  children: tasks.map((task) {
                    return Draggable<Task>(
                      data: task,
                      feedback: Material(
                        child: TaskCard(task: task),
                        elevation: 4.0,
                      ),
                      childWhenDragging: Opacity(
                        opacity: 0.5,
                        child: TaskCard(task: task),
                      ),
                      child: TaskCard(task: task),
                    );
                  }).toList(),
                ),
              ),
            ],
          ),
        );
      },
    );
  }
}

class TaskCard extends StatelessWidget {
  final Task task;

  TaskCard({required this.task});

  @override
  Widget build(BuildContext context) {
    return Card(
      margin: EdgeInsets.symmetric(vertical: 8.0),
      child: ListTile(
        title: Text(task.title),
      ),
    );
  }
}
// lib/screens/home_page.dart
import 'package:flutter/material.dart';
import '../models/task.dart';
import '../services/task_service.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final TaskService _taskService = TaskService();
  List<Task> toDoTasks = [];
  List<Task> completedTasks = [];

  @override
  void initState() {
    super.initState();
    fetchTasks();
  }

  Future<void> fetchTasks() async {
    var toDo = await _taskService.getTasksByStatus('To Do');
    var completed = await _taskService.getTasksByStatus('Completed');

    setState(() {
      toDoTasks = toDo;
      completedTasks = completed;
    });
  }

  void onDragAccept(Task task, String newStatus) async {
    await _taskService.updateTaskStatus(task.id, newStatus);
    await fetchTasks();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Drag and Drop Tasks'),
      ),
      body: Row(
        children: [
          Expanded(
            child: TaskColumn(
              title: 'To Do',
              tasks: toDoTasks,
              onDragAccept: (task) => onDragAccept(task, 'To Do'),
            ),
          ),
          Expanded(
            child: TaskColumn(
              title: 'Completed',
              tasks: completedTasks,
              onDragAccept: (task) => onDragAccept(task, 'Completed'),
            ),
          ),
        ],
      ),
    );
  }
}

class TaskColumn extends StatelessWidget {
  final String title;
  final List<Task> tasks;
  final Function(Task) onDragAccept;

  TaskColumn({
    required this.title,
    required this.tasks,
    required this.onDragAccept,
  });

  @override
  Widget build(BuildContext context) {
    return DragTarget<Task>(
      onWillAccept: (task) => true,
      onAccept: (task) {
        onDragAccept(task);
      },
      builder: (context, candidateData, rejectedData) {
        return Container(
          padding: EdgeInsets.all(16.0),
          child: Column(
            children: [
              Text(
                title,
                style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold),
              ),
              Expanded(
                child: ListView(
                  children: tasks.map((task) {
                    return Draggable<Task>(
                      data: task,
                      feedback: Material(
                        child: TaskCard(task: task),
                        elevation: 4.0,
                      ),
                      childWhenDragging: Opacity(
                        opacity: 0.5,
                        child: TaskCard(task: task),
                      ),
                      child: TaskCard(task: task),
                    );
                  }).toList(),
                ),
              ),
            ],
          ),
        );
      },
    );
  }
}

class TaskCard extends StatelessWidget {
  final Task task;

  TaskCard({required this.task});

  @override
  Widget build(BuildContext context) {
    return Card(
      margin: EdgeInsets.symmetric(vertical: 8.0),
      child: ListTile(
        title: Text(task.title),
      ),
    );
  }
}
﻿
説明
ホームページ: "To Do" と "Completed" タスクの2つの列を表示するメイン画面です。
タスク列: タスクを表示し、ドラッグターゲットとして機能するウィジェットです。ドラッグ可能なタスクのための。
タスクカード: 個々のタスク情報を表示するウィジェットです。
ステップ7 – アプリの実行
7.1. アプリを実行する
ターミナルで実行します:
Bash
flutter run
flutter run
﻿
7.2. ドラッグアンドドロップ機能のテスト
「To Do」列からタスクをドラッグして「Completed」列にドロップします。
タスクのステータスが更新され、「Completed」の下に表示されるはずです。
変更はBack4Appに持続します。アプリを再起動しても、タスクは新しいステータスのままです。
結論
このチュートリアルでは、Flutterアプリケーションでドラッグアンドドロップ機能を実装する方法を学びました。DraggableとDragTargetウィジェットを使用しました。タスクデータを保存および取得するためにBack4Appを統合し、セッション間でデータの持続性を実現しました。このインタラクティブなアプリは、直感的なUI要素とスケーラブルなバックエンドを使用してユーザーエクスペリエンスを向上させる方法を示しています。
重要なポイント
ドラッグ可能なウィジェット: ユーザーがUI要素をドラッグできるようにします。
ドラッグターゲットウィジェット: ドラッグ可能なアイテムのドロップゾーンを定義します。
Back4App統合: データを保存および管理するためのバックエンドを提供します。
次のステップ
認証の追加: ユーザー認証を実装して、個別のタスクリストを持つようにします。
UI/UXの向上: アニメーション、カスタムアイコン、改善されたレイアウトを追加します。
リアルタイム更新: Back4Appのライブクエリを使用して、複数のデバイスでタスクをリアルタイムで更新します。
エラーハンドリング: ネットワークの問題やデータの競合に対するエラーハンドリングを実装します。
追加リソース
﻿Back4Appドキュメント﻿
﻿Flutter用Parse SDKガイド﻿
﻿Flutter公式ドキュメント﻿
﻿ドラッグ可能ウィジェット﻿
﻿ドラッグターゲットウィジェット﻿
楽しいコーディングを！
更新日 24 Jan 2025
このページは役に立ちましたか？
FlutterにおけるコールバックショートカットとBack4Appを使用したキーボードショートカットの実装方法
Back4appのチュートリアル