Flutter Templates
Come creare un'app per la prenotazione di eventi con Flutter e Back4App?

33min
Introduzione
Nel mondo frenetico di oggi, gestire eventi e prenotazioni tramite applicazioni mobili è diventato sempre più essenziale. Un'app per la prenotazione di eventi consente agli utenti di sfogliare gli eventi in arrivo, prenotare biglietti, selezionare posti e gestire le proprie prenotazioni senza problemi. In questo tutorial, imparerai come creare un'app completa per la prenotazione di eventi utilizzando Flutter per il frontend e Back4App come servizio backend.
Alla fine di questo tutorial, avrai costruito un'app funzionale che:
Mostra un elenco di eventi con dettagli.
Consente agli utenti di visualizzare gli orari degli eventi e le informazioni sui luoghi.
Abilita la prenotazione dei biglietti con selezione dei posti.
Elabora i pagamenti in modo sicuro (integrazione con un gateway di pagamento).
Gestisce i profili degli utenti, inclusa la cronologia delle prenotazioni e le preferenze.
Iniziamo!
Prerequisiti
Per completare questo tutorial, avrai bisogno di:
Flutter SDK installato sulla tua macchina locale. Segui il guida all'installazione di Flutter.
Conoscenze di base di Dart e Flutter. Se sei nuovo a Flutter, considera di seguire il tutorial introduttivo di Flutter.
Un account Back4App. Registrati per un account gratuito su Back4App.
Back4App Flutter SDK integrato nel tuo progetto. Puoi imparare come configurarlo seguendo la Guida di Back4App Flutter.
Un editor di codice come Visual Studio Code o Android Studio.
Node.js e npm installati per eseguire le funzioni cloud di Back4App. Installali dal sito ufficiale di Node.js.
Passo 1 – Configurazione del Backend di Back4App
In questo passo, configurerai il tuo progetto Back4App, creerai le classi necessarie (tabelle) e configurerai il backend per memorizzare i dati degli eventi, le informazioni sui biglietti e i profili degli utenti.
1.1. Crea una Nuova Applicazione Back4App
Accedi al tuo account Back4App.
Clicca su "Crea nuova App".
Inserisci un Nome App (ad esempio, "EventBookingApp") e seleziona la tua Icona App.
Clicca "Crea".
1.2. Configura le Chiavi dell'Applicazione
Naviga al Dashboard della tua app.
Clicca su "Impostazioni App" > "Sicurezza e Chiavi".
Annota il ID Applicazione e il Client Key. Avrai bisogno di questi per inizializzare il Parse SDK nella tua app Flutter.
1.3. Definire i modelli di dati
È necessario creare le seguenti classi in Back4App:
Evento: Memorizza i dettagli dell'evento.
Luogo: Memorizza le informazioni sul luogo.
Biglietto: Gestisce la disponibilità e le prenotazioni dei biglietti.
Utente: Gestisce i profili utente (classe predefinita).
Crea la classe Evento
Nella barra laterale sinistra, fai clic su "Database" per aprire il Data Browser.
Fai clic su "Crea una classe".
Seleziona "Personalizzato", inserisci "Evento" come nome della classe e fai clic su "Crea classe".
Aggiungi le seguenti colonne alla classe Evento :
nome (Stringa)
descrizione (Stringa)
data (Data)
immagine (File)
luogo (Puntatore a Luogo)
prezzo (Numero)
Crea la classe Ticket
Crea una nuova classe chiamata "Ticket".
Aggiungi le seguenti colonne:
evento (Puntatore all'Evento)
utente (Puntatore all'Utente)
numeroPosto (Stringa)
prezzo (Numero)
èPrenotato (Booleano)
1.4. Abilita l'autenticazione dell'utente
Nella barra laterale sinistra, fai clic su "Impostazioni del server" > "Impostazioni generali".
Sotto "Autenticazione", assicurati che "Abilita permessi a livello di classe" sia selezionato.
Configura i permessi della classe Utente per consentire agli utenti di registrarsi e accedere.
1.5. Configura le funzioni cloud (opzionale per l'elaborazione dei pagamenti)
Per l'integrazione dei pagamenti, potrebbe essere necessario scrivere funzioni cloud. Questo passaggio dipenderà dal gateway di pagamento che scegli (ad es. Stripe, PayPal). Consulta la documentazione di Back4App su Funzioni di codice cloud.
Passo 2 – Inizializzazione del Progetto Flutter
In questo passo, configurerai il progetto Flutter e integrerai il Back4App Parse SDK.
2.1. Crea un Nuovo Progetto Flutter
Apri il tuo terminale e esegui:
Bash
flutter create event_booking_app
flutter create event_booking_app
﻿
Naviga nella directory del progetto:
Bash
cd event_booking_app
cd event_booking_app
﻿
2.2. Aggiungi Dipendenze
Apri pubspec.yaml e aggiungi le seguenti dipendenze:
YAML
dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  parse_server_sdk_flutter: ^4.0.1
  provider: ^6.0.0
  # Add any additional packages you need, e.g., http, image_picker, etc.
dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  parse_server_sdk_flutter: ^4.0.1
  provider: ^6.0.0
  # Add any additional packages you need, e.g., http, image_picker, etc.
﻿
Esegui flutter pub get per installare i pacchetti.
2.3. Inizializza Parse SDK
In lib/main.dart, importa i pacchetti necessari e inizializza Parse:
Dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

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

  const keyApplicationId = 'YOUR_BACK4APP_APPLICATION_ID';
  const keyClientKey = 'YOUR_BACK4APP_CLIENT_KEY';
  const keyParseServerUrl = 'https://parseapi.back4app.com';

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

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // Build your app's UI here
}
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

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

  const keyApplicationId = 'YOUR_BACK4APP_APPLICATION_ID';
  const keyClientKey = 'YOUR_BACK4APP_CLIENT_KEY';
  const keyParseServerUrl = 'https://parseapi.back4app.com';

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

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // Build your app's UI here
}
﻿
Sostituisci 'YOUR_BACK4APP_APPLICATION_ID' e 'YOUR_BACK4APP_CLIENT_KEY' con le tue chiavi effettive di Back4App.
Passo 3 – Implementazione dell'autenticazione utente
Gli utenti devono registrarsi e accedere per prenotare eventi e gestire i propri profili.
3.1. Crea Schermate di Autenticazione
Crea due nuovi file Dart in lib/:
login_screen.dart
signup_screen.dart
login_screen.dart
Dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class LoginScreen extends StatefulWidget {
  @override
  _LoginScreenState createState() => _LoginScreenState();
}

class _LoginScreenState extends State<LoginScreen> {
  final TextEditingController usernameController = TextEditingController();
  final TextEditingController passwordController = TextEditingController();

  void doUserLogin() async {
    final username = usernameController.text.trim();
    final password = passwordController.text.trim();

    final user = ParseUser(username, password, null);
    var response = await user.login();

    if (response.success) {
      // Navigate to Home Screen
      Navigator.pushReplacementNamed(context, '/home');
    } else {
      // Show error message
      _showError(response.error!.message);
    }
  }

  void _showError(String message) {
    // Implement a method to show error messages
  }

  @override
  Widget build(BuildContext context) {
    // Build your login UI here
  }
}
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class LoginScreen extends StatefulWidget {
  @override
  _LoginScreenState createState() => _LoginScreenState();
}

class _LoginScreenState extends State<LoginScreen> {
  final TextEditingController usernameController = TextEditingController();
  final TextEditingController passwordController = TextEditingController();

  void doUserLogin() async {
    final username = usernameController.text.trim();
    final password = passwordController.text.trim();

    final user = ParseUser(username, password, null);
    var response = await user.login();

    if (response.success) {
      // Navigate to Home Screen
      Navigator.pushReplacementNamed(context, '/home');
    } else {
      // Show error message
      _showError(response.error!.message);
    }
  }

  void _showError(String message) {
    // Implement a method to show error messages
  }

  @override
  Widget build(BuildContext context) {
    // Build your login UI here
  }
}
﻿
signup_screen.dart
Dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class SignUpScreen extends StatefulWidget {
  @override
  _SignUpScreenState createState() => _SignUpScreenState();
}

class _SignUpScreenState extends State<SignUpScreen> {
  final TextEditingController usernameController = TextEditingController();
  final TextEditingController passwordController = TextEditingController();

  void doUserRegistration() async {
    final username = usernameController.text.trim();
    final password = passwordController.text.trim();

    final user = ParseUser(username, password, null);
    var response = await user.signUp();

    if (response.success) {
      // Navigate to Home Screen
      Navigator.pushReplacementNamed(context, '/home');
    } else {
      // Show error message
      _showError(response.error!.message);
    }
  }

  void _showError(String message) {
    // Implement a method to show error messages
  }

  @override
  Widget build(BuildContext context) {
    // Build your sign-up UI here
  }
}
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class SignUpScreen extends StatefulWidget {
  @override
  _SignUpScreenState createState() => _SignUpScreenState();
}

class _SignUpScreenState extends State<SignUpScreen> {
  final TextEditingController usernameController = TextEditingController();
  final TextEditingController passwordController = TextEditingController();

  void doUserRegistration() async {
    final username = usernameController.text.trim();
    final password = passwordController.text.trim();

    final user = ParseUser(username, password, null);
    var response = await user.signUp();

    if (response.success) {
      // Navigate to Home Screen
      Navigator.pushReplacementNamed(context, '/home');
    } else {
      // Show error message
      _showError(response.error!.message);
    }
  }

  void _showError(String message) {
    // Implement a method to show error messages
  }

  @override
  Widget build(BuildContext context) {
    // Build your sign-up UI here
  }
}
﻿
3.2. Aggiorna main.dart con le rotte
Dart
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Event Booking App',
      initialRoute: '/login',
      routes: {
        '/login': (context) => LoginScreen(),
        '/signup': (context) => SignUpScreen(),
        '/home': (context) => HomeScreen(),
        // Add other routes as needed
      },
    );
  }
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Event Booking App',
      initialRoute: '/login',
      routes: {
        '/login': (context) => LoginScreen(),
        '/signup': (context) => SignUpScreen(),
        '/home': (context) => HomeScreen(),
        // Add other routes as needed
      },
    );
  }
}
﻿
3.2. Aggiorna main.dart con le rotte
3.3. Implementare la schermata principale
Crea un home_screen.dart file dove gli utenti autenticati vengono reindirizzati.
Dart
import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Build your home screen UI here
  }
}
import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Build your home screen UI here
  }
}
﻿
Passo 4 – Visualizzazione degli eventi
Recupera gli eventi da Back4App e visualizzali in un elenco.
4.1. Crea il modello di evento
Crea una classe Dart event.dart in lib/models/.
Dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class Event extends ParseObject implements ParseCloneable {
  Event() : super(_keyTableName);
  Event.clone() : this();

  static const String _keyTableName = 'Event';
  static const String keyName = 'name';
  static const String keyDescription = 'description';
  static const String keyDate = 'date';
  static const String keyImage = 'image';
  static const String keyVenue = 'venue';
  static const String keyPrice = 'price';

  @override
  clone(Map<String, dynamic> map) => Event.clone()..fromJson(map);

  String? get name => get<String>(keyName);
  String? get description => get<String>(keyDescription);
  DateTime? get date => get<DateTime>(keyDate);
  ParseFileBase? get image => get<ParseFileBase>(keyImage);
  ParseObject? get venue => get<ParseObject>(keyVenue);
  double? get price => get<double>(keyPrice);
}
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class Event extends ParseObject implements ParseCloneable {
  Event() : super(_keyTableName);
  Event.clone() : this();

  static const String _keyTableName = 'Event';
  static const String keyName = 'name';
  static const String keyDescription = 'description';
  static const String keyDate = 'date';
  static const String keyImage = 'image';
  static const String keyVenue = 'venue';
  static const String keyPrice = 'price';

  @override
  clone(Map<String, dynamic> map) => Event.clone()..fromJson(map);

  String? get name => get<String>(keyName);
  String? get description => get<String>(keyDescription);
  DateTime? get date => get<DateTime>(keyDate);
  ParseFileBase? get image => get<ParseFileBase>(keyImage);
  ParseObject? get venue => get<ParseObject>(keyVenue);
  double? get price => get<double>(keyPrice);
}
﻿
4.2. Recupera eventi nella schermata principale
In home_screen.dart, recupera eventi e visualizzali.
Dart
import 'package:flutter/material.dart';
import 'models/event.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  Future<List<Event>> getEvents() async {
    QueryBuilder<Event> queryEvents = QueryBuilder<Event>(Event())
      ..orderByDescending('date');
    final ParseResponse apiResponse = await queryEvents.query();

    if (apiResponse.success && apiResponse.results != null) {
      return apiResponse.results as List<Event>;
    } else {
      return [];
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Events'),
      ),
      body: FutureBuilder<List<Event>>(
        future: getEvents(),
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            List<Event> events = snapshot.data!;
            return ListView.builder(
              itemCount: events.length,
              itemBuilder: (context, index) {
                Event event = events[index];
                return ListTile(
                  title: Text(event.name ?? 'No Title'),
                  subtitle: Text(event.date?.toLocal().toString() ?? ''),
                  onTap: () {
                    // Navigate to Event Details
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) => EventDetailsScreen(event: event),
                      ),
                    );
                  },
                );
              },
            );
          } else if (snapshot.hasError) {
            return Center(child: Text('Error loading events'));
          } else {
            return Center(child: CircularProgressIndicator());
          }
        },
      ),
    );
  }
}
import 'package:flutter/material.dart';
import 'models/event.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  Future<List<Event>> getEvents() async {
    QueryBuilder<Event> queryEvents = QueryBuilder<Event>(Event())
      ..orderByDescending('date');
    final ParseResponse apiResponse = await queryEvents.query();

    if (apiResponse.success && apiResponse.results != null) {
      return apiResponse.results as List<Event>;
    } else {
      return [];
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Events'),
      ),
      body: FutureBuilder<List<Event>>(
        future: getEvents(),
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            List<Event> events = snapshot.data!;
            return ListView.builder(
              itemCount: events.length,
              itemBuilder: (context, index) {
                Event event = events[index];
                return ListTile(
                  title: Text(event.name ?? 'No Title'),
                  subtitle: Text(event.date?.toLocal().toString() ?? ''),
                  onTap: () {
                    // Navigate to Event Details
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) => EventDetailsScreen(event: event),
                      ),
                    );
                  },
                );
              },
            );
          } else if (snapshot.hasError) {
            return Center(child: Text('Error loading events'));
          } else {
            return Center(child: CircularProgressIndicator());
          }
        },
      ),
    );
  }
}
﻿
4.3. Crea Schermata Dettagli Evento
Crea event_details_screen.dart.
Dart
import 'package:flutter/material.dart';
import 'models/event.dart';

