Flutter Templates
How to Build an Event Booking App with Flutter and Back4App

33min
Introduction
In today's fast-paced world, managing events and bookings through mobile applications has become increasingly essential. An Event Booking App allows users to browse upcoming events, book tickets, select seats, and manage their bookings seamlessly. In this tutorial, you will learn how to create a complete Event Booking App using Flutter for the frontend and Back4App as the backend service.
By the end of this tutorial, you will have built a functional app that:
Displays a list of events with details.
Allows users to view event schedules and venue information.
Enables ticket booking with seat selection.
Processes payments securely (integration with a payment gateway).
Manages user profiles, including booking history and preferences.
Let's get started!
Prerequisites
To complete this tutorial, you will need:
Flutter SDK installed on your local machine. Follow the official Flutter installation guide.
Basic knowledge of Dart and Flutter. If you're new to Flutter, consider going through Flutter's introductory tutorial.
A Back4App account. Sign up for a free account at Back4App.
Back4App Flutter SDK integrated into your project. You can learn how to set it up by following the Back4App Flutter Guide.
A code editor like Visual Studio Code or Android Studio.
Node.js and npm installed for running Back4App cloud functions. Install them from the official Node.js website.
Step 1 – Setting Up the Back4App Backend
In this step, you will set up your Back4App project, create the necessary classes (tables), and configure the backend to store event data, ticket information, and user profiles.
1.1. Create a New Back4App Application
Log in to your Back4App account.
Click on "Create new App".
Enter an App Name (e.g., "EventBookingApp") and select your App Icon.
Click "Create".
1.2. Configure Application Keys
Navigate to your app's Dashboard.
Click on "App Settings" > "Security & Keys".
Note down the Application ID and Client Key. You will need these to initialize the Parse SDK in your Flutter app.
1.3. Define the Data Models
You need to create the following classes in Back4App:
Event: Stores event details.
Venue: Stores venue information.
Ticket: Manages ticket availability and bookings.
User: Manages user profiles (default class).
Create the Event Class
In the left sidebar, click on "Database" to open the Data Browser.
Click on "Create a class".
Select "Custom", enter "Event" as the class name, and click "Create class".
Add the following columns to the Event class:
name (String)
description (String)
date (Date)
image (File)
venue (Pointer to Venue)
price (Number)
Create the Venue Class
Repeat the steps to create a new class named "Venue".
Add the following columns:
name (String)
address (String)
capacity (Number)
seatingChart (File)
Create the Ticket Class
Create a new class named "Ticket".
Add the following columns:
event (Pointer to Event)
user (Pointer to User)
seatNumber (String)
price (Number)
isBooked (Boolean)
1.4. Enable User Authentication
In the left sidebar, click on "Server Settings" > "General Settings".
Under "Authentication", ensure that "Enable Class Level Permissions" is checked.
Configure the User class permissions to allow users to sign up and log in.
1.5. Set Up Cloud Functions (Optional for Payment Processing)
For payment integration, you might need to write cloud functions. This step will depend on the payment gateway you choose (e.g., Stripe, PayPal). Refer to Back4App's documentation on Cloud Code Functions.
Step 2 – Initializing the Flutter Project
In this step, you will set up the Flutter project and integrate the Back4App Parse SDK.
2.1. Create a New Flutter Project
Open your terminal and run:
Bash
flutter create event_booking_app
flutter create event_booking_app
﻿
Navigate to the project directory:
Bash
cd event_booking_app
cd event_booking_app
﻿
2.2. Add Dependencies
Open pubspec.yaml and add the following dependencies:
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.
﻿
Run flutter pub get to install the packages.
2.3. Initialize Parse SDK
In lib/main.dart, import the necessary packages and initialize 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
}
﻿
Replace 'YOUR_BACK4APP_APPLICATION_ID' and 'YOUR_BACK4APP_CLIENT_KEY' with your actual keys from Back4App.
Step 3 – Implementing User Authentication
Users need to sign up and log in to book events and manage their profiles.
3.1. Create Authentication Screens
Create two new Dart files 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. Update main.dart with Routes
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.3. Implement Home Screen
Create a home_screen.dart file where authenticated users are redirected.
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
  }
}
﻿
Step 4 – Displaying Events
Fetch events from Back4App and display them in a list.
4.1. Create Event Model
Create a Dart class 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. Fetch Events in Home Screen
In home_screen.dart, fetch events and display them.
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. Create Event Details Screen
Create 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'),
          ),
        ],
      ),
    );
  }
}
﻿
Step 5 – Implementing Seat Selection
Allow users to select seats before booking.
5.1. Create Seat Selection Screen
Create 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)),
            ),
          );
        },
      ),
    );
  }
}
﻿
Step 6 – Processing Payments
Integrate a payment gateway to process ticket payments securely.
6.1. Choose a Payment Gateway
For this tutorial, we will assume the use of Stripe.
6.2. Set Up Stripe Account and Obtain API Keys
Sign up for a Stripe account.
Obtain your Publishable Key and Secret Key.
6.3. Add Stripe Dependency
Add stripe_payment package to your pubspec.yaml:
YAML
dependencies:
  stripe_payment: ^1.0.9
dependencies:
  stripe_payment: ^1.0.9
﻿
Run flutter pub get.
6.4. Implement Payment Screen
Create 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}'),
        ),
      ),
    );
  }
}
﻿
Note: Payment processing requires secure handling of sensitive data. In a production app, you should process payments securely using your own server or cloud functions.
Step 7 – Managing User Profiles
Allow users to view and manage their bookings and preferences.
7.1. Create Profile Screen
Create 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. Add Navigation to Profile Screen
In your home_screen.dart or main navigation drawer, add a link to the Profile Screen.
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()),
    );
  },
),
﻿
Step 8 – Testing the App
Run your app using:
Bash
flutter run
flutter run
﻿
Test the following functionalities:
Sign up and log in.
View the list of events.
View event details.
Select seats and proceed to payment.
Process a payment (test mode if possible).
View bookings in the profile.
Conclusion
Congratulations! You have built a complete Event Booking App using Flutter and Back4App. This app allows users to browse events, book tickets with seat selection, process payments, and manage their profiles and bookings.
From here, you can enhance your app by:
Adding push notifications for event reminders.
Implementing search and filtering for events.
Enhancing the UI/UX with better design and animations.
Securing payment processing with server-side validation.
For more information on Flutter and Back4App features, check out:
﻿Flutter Documentation﻿
﻿Back4App Documentation﻿
﻿Parse Server Cloud Code Guide﻿
By integrating Flutter with Back4App, you leverage a powerful combination to build scalable, feature-rich mobile applications efficiently.
Updated 27 Sep 2024
Did this page help you?
How to Build an AR Language Immersion App with Flutter and Back4App
Building a Real-Time Chat Application in Flutter with Back4App