Больше
Как использовать обработку данных в Flutter с использованием List.generate и Back4app

10min
Введение
В Flutter самым простым способом создания динамического списка является использование List.generate. Это особенно полезно при работе с данными, полученными через бэкенд-сервис, такой как Back4app. Будь то динамические элементы пользовательского интерфейса, обработка нескольких записей данных или оптимизация сетевых запросов, List.generate по крайней мере упростит ваш код и повысит производительность.

В этом учебном пособии мы увидим, как эффективно обрабатывать данные бэкенда, используя List.generate в Flutter. В этом примере вы увидите, как создать простое приложение Flutter с Back4App для динамического получения и отображения отзывов пользователей, оценивая их в процессе. Вы узнаете о обработке данных бэкенда, оптимизации сетевых запросов и пакетных операциях с List.generate.
Предварительные требования
Чтобы завершить это учебное пособие, вам потребуется:
Учетная запись Back4app. Зарегистрируйтесь для получения бесплатной учетной записи на Back4app.com.
Настроенная среда разработки Flutter на вашем локальном компьютере. Следуйте руководству по установке Flutter, если вы еще не настроили ее.
Базовые знания Dart, виджетов Flutter и асинхронного программирования.
Шаг 1 – Настройка вашего бэкенда Back4app
Создайте проект Back4app: Войдите в свою учетную запись Back4app и создайте новый проект.
Создайте класс Parse: В вашем проекте Back4app создайте новый класс Parse с именем Review. Этот класс будет хранить отзывы пользователей о различных предметах (например, продуктах, фильмах и т. д.). Добавьте следующие поля:
имя пользователя (String): Имя пользователя, который оставил отзыв.
рейтинг (Number): Рейтинг, выставленный пользователем, обычно значение от 1 до 5.
комментарий (String): Текст отзыва или комментарий.
Добавьте образцы данных: Заполните класс Review образцами данных для использования в вашем приложении Flutter.
Получите свои учетные данные Back4app: Перейдите в настройки вашего проекта, чтобы получить ваш идентификатор приложения и ключ клиента, которые вам понадобятся для подключения вашего приложения Flutter к Back4app.
Шаг 2 – Настройка вашего проекта Flutter
Создайте новый проект Flutter: Откройте ваш терминал или командную строку и выполните:
Добавьте зависимости: Откройте pubspec.yaml и добавьте следующие зависимости:
Инициализируйте Parse в вашем приложении: В lib/main.dart, импортируйте SDK Parse и инициализируйте его в функции main:
Dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk_flutter.dart';

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

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

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

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ReviewScreen(),
    );
  }
}
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk_flutter.dart';

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

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

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

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ReviewScreen(),
    );
  }
}
﻿
Замените 'YOUR_BACK4APP_APP_ID' и 'YOUR_BACK4APP_CLIENT_KEY' на ваши фактические учетные данные Back4app.
Шаг 3 – Получение и отображение данных с использованием List.generate
Создайте виджет ReviewScreen: В lib/main.dart, добавьте новый виджет, который будет получать отзывы из Back4app и отображать их с помощью List.generate:
Dart
class ReviewScreen extends StatefulWidget {
  @override
  _ReviewScreenState createState() => _ReviewScreenState();
}

class _ReviewScreenState extends State<ReviewScreen> {
  List<ParseObject>? reviews;

  @override
  void initState() {
    super.initState();
    fetchReviews();
  }

  Future<void> fetchReviews() async {
    final query = QueryBuilder<ParseObject>(ParseObject('Review'));
    final response = await query.query();

    if (response.success && response.results != null) {
      setState(() {
        reviews = response.results as List<ParseObject>;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('User Reviews')),
      body: reviews == null
          ? Center(child: CircularProgressIndicator())
          : ListView.builder(
              itemCount: reviews!.length,
              itemBuilder: (context, index) {
                final review = reviews![index];
                return ReviewTile(
                  username: review.get<String>('username') ?? 'Anonymous',
                  rating: review.get<int>('rating') ?? 0,
                  comment: review.get<String>('comment') ?? '',
                );
              },
            ),
    );
  }
}



class ReviewTile extends StatelessWidget {
  final String username;
  final int rating;
  final String comment;

  ReviewTile({required this.username, required this.rating, required this.comment});

  @override
  Widget build(BuildContext context) {
    return Card(
      margin: EdgeInsets.symmetric(vertical: 10, horizontal: 15),
      child: Padding(
        padding: const EdgeInsets.all(15.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              username,
              style: TextStyle(fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 5),
            Row(
              children: List.generate(5, (index) {
                return Icon(
                  index < rating ? Icons.star : Icons.star_border,
                  color: Colors.amber,
                );
              }),
            ),
            SizedBox(height: 10),
            Text(comment),
          ],
        ),
      ),
    );
  }
}
class ReviewScreen extends StatefulWidget {
  @override
  _ReviewScreenState createState() => _ReviewScreenState();
}

class _ReviewScreenState extends State<ReviewScreen> {
  List<ParseObject>? reviews;

  @override
  void initState() {
    super.initState();
    fetchReviews();
  }