class EventDetailsScreen extends StatelessWidget {
  final Event event;

  EventDetailsScreen({required this.event});

  void _bookTicket(BuildContext context) {
    // Implement ticket booking logic
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => SeatSelectionScreen(event: event),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    // Build UI to display event details
    return Scaffold(
      appBar: AppBar(
        title: Text(event.name ?? 'Event Details'),
      ),
      body: Column(
        children: [
          // Display event image, description, date, venue, etc.
          Text(event.description ?? ''),
          ElevatedButton(
            onPressed: () => _bookTicket(context),
            child: Text('Book Ticket'),
          ),
        ],
      ),
    );
  }
}
import 'package:flutter/material.dart';
import 'models/event.dart';

class EventDetailsScreen extends StatelessWidget {
  final Event event;

  EventDetailsScreen({required this.event});

  void _bookTicket(BuildContext context) {
    // Implement ticket booking logic
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => SeatSelectionScreen(event: event),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    // Build UI to display event details
    return Scaffold(
      appBar: AppBar(
        title: Text(event.name ?? 'Event Details'),
      ),
      body: Column(
        children: [
          // Display event image, description, date, venue, etc.
          Text(event.description ?? ''),
          ElevatedButton(
            onPressed: () => _bookTicket(context),
            child: Text('Book Ticket'),
          ),
        ],
      ),
    );
  }
}
﻿
Passo 5 – Implementazione della Selezione dei Posti
Consenti agli utenti di selezionare i posti prima della prenotazione.
5.1. Crea Schermata di Selezione dei Posti
Crea seat_selection_screen.dart.
Dart
import 'package:flutter/material.dart';
import 'models/event.dart';

