Шаблоны Flutter
Как создать приложение для бронирования событий с помощью Flutter и Back4App

34min
Введение
В современном быстром мире управление событиями и бронированиями через мобильные приложения стало все более важным. Приложение для бронирования событий позволяет пользователям просматривать предстоящие события, бронировать билеты, выбирать места и управлять своими бронированиями без проблем. В этом учебном пособии вы узнаете, как создать полное приложение для бронирования событий с использованием Flutter для фронтенда и Back4App в качестве бэкенд-сервиса.
К концу этого учебного пособия вы создадите функциональное приложение, которое:
Отображает список событий с деталями.
Позволяет пользователям просматривать расписания событий и информацию о местах проведения.
Позволяет бронировать билеты с выбором мест.
Обрабатывает платежи безопасно (интеграция с платежным шлюзом).
Управляет профилями пользователей, включая историю бронирований и предпочтения.
Давайте начнем!
Предварительные требования
Чтобы завершить это учебное пособие, вам потребуется:
Flutter SDK установлен на вашем локальном компьютере. Следуйте официальному руководству по установке Flutter.
Базовые знания Dart и Flutter. Если вы новичок в Flutter, рассмотрите возможность прохождения вводного учебника Flutter.
Аккаунт Back4App. Зарегистрируйтесь для получения бесплатного аккаунта на Back4App.
Back4App Flutter SDK интегрирован в ваш проект. Вы можете узнать, как его настроить, следуя Руководству Back4App по Flutter.
Редактор кода такой как Visual Studio Code или Android Studio.
Node.js и npm установлены для запуска облачных функций Back4App. Установите их с официального сайта Node.js.
Шаг 1 – Настройка бэкенда Back4App
На этом этапе вы настроите свой проект Back4App, создадите необходимые классы (таблицы) и настроите бэкенд для хранения данных о событиях, информации о билетах и профилях пользователей.
1.1. Создание нового приложения Back4App
Войдите в свою учетную запись Back4App.
Нажмите на "Создать новое приложение".
Введите Название приложения (например, "EventBookingApp") и выберите свой Иконка приложения.
Нажмите "Создать".
1.2. Настройка ключей приложения
Перейдите на Панель управления вашего приложения.
Нажмите на "Настройки приложения" > "Безопасность и ключи".
Запишите Идентификатор приложения и Ключ клиента. Они понадобятся вам для инициализации Parse SDK в вашем приложении Flutter.
1.3. Определите модели данных
Вам нужно создать следующие классы в Back4App:
Событие: Хранит детали события.
Место: Хранит информацию о месте.
Билет: Управляет доступностью и бронированием билетов.
Пользователь: Управляет профилями пользователей (класс по умолчанию).
Создайте класс события
В левом боковом меню нажмите на "База данных" чтобы открыть Обозреватель данных.
Нажмите на "Создать класс".
Выберите "Пользовательский", введите "Событие" в качестве имени класса и нажмите "Создать класс".
Добавьте следующие столбцы в класс Событие :
имя (Строка)
описание (Строка)
дата (Дата)
изображение (Файл)
место (Указатель на Место)
цена (Число)
Создайте класс Место
Повторите шаги, чтобы создать новый класс с именем "Место".
Добавьте следующие столбцы:
имя (Строка)
адрес (Строка)
вместимость (Число)
планСидений (Файл)
Создайте класс Ticket
Создайте новый класс с именем "Ticket".
Добавьте следующие столбцы:
событие (Указатель на событие)
пользователь (Указатель на пользователя)
номер места (Строка)
цена (Число)
забронировано (Булевый)
1.4. Включите аутентификацию пользователя
В левой боковой панели нажмите на "Настройки сервера" > "Общие настройки".
В разделе "Аутентификация", убедитесь, что "Включить разрешения на уровне класса" отмечено.
Настройте разрешения класса Пользователь для разрешения пользователям регистрироваться и входить в систему.
1.5. Настройка облачных функций (необязательно для обработки платежей)
Для интеграции платежей вам может понадобиться написать облачные функции. Этот шаг будет зависеть от платежного шлюза, который вы выберете (например, Stripe, PayPal). Обратитесь к документации Back4App по Облачные функции кода.
Шаг 2 – Инициализация проекта Flutter
На этом этапе вы настроите проект Flutter и интегрируете Back4App Parse SDK.
2.1. Создать новый проект Flutter
Откройте терминал и выполните:
Bash
flutter create event_booking_app
flutter create event_booking_app
﻿
Перейдите в каталог проекта:
Bash
cd event_booking_app
cd event_booking_app
﻿
2.2. Добавить зависимости
Откройте pubspec.yaml и добавьте следующие зависимости:
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.
﻿
Запустите flutter pub get для установки пакетов.
2.3. Инициализация Parse SDK
В lib/main.dart, импортируйте необходимые пакеты и инициализируйте 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
}
﻿
Замените 'YOUR_BACK4APP_APPLICATION_ID' и 'YOUR_BACK4APP_CLIENT_KEY' на ваши реальные ключи из Back4App.
Шаг 3 – Реализация аутентификации пользователей
Пользователи должны зарегистрироваться и войти в систему, чтобы забронировать мероприятия и управлять своими профилями.
3.1. Создание экранов аутентификации
Создайте два новых файла Dart в 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. Обновите main.dart с маршрутами
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. Обновите main.dart с маршрутами
3.3. Реализация главного экрана
Создайте файл home_screen.dart, куда будут перенаправлены аутентифицированные пользователи.
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
  }
}
﻿
Шаг 4 – Отображение событий
Получите события из Back4App и отобразите их в списке.
4.1. Создание модели события
Создайте класс Dart event.dart в 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. Получение событий на главном экране
В home_screen.dart, получайте события и отображайте их.
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. Создание экрана деталей события
Создать 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'),
          ),
        ],
      ),
    );
  }
}
﻿
Шаг 5 – Реализация выбора мест
Позвольте пользователям выбирать места перед бронированием.
5.1. Создать экран выбора мест
Создайте 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)),
            ),
          );
        },
      ),
    );
  }
}
﻿
Шаг 6 – Обработка платежей
Интегрируйте платежный шлюз для безопасной обработки платежей за билеты.
6.1. Выберите платежный шлюз
Для этого учебника мы будем предполагать использование Stripe.
6.2. Настройте учетную запись Stripe и получите ключи API
Зарегистрируйтесь для получения учетной записи Stripe.
Получите ваш Публикуемый ключ и Секретный ключ.
6.3. Добавьте зависимость Stripe
Добавьте stripe_payment пакет в ваш pubspec.yaml:
YAML
dependencies:
  stripe_payment: ^1.0.9