  Future<void> fetchReviews() async {
    final query = QueryBuilder<ParseObject>(ParseObject('Review'));
    final response = await query.query();

    if (response.success && response.results != null) {
      setState(() {
        reviews = response.results as List<ParseObject>;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('User Reviews')),
      body: reviews == null
          ? Center(child: CircularProgressIndicator())
          : ListView.builder(
              itemCount: reviews!.length,
              itemBuilder: (context, index) {
                final review = reviews![index];
                return ReviewTile(
                  username: review.get<String>('username') ?? 'Anonymous',
                  rating: review.get<int>('rating') ?? 0,
                  comment: review.get<String>('comment') ?? '',
                );
              },
            ),
    );
  }
}



class ReviewTile extends StatelessWidget {
  final String username;
  final int rating;
  final String comment;

  ReviewTile({required this.username, required this.rating, required this.comment});

  @override
  Widget build(BuildContext context) {
    return Card(
      margin: EdgeInsets.symmetric(vertical: 10, horizontal: 15),
      child: Padding(
        padding: const EdgeInsets.all(15.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              username,
              style: TextStyle(fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 5),
            Row(
              children: List.generate(5, (index) {
                return Icon(
                  index < rating ? Icons.star : Icons.star_border,
                  color: Colors.amber,
                );
              }),
            ),
            SizedBox(height: 10),
            Text(comment),
          ],
        ),
      ),
    );
  }
}
﻿
В этом примере, ReviewTile является пользовательским виджетом, который отображает отзыв пользователя. Рейтинг звезд динамически генерируется с использованием List.generate, создавая ряд иконок звезд на основе значения rating полученного из бэкенда.
Шаг 4 – Оптимизация получения данных с помощью List.generate и Future.wait
В случаях, когда вам нужно одновременно получать данные из нескольких конечных точек бэкенда, вы можете использовать List.generate в сочетании с Future.wait для оптимизации процесса.
Получение нескольких связанных записей: Представьте, что у вас есть другой класс с именем Product и вы хотите получить связанные отзывы для нескольких продуктов сразу. Вы можете использовать List.generate для одновременного инициирования этих запросов:
Dart
Future<void> fetchMultipleProductsReviews(List<String> productIds) async {
  List<Future<List<ParseObject>>> requests = List.generate(productIds.length, (index) {
    final query = QueryBuilder<ParseObject>(ParseObject('Review'))
      ..whereEqualTo('productId', productIds[index]);
    return query.query().then((response) => response.results as List<ParseObject>);
  });

  List<List<ParseObject>> allReviews = await Future.wait(requests);

  setState(() {
    _allProductReviews = allReviews;
  });
}
Future<void> fetchMultipleProductsReviews(List<String> productIds) async {
  List<Future<List<ParseObject>>> requests = List.generate(productIds.length, (index) {
    final query = QueryBuilder<ParseObject>(ParseObject('Review'))
      ..whereEqualTo('productId', productIds[index]);
    return query.query().then((response) => response.results as List<ParseObject>);
  });

  List<List<ParseObject>> allReviews = await Future.wait(requests);

  setState(() {
    _allProductReviews = allReviews;
  });
}
﻿
Этот подход сокращает общее время ожидания, получая данные для всех продуктов одновременно.
Шаг 5 – Выполнение пакетных операций с использованием List.generate
Если вам нужно выполнять пакетные обновления или удаления нескольких записей, полученных из бэкенда, List.generate может упростить процесс.
Пример пакетного обновления: Вот как вы можете обновить статус нескольких записей за один раз:
Dart
Future<void> updateMultipleReviews(List<String> reviewIds, String newStatus) async {
  List<Future<ParseObject>> updateRequests = List.generate(reviewIds.length, (index) {
    ParseObject review = ParseObject('Review')..objectId = reviewIds[index];
    review.set('status', newStatus);
    return review.save();
  });

  await Future.wait(updateRequests);
  print('All reviews updated');
}
Future<void> updateMultipleReviews(List<String> reviewIds, String newStatus) async {
  List<Future<ParseObject>> updateRequests = List.generate(reviewIds.length, (index) {
    ParseObject review = ParseObject('Review')..objectId = reviewIds[index];
    review.set('status', newStatus);
    return review.save();
  });

  await Future.wait(updateRequests);
  print('All reviews updated');
}
﻿
Использование List.generate здесь позволяет вам эффективно выполнять операции с большим количеством записей за одну операцию.
Шаг 6 – Тестирование и запуск вашего приложения
Запустите ваше приложение с помощью flutter run.
Вы должны увидеть список отзывов пользователей, где каждый отзыв показывает динамически сгенерированную звездную оценку с использованием List.generate. Если вы реализовали пакетные операции и пример многократного извлечения, протестируйте эти сценарии, чтобы убедиться, что все работает правильно.
Заключение
В этом учебном пособии вы узнали, как использовать List.generate в Flutter для эффективной обработки и отображения данных, полученных из бэкенда, такого как Back4app. Используя List.generate, вы можете создавать динамические элементы пользовательского интерфейса, оптимизировать извлечение данных и выполнять пакетные операции чистым и поддерживаемым способом. Этот подход не только улучшает производительность вашего приложения, но и помогает поддерживать ваш код организованным и легким в управлении.
Для получения дополнительной информации о том, как использовать Back4app с Flutter, ознакомьтесь с документацией Back4app по Flutter. Удачного кодирования!
Обновлено 23 Jan 2025
Помогла ли вам эта страница?
Создание платформы для блогов SPA с использованием ReactJS и Back4App
Как интегрировать генеративный ИИ в ваше Flutter-приложение с использованием Firebase Vertex AI