class SeatSelectionScreen extends StatelessWidget {
  final Event event;

  SeatSelectionScreen({required this.event});

  // Mock data for seats
  final List<String> seats = List.generate(100, (index) => 'Seat ${index + 1}');

  @override
  Widget build(BuildContext context) {
    // Build UI for seat selection
    return Scaffold(
      appBar: AppBar(
        title: Text('Select Seats'),
      ),
      body: GridView.builder(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 5,
        ),
        itemCount: seats.length,
        itemBuilder: (context, index) {
          String seat = seats[index];
          return GestureDetector(
            onTap: () {
              // Handle seat selection
              // Navigate to Payment Screen
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => PaymentScreen(event: event, seat: seat),
                ),
              );
            },
            child: Card(
              child: Center(child: Text(seat)),
            ),
          );
        },
      ),
    );
  }
}
import 'package:flutter/material.dart';
import 'models/event.dart';

class SeatSelectionScreen extends StatelessWidget {
  final Event event;

  SeatSelectionScreen({required this.event});

  // Mock data for seats
  final List<String> seats = List.generate(100, (index) => 'Seat ${index + 1}');

  @override
  Widget build(BuildContext context) {
    // Build UI for seat selection
    return Scaffold(
      appBar: AppBar(
        title: Text('Select Seats'),
      ),
      body: GridView.builder(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 5,
        ),
        itemCount: seats.length,
        itemBuilder: (context, index) {
          String seat = seats[index];
          return GestureDetector(
            onTap: () {
              // Handle seat selection
              // Navigate to Payment Screen
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => PaymentScreen(event: event, seat: seat),
                ),
              );
            },
            child: Card(
              child: Center(child: Text(seat)),
            ),
          );
        },
      ),
    );
  }
}
﻿
Passo 6 – Elaborazione dei Pagamenti
Integra un gateway di pagamento per elaborare i pagamenti dei biglietti in modo sicuro.
6.1. Scegli un Gateway di Pagamento
Per questo tutorial, presumeremo l'uso di Stripe.
6.2. Configura l'Account Stripe e Ottieni le Chiavi API
Registrati per un account Stripe.
Ottieni la tua Chiave Pubblicabile e Chiave Segreta.
6.3. Aggiungi la Dipendenza di Stripe
Aggiungi stripe_payment pacchetto al tuo pubspec.yaml:
YAML
dependencies:
  stripe_payment: ^1.0.9