dependencies:
  stripe_payment: ^1.0.9
﻿
Запустите flutter pub get.
6.4. Реализация экрана оплаты
Создайте 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}'),
        ),
      ),
    );
  }
}
﻿
Примечание: Обработка платежей требует безопасного обращения с конфиденциальными данными. В производственном приложении вы должны обрабатывать платежи безопасно, используя свой собственный сервер или облачные функции.
Шаг 7 – Управление профилями пользователей
Позвольте пользователям просматривать и управлять своими бронированиями и предпочтениями.
7.1. Создать экран профиля
Создать 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. Добавить навигацию на экран профиля
В вашем home_screen.dart или главном навигационном меню добавьте ссылку на экран профиля.
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()),
    );
  },
),
﻿
Шаг 8 – Тестирование приложения
Запустите ваше приложение с помощью:
Bash
flutter run
flutter run
﻿
Проверьте следующие функции:
Зарегистрироваться и войти.
Просмотреть список событий.
Просмотреть детали события.
Выбрать места и перейти к оплате.
Обработать платеж (в тестовом режиме, если возможно).
Просмотреть бронирования в профиле.
Заключение
Поздравляем! Вы создали полное приложение для бронирования событий с использованием Flutter и Back4App. Это приложение позволяет пользователям просматривать события, бронировать билеты с выбором мест, обрабатывать платежи и управлять своими профилями и бронированиями.
Отсюда вы можете улучшить свое приложение, добавив:
Добавление push-уведомлений для напоминаний о событиях.
Реализация поиска и фильтрации событий.
Улучшение UI/UX с помощью лучшего дизайна и анимаций.
Обеспечение безопасности обработки платежей с помощью серверной валидации.
Для получения дополнительной информации о функциях Flutter и Back4App, ознакомьтесь с:
﻿Документация Flutter﻿
﻿Документация Back4App﻿
﻿Руководство по облачному коду Parse Server﻿
Интегрируя Flutter с Back4App, вы используете мощное сочетание для эффективной разработки масштабируемых, богатых функционалом мобильных приложений.
Обновлено 23 Jan 2025
Помогла ли вам эта страница?
Как создать приложение для языкового погружения с дополненной реальностью на Flutter и Back4App
Создание приложения для чата в реальном времени на Flutter с Back4App