Flutter Templates
Wie man eine Veranstaltungsbuchungs-App mit Flutter und Back4App erstellt

34min
Einführung
In der heutigen schnelllebigen Welt ist es zunehmend wichtig geworden, Veranstaltungen und Buchungen über mobile Anwendungen zu verwalten. Eine Event-Buchungs-App ermöglicht es den Nutzern, bevorstehende Veranstaltungen zu durchsuchen, Tickets zu buchen, Sitzplätze auszuwählen und ihre Buchungen nahtlos zu verwalten. In diesem Tutorial lernen Sie, wie Sie eine vollständige Event-Buchungs-App mit Flutter für das Frontend und Back4App als Backend-Service erstellen.
Am Ende dieses Tutorials haben Sie eine funktionale App erstellt, die:
Eine Liste von Veranstaltungen mit Details anzeigt.
Es den Nutzern ermöglicht, Veranstaltungspläne und Informationen zu Veranstaltungsorten einzusehen.
Die Buchung von Tickets mit Sitzplatzwahl ermöglicht.
Zahlungen sicher verarbeitet (Integration mit einem Zahlungs-Gateway).
Benutzerprofile verwaltet, einschließlich Buchungshistorie und Präferenzen.
Lass uns anfangen!
Voraussetzungen
Um dieses Tutorial abzuschließen, benötigen Sie:
Flutter SDK auf Ihrem lokalen Rechner installiert. Folgen Sie dem offiziellen Flutter Installationsanleitung.
Grundkenntnisse in Dart und Flutter. Wenn Sie neu bei Flutter sind, sollten Sie Flutters Einführungstutorial durchgehen.
Ein Back4App-Konto. Melden Sie sich für ein kostenloses Konto bei Back4App an.
Back4App Flutter SDK in Ihr Projekt integriert. Sie können lernen, wie Sie es einrichten, indem Sie die Back4App Flutter-Anleitung befolgen.
Ein Code-Editor wie Visual Studio Code oder Android Studio.
Node.js und npm installiert, um Back4App-Cloudfunktionen auszuführen. Installieren Sie sie von der offiziellen Node.js-Website.
Schritt 1 – Einrichten des Back4App-Backends
In diesem Schritt richten Sie Ihr Back4App-Projekt ein, erstellen die erforderlichen Klassen (Tabellen) und konfigurieren das Backend, um Veranstaltungsdaten, Ticketinformationen und Benutzerprofile zu speichern.
1.1. Erstellen Sie eine neue Back4App-Anwendung
Melden Sie sich bei Ihrem Back4App-Konto an.
Klicken Sie auf "Neue App erstellen".
Geben Sie einen App-Namen (z. B. "EventBookingApp") ein und wählen Sie Ihr App-Icon aus.
Klicken Sie auf "Erstellen".
1.2. Konfigurieren Sie die Anwendungs-Schlüssel
Navigieren Sie zu Ihrem App-Dashboard.
Klicken Sie auf "App-Einstellungen" > "Sicherheit & Schlüssel".
Notieren Sie sich die Anwendungs-ID und den Client-Schlüssel. Sie benötigen diese, um das Parse SDK in Ihrer Flutter-App zu initialisieren.
1.3. Definiere die Datenmodelle
Du musst die folgenden Klassen in Back4App erstellen:
Ereignis: Speichert Ereignisdetails.
Veranstaltungsort: Speichert Informationen über den Veranstaltungsort.
Ticket: Verwalten der Ticketverfügbarkeit und Buchungen.
Benutzer: Verwalten von Benutzerprofilen (Standardklasse).
Erstelle die Ereignisklasse
Klicken Sie in der linken Seitenleiste auf "Datenbank" um den Datenbrowser zu öffnen.
Klicken Sie auf "Klasse erstellen".
Wählen Sie "Benutzerdefiniert", geben Sie "Ereignis" als Klassennamen ein und klicken Sie auf "Klasse erstellen".
Fügen Sie die folgenden Spalten zur Ereignis-Klasse hinzu:
name (String)
beschreibung (String)
datum (Datum)
bild (Datei)
ort (Verweis auf Veranstaltungsort)
preis (Zahl)
Erstellen Sie die Veranstaltungsort-Klasse
Wiederholen Sie die Schritte, um eine neue Klasse mit dem Namen "Veranstaltungsort" zu erstellen.
Fügen Sie die folgenden Spalten hinzu:
name (String)
adresse (String)
kapazität (Zahl)
sitzplan (Datei)
Erstellen Sie die Ticketklasse
Erstellen Sie eine neue Klasse mit dem Namen "Ticket".
Fügen Sie die folgenden Spalten hinzu:
Ereignis (Zeiger auf Ereignis)
Benutzer (Zeiger auf Benutzer)
Sitznummer (String)
Preis (Zahl)
istGebucht (Boolean)
1.4. Benutzer-Authentifizierung aktivieren
Klicken Sie in der linken Seitenleiste auf "Servereinstellungen" > "Allgemeine Einstellungen".
Stellen Sie unter "Authentifizierung", sicher, dass "Klassenebene Berechtigungen aktivieren" aktiviert ist.
Konfigurieren Sie die Benutzer Klassenberechtigungen, um Benutzern die Anmeldung und das Einloggen zu ermöglichen.
1.5. Cloud-Funktionen einrichten (Optional für die Zahlungsabwicklung)
Für die Zahlungsintegration müssen Sie möglicherweise Cloud-Funktionen schreiben. Dieser Schritt hängt von dem Zahlungsanbieter ab, den Sie wählen (z. B. Stripe, PayPal). Konsultieren Sie die Dokumentation von Back4App zu Cloud-Code-Funktionen.
Schritt 2 – Initialisierung des Flutter-Projekts
In diesem Schritt richten Sie das Flutter-Projekt ein und integrieren das Back4App Parse SDK.
2.1. Erstellen Sie ein neues Flutter-Projekt
Öffnen Sie Ihr Terminal und führen Sie aus:
Bash
flutter create event_booking_app
flutter create event_booking_app
﻿
Navigieren Sie zum Projektverzeichnis:
Bash
cd event_booking_app
cd event_booking_app
﻿
2.2. Abhängigkeiten hinzufügen
Öffnen Sie pubspec.yaml und fügen Sie die folgenden Abhängigkeiten hinzu:
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.
﻿
Führen Sie flutter pub get aus, um die Pakete zu installieren.
2.3. Parse SDK initialisieren
In lib/main.dart, importieren Sie die erforderlichen Pakete und initialisieren Sie 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
}
﻿
Ersetzen Sie 'YOUR_BACK4APP_APPLICATION_ID' und 'YOUR_BACK4APP_CLIENT_KEY' durch Ihre tatsächlichen Schlüssel von Back4App.
Schritt 3 – Implementierung der Benutzerauthentifizierung
Benutzer müssen sich registrieren und anmelden, um Veranstaltungen zu buchen und ihre Profile zu verwalten.
3.1. Erstellen von Authentifizierungsbildschirmen
Erstellen Sie zwei neue Dart-Dateien 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. Aktualisiere main.dart mit Routen
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. Aktualisiere main.dart mit Routen
3.3. Implementieren Sie den Startbildschirm
Erstellen Sie eine home_screen.dart-Datei, in die authentifizierte Benutzer umgeleitet werden.
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
  }
}
﻿
Schritt 4 – Veranstaltungen anzeigen
Holen Sie Veranstaltungen von Back4App und zeigen Sie sie in einer Liste an.
4.1. Ereignismodell erstellen
Erstellen Sie eine Dart-Klasse 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. Veranstaltungen auf dem Startbildschirm abrufen
In home_screen.dart, Veranstaltungen abrufen und anzeigen.
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. Ereignisdetails Bildschirm erstellen
Erstellen 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'),
          ),
        ],
      ),
    );
  }
}
﻿
Schritt 5 – Implementierung der Sitzplatzwahl
Ermöglichen Sie den Benutzern, Sitzplätze vor der Buchung auszuwählen.
5.1. Erstellen Sie den Bildschirm zur Sitzplatzwahl
Erstellen Sie 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)),
            ),
          );
        },
      ),
    );
  }
}
﻿
Schritt 6 – Zahlungsabwicklung
Integrieren Sie ein Zahlungs-Gateway, um Ticketzahlungen sicher zu verarbeiten.
6.1. Wählen Sie ein Zahlungs-Gateway
Für dieses Tutorial nehmen wir die Verwendung von Stripe an.
6.2. Richten Sie ein Stripe-Konto ein und erhalten Sie API-Schlüssel
Registrieren Sie sich für ein Stripe-Konto.
Erhalten Sie Ihren veröffentlichten Schlüssel und geheimen Schlüssel.
6.3. Fügen Sie die Stripe-Abhängigkeit hinzu
Fügen Sie das stripe_payment-Paket zu Ihrer pubspec.yaml:
YAML
dependencies:
  stripe_payment: ^1.0.9