dependencies:
  stripe_payment: ^1.0.9
﻿
Esegui flutter pub get.
6.4. Implementare la schermata di pagamento
Crea payment_screen.dart.
Dart
import 'package:flutter/material.dart';
import 'package:stripe_payment/stripe_payment.dart';
import 'models/event.dart';

class PaymentScreen extends StatefulWidget {
  final Event event;
  final String seat;

  PaymentScreen({required this.event, required this.seat});

  @override
  _PaymentScreenState createState() => _PaymentScreenState();
}

class _PaymentScreenState extends State<PaymentScreen> {
  void initState() {
    super.initState();
    StripePayment.setOptions(
      StripeOptions(
        publishableKey: 'YOUR_STRIPE_PUBLISHABLE_KEY',
        // Optionally set other options
      ),
    );
  }

  void _startPayment() async {
    // Implement payment logic
    // Create Payment Method
    PaymentMethod paymentMethod = await StripePayment.paymentRequestWithCardForm(
      CardFormPaymentRequest(),
    );

    // Process the payment using a cloud function or your server
    // For simplicity, we'll assume payment is successful

    _saveTicket();
  }

  void _saveTicket() async {
    // Save ticket information to Back4App
    final ticket = ParseObject('Ticket')
      ..set('event', widget.event)
      ..set('user', await ParseUser.currentUser())
      ..set('seatNumber', widget.seat)
      ..set('price', widget.event.price)
      ..set('isBooked', true);

    await ticket.save();

    // Navigate to confirmation screen or display success message
  }

  @override
  Widget build(BuildContext context) {
    // Build payment UI
    return Scaffold(
      appBar: AppBar(
        title: Text('Payment'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: _startPayment,
          child: Text('Pay \$${widget.event.price}'),
        ),
      ),
    );
  }
}
import 'package:flutter/material.dart';
import 'package:stripe_payment/stripe_payment.dart';
import 'models/event.dart';

class PaymentScreen extends StatefulWidget {
  final Event event;
  final String seat;

  PaymentScreen({required this.event, required this.seat});

  @override
  _PaymentScreenState createState() => _PaymentScreenState();
}

class _PaymentScreenState extends State<PaymentScreen> {
  void initState() {
    super.initState();
    StripePayment.setOptions(
      StripeOptions(
        publishableKey: 'YOUR_STRIPE_PUBLISHABLE_KEY',
        // Optionally set other options
      ),
    );
  }

  void _startPayment() async {
    // Implement payment logic
    // Create Payment Method
    PaymentMethod paymentMethod = await StripePayment.paymentRequestWithCardForm(
      CardFormPaymentRequest(),
    );

    // Process the payment using a cloud function or your server
    // For simplicity, we'll assume payment is successful

    _saveTicket();
  }

  void _saveTicket() async {
    // Save ticket information to Back4App
    final ticket = ParseObject('Ticket')
      ..set('event', widget.event)
      ..set('user', await ParseUser.currentUser())
      ..set('seatNumber', widget.seat)
      ..set('price', widget.event.price)
      ..set('isBooked', true);

    await ticket.save();

    // Navigate to confirmation screen or display success message
  }

