Di più
Costruisci un'app Flutter con funzionalità di trascinamento e rilascio utilizzando widget trascinabili e Back4App

22min
Introduzione
Le interfacce interattive di trascinamento e rilascio migliorano l'esperienza dell'utente consentendo agli utenti di manipolare gli elementi dell'interfaccia utente in modo intuitivo. Flutter fornisce i Draggable e DragTarget widget per creare tali interazioni. In questo tutorial, imparerai a costruire un'applicazione Flutter che utilizza i Draggable widget per spostare elementi tra le liste, con persistenza dei dati utilizzando Back4App—un backend-as-a-service alimentato da Parse Server.
Alla fine di questo tutorial, avrai un'app Flutter funzionante in cui gli utenti possono trascinare elementi da un elenco all'altro, e le modifiche saranno memorizzate e recuperate da Back4App. Questo tutorial è adatto per sviluppatori Flutter di tutti i livelli di esperienza.
Prerequisiti
Per completare questo tutorial, avrai bisogno di:
Flutter SDK installato sul tuo computer. Segui la guida ufficiale all'installazione di Flutter per il tuo sistema operativo.
Conoscenze di base di Flutter e Dart. Se sei nuovo a Flutter, rivedi la documentazione di Flutter per familiarizzare con le basi.
Un IDE o editor di testo come Visual Studio Code o Android Studio.
Un account Back4App. Registrati per un account gratuito su Back4App.
Parse Server SDK per Flutter aggiunto al tuo progetto. Scopri come configurarlo seguendo la Guida SDK Flutter di Back4App.
Panoramica
Costruiremo un'app di gestione delle attività in cui le attività possono essere trascinate da un elenco "Da fare" a un elenco "Completato" e viceversa. L'app:
Usa Draggable widget per abilitare il trascinamento delle attività.
Usa DragTarget widget per definire le zone di rilascio.
Memorizza e recupera le attività da Back4App per persistere i dati.
Passo 1 – Configurazione del Progetto Flutter
1.1. Crea un Nuovo Progetto Flutter
Apri il tuo terminale e esegui:
Bash
flutter create drag_drop_app
flutter create drag_drop_app
﻿
Naviga nella directory del progetto:
Bash
cd drag_drop_app
cd drag_drop_app
﻿
1.2. Aggiungi Dipendenze
Apri pubspec.yaml e aggiungi le seguenti dipendenze:
YAML
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: ^4.0.1
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: ^4.0.1
﻿
Esegui flutter pub get per installare i pacchetti.
Passo 2 – Configurazione di Back4App
2.1. Crea una Nuova Applicazione Back4App
Accedi al tuo dashboard di Back4App.
Clicca su "Crea nuova App".
Inserisci un nome per la tua applicazione, ad esempio, "DragDropApp", e clicca su "Crea".
2.2. Configurare il Modello di Dati
Nel tuo dashboard dell'applicazione, vai alla "Database" sezione.
Clicca su "Crea una classe".
Nella finestra modale:
Seleziona "Personalizzato".
Inserisci "Task" come nome della classe.
Clicca "Crea classe".
2.3. Aggiungi Colonne alla Classe
Nella classe "Task", clicca su "+" per aggiungere nuove colonne.
Aggiungi le seguenti colonne:
titolo: Tipo String
stato: Tipo String
Aggiungi alcuni dati di esempio alla "Task" classe. Ad esempio:
2.4. Ottenere le Credenziali dell'Applicazione
Naviga su Impostazioni App > Sicurezza e Chiavi.
Annota il tuo ID Applicazione e Chiave Client.
Passo 3 – Inizializzare Parse nella tua App Flutter
Apri lib/main.dart e modificalo come segue:
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(),
    );
  }
}
﻿
Sostituisci 'YOUR_APPLICATION_ID' e 'YOUR_CLIENT_KEY' con le tue credenziali effettive di Back4App.
Passo 4 – Creazione del Modello di Task
Crea una nuova directory chiamata models sotto lib e aggiungi un file chiamato 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});
}
﻿
Passo 5 – Recupero dei Task da Back4App
Crea una nuova directory chiamata services sotto lib e aggiungi un file chiamato 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();
  }
}
﻿
Passaggio 6 – Costruire l'interfaccia utente con Draggable e DragTarget
Crea una nuova directory chiamata screens sotto lib e aggiungi un file chiamato 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),
      ),
    );
  }
}
﻿
Spiegazione
HomePage: La schermata principale che visualizza due colonne—"Da Fare" e "Completati".
TaskColumn: Un widget che visualizza i compiti e funge da DragTarget per Draggable compiti.
TaskCard: Un widget per visualizzare le informazioni sui singoli compiti.
Passo 7 – Esecuzione dell'App
7.1. Esegui l'App
Nel tuo terminale, esegui:
Bash
flutter run
flutter run
﻿
7.2. Testa la funzionalità di Trascinamento e Rilascio
Trascina un'attività dalla colonna "Da Fare" e rilasciala nella colonna "Completato".
Lo stato dell'attività dovrebbe aggiornarsi e dovrebbe apparire sotto "Completato".
La modifica persiste in Back4App; se riavvii l'app, l'attività rimane nel suo nuovo stato.
Conclusione
In questo tutorial, hai imparato come implementare la funzionalità di trascinamento e rilascio in un'applicazione Flutter utilizzando Draggable e DragTarget widget. Hai integrato Back4App per memorizzare e recuperare i dati delle attività, consentendo la persistenza dei dati tra le sessioni. Questa app interattiva dimostra come migliorare l'esperienza utente con elementi UI intuitivi e un backend scalabile.
Punti Chiave
Widget Trascinabili: Consenti agli utenti di trascinare elementi dell'interfaccia.
Widget DragTarget: Definisci zone di rilascio per gli elementi trascinabili.
Integrazione Back4App: Fornisce un backend per memorizzare e gestire i dati.
Prossimi Passi
Aggiungi Autenticazione: Implementa l'autenticazione degli utenti per avere elenchi di attività personalizzati.
Migliora UI/UX: Aggiungi animazioni, icone personalizzate e layout migliorati.
Aggiornamenti in Tempo Reale: Usa le Live Queries di Back4App per aggiornare le attività in tempo reale su più dispositivi.
Gestione degli Errori: Implementa la gestione degli errori per problemi di rete e conflitti di dati.
Risorse Aggiuntive
﻿Documentazione Back4App﻿
﻿Guida SDK Parse per Flutter﻿
﻿Documentazione Ufficiale Flutter﻿
﻿Widget Trascinabile﻿
﻿Widget DragTarget﻿
Buon Codice!
Aggiornato 23 Jan 2025
Questa pagina ti è stata di aiuto?
Come implementare le scorciatoie da tastiera in Flutter con CallbackShortcuts e Back4App?
AVANTI IL PROSSIMO
Nuovo Titolo Back4app Test 1