dependencies:
  stripe_payment: ^1.0.9
﻿
Führen Sie flutter pub get aus.
6.4. Zahlungsbildschirm implementieren
Erstellen Sie 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}'),
        ),
      ),
    );
  }
}
﻿
Hinweis: Die Zahlungsabwicklung erfordert eine sichere Handhabung sensibler Daten. In einer Produktionsanwendung sollten Sie Zahlungen sicher über Ihren eigenen Server oder Cloud-Funktionen verarbeiten.
Schritt 7 – Verwaltung von Benutzerprofilen
Erlauben Sie Benutzern, ihre Buchungen und Präferenzen anzuzeigen und zu verwalten.
7.1. Profilbildschirm erstellen
Erstellen Sie 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. Navigation zum Profilbildschirm hinzufügen
Fügen Sie in Ihrem home_screen.dart oder im Hauptnavigationsmenü einen Link zum Profilbildschirm hinzu.
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()),
    );
  },
),
﻿
Schritt 8 – Testen der App
Führen Sie Ihre App mit folgendem Befehl aus:
Bash
flutter run
flutter run
﻿
Testen Sie die folgenden Funktionen:
Registrieren und einloggen.
Die Liste der Veranstaltungen anzeigen.
Veranstaltungsdetails anzeigen.
Sitze auswählen und zur Zahlung fortfahren.
Eine Zahlung verarbeiten (Testmodus, wenn möglich).
Buchungen im Profil anzeigen.
Fazit
Herzlichen Glückwunsch! Sie haben eine vollständige Event-Buchungs-App mit Flutter und Back4App erstellt. Diese App ermöglicht es Benutzern, Veranstaltungen zu durchsuchen, Tickets mit Sitzplatzwahl zu buchen, Zahlungen zu verarbeiten und ihre Profile und Buchungen zu verwalten.
Von hier aus können Sie Ihre App verbessern, indem Sie:
Push-Benachrichtigungen für Veranstaltungs-Erinnerungen hinzufügen.
Such- und Filterfunktionen für Veranstaltungen implementieren.
Die UI/UX mit besserem Design und Animationen verbessern.
Die Zahlungsabwicklung mit serverseitiger Validierung sichern.
Für weitere Informationen zu Flutter und Back4App-Funktionen besuchen Sie:
﻿Flutter-Dokumentation﻿
﻿Back4App-Dokumentation﻿
﻿Parse Server Cloud Code Anleitung﻿
Durch die Integration von Flutter mit Back4App nutzen Sie eine leistungsstarke Kombination, um skalierbare, funktionsreiche mobile Anwendungen effizient zu erstellen.
Aktualisiert 23 Jan 2025
Hat Ihnen diese Seite geholfen?
Wie man eine AR-Sprachimmersion-App mit Flutter und Back4App erstellt
ALS NÄCHSTES
Einen Echtzeit-Chat-Anwendung in Flutter mit Back4App erstellen