  @override
  Widget build(BuildContext context) {
    // Build payment UI
    return Scaffold(
      appBar: AppBar(
        title: Text('Payment'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: _startPayment,
          child: Text('Pay \$${widget.event.price}'),
        ),
      ),
    );
  }
}
﻿
Nota: L'elaborazione dei pagamenti richiede una gestione sicura dei dati sensibili. In un'app di produzione, dovresti elaborare i pagamenti in modo sicuro utilizzando il tuo server o funzioni cloud.
Passo 7 – Gestire i profili utente
Consenti agli utenti di visualizzare e gestire le loro prenotazioni e preferenze.
7.1. Crea Schermata Profilo
Crea profile_screen.dart.
Dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class ProfileScreen extends StatelessWidget {
  Future<List<ParseObject>> getUserTickets() async {
    final user = await ParseUser.currentUser();
    QueryBuilder<ParseObject> queryTickets = QueryBuilder<ParseObject>(ParseObject('Ticket'))
      ..whereEqualTo('user', user)
      ..includeObject(['event']);

    final ParseResponse apiResponse = await queryTickets.query();

    if (apiResponse.success && apiResponse.results != null) {
      return apiResponse.results as List<ParseObject>;
    } else {
      return [];
    }
  }

  @override
  Widget build(BuildContext context) {
    // Build profile UI
    return Scaffold(
      appBar: AppBar(
        title: Text('My Profile'),
      ),
      body: FutureBuilder<List<ParseObject>>(
        future: getUserTickets(),
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            List<ParseObject> tickets = snapshot.data!;
            return ListView.builder(
              itemCount: tickets.length,
              itemBuilder: (context, index) {
                ParseObject ticket = tickets[index];
                ParseObject event = ticket.get('event');
                return ListTile(
                  title: Text(event.get<String>('name') ?? 'No Event Name'),
                  subtitle: Text('Seat: ${ticket.get<String>('seatNumber')}'),
                );
              },
            );
          } else if (snapshot.hasError) {
            return Center(child: Text('Error loading tickets'));
          } else {
            return Center(child: CircularProgressIndicator());
          }
        },
      ),
    );
  }
}
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class ProfileScreen extends StatelessWidget {
  Future<List<ParseObject>> getUserTickets() async {
    final user = await ParseUser.currentUser();
    QueryBuilder<ParseObject> queryTickets = QueryBuilder<ParseObject>(ParseObject('Ticket'))
      ..whereEqualTo('user', user)
      ..includeObject(['event']);

    final ParseResponse apiResponse = await queryTickets.query();

    if (apiResponse.success && apiResponse.results != null) {
      return apiResponse.results as List<ParseObject>;
    } else {
      return [];
    }
  }

  @override
  Widget build(BuildContext context) {
    // Build profile UI
    return Scaffold(
      appBar: AppBar(
        title: Text('My Profile'),
      ),
      body: FutureBuilder<List<ParseObject>>(
        future: getUserTickets(),
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            List<ParseObject> tickets = snapshot.data!;
            return ListView.builder(
              itemCount: tickets.length,
              itemBuilder: (context, index) {
                ParseObject ticket = tickets[index];
                ParseObject event = ticket.get('event');
                return ListTile(
                  title: Text(event.get<String>('name') ?? 'No Event Name'),
                  subtitle: Text('Seat: ${ticket.get<String>('seatNumber')}'),
                );
              },
            );
          } else if (snapshot.hasError) {
            return Center(child: Text('Error loading tickets'));
          } else {
            return Center(child: CircularProgressIndicator());
          }
        },
      ),
    );
  }
}
﻿
7.2. Aggiungi Navigazione alla Schermata Profilo
Nel tuo home_screen.dart o nel menu di navigazione principale, aggiungi un link alla Schermata Profilo.
Dart
IconButton(
  icon: Icon(Icons.person),
  onPressed: () {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => ProfileScreen()),
    );
  },
),
IconButton(
  icon: Icon(Icons.person),
  onPressed: () {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => ProfileScreen()),
    );
  },
),
﻿
Passo 8 – Testare l'App
Esegui la tua app usando:
Bash
flutter run
flutter run
﻿
Testa le seguenti funzionalità:
Registrati e accedi.
Visualizza l'elenco degli eventi.
Visualizza i dettagli dell'evento.
Seleziona i posti e procedi al pagamento.
Elabora un pagamento (modalità di test se possibile).
Visualizza le prenotazioni nel profilo.
Conclusione
Congratulazioni! Hai costruito un'app completa per la prenotazione di eventi utilizzando Flutter e Back4App. Questa app consente agli utenti di sfogliare eventi, prenotare biglietti con selezione dei posti, elaborare pagamenti e gestire i propri profili e prenotazioni.
Da qui, puoi migliorare la tua app:
Aggiungendo notifiche push per i promemoria degli eventi.
Implementando la ricerca e il filtraggio per gli eventi.
Migliorando l'interfaccia utente/esperienza utente con un design e animazioni migliori.
Garantendo l'elaborazione dei pagamenti con validazione lato server.
Per ulteriori informazioni sulle funzionalità di Flutter e Back4App, controlla:
﻿Documentazione di Flutter﻿
﻿Documentazione di Back4App﻿
﻿Guida al Cloud Code di Parse Server﻿
Integrando Flutter con Back4App, sfrutti una combinazione potente per costruire applicazioni mobili scalabili e ricche di funzionalità in modo efficiente.
Aggiornato 23 Jan 2025
Questa pagina ti è stata di aiuto?
Come costruire un'app di immersione linguistica in AR con Flutter e Back4App
AVANTI IL PROSSIMO
Crea un'applicazione di chat in tempo reale in Flutter con Back4App.