Plantillas de Flutter
Construyendo una aplicación de comercio electrónico con Flutter, Back4App y la integración de Stripe a través del código en la nube

49min
Introducción
Desarrollar una aplicación de comercio electrónico implica múltiples componentes, incluyendo listados de productos, funcionalidad de carrito de compras, procesamiento de pagos seguro, seguimiento de pedidos y reseñas de usuarios. Combinar el potente kit de herramientas de UI de Flutter con los servicios backend escalables de Back4App simplifica el proceso de desarrollo. Además, integrar Stripe para el procesamiento de pagos a través de Back4App Cloud Code permite un manejo de transacciones seguro y profesional.
En este tutorial, construirás una aplicación de comercio electrónico con las siguientes características:
Listados de Productos: Mostrar productos con imágenes, descripciones y precios.
Carrito de Compras: Agregar y eliminar productos del carrito.
Cuentas de Usuario: Gestionar perfiles y direcciones de usuario.
Pago Seguro: Procesar pagos de manera segura utilizando Stripe a través de Back4App Cloud Code.
Seguimiento de Pedidos: Rastrear el estado y la historia de los pedidos.
Reseñas y Calificaciones: Permitir a los usuarios enviar reseñas y calificaciones.
Requisitos Previos
Para seguir este tutorial, necesitarás:
Flutter SDK instalado en tu máquina. Sigue la guía de instalación de Flutter.
Conocimientos básicos de Flutter y Dart.
Un IDE o editor de texto como Visual Studio Code o Android Studio.
Una cuenta de Back4App. Regístrate en Back4App.
Cuenta de Stripe. Regístrate en Stripe para obtener claves API.
Node.js y npm instalados para el desarrollo de Cloud Code.
﻿
Paso 1 – Configuración del Proyecto Flutter
1.1. Crear un Nuevo Proyecto Flutter
Abre tu terminal y ejecuta:
Bash
flutter create ecommerce_app
flutter create ecommerce_app
﻿
Navega al directorio del proyecto:
Bash
cd ecommerce_app
cd ecommerce_app
﻿
1.2. Agregar Dependencias
Abre pubspec.yaml y agrega las siguientes dependencias:
YAML
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: ^4.0.1
  provider: ^6.0.0
  cached_network_image: ^3.2.0
  flutter_stripe: ^5.2.0
  uuid: ^3.0.6
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: ^4.0.1
  provider: ^6.0.0
  cached_network_image: ^3.2.0
  flutter_stripe: ^5.2.0
  uuid: ^3.0.6
﻿
Ejecuta flutter pub get para instalar los paquetes.
Nota:
parse_server_sdk_flutter para la integración de Back4App.
provider para la gestión del estado.
cached_network_image para la carga eficiente de imágenes.
flutter_stripe para la integración de Stripe en el lado del cliente.
uuid para generar identificadores únicos.
  
Paso 2 – Configuración de Back4App
2.1. Crear una Nueva Aplicación en Back4App
Inicia sesión en tu panel de Back4App.
Haz clic en "Crear nueva App".
Ingresa "EcommerceApp" como el nombre de la aplicación y haz clic en "Crear".
2.2. Configurar los Modelos de Datos
Necesitamos crear varias clases en Back4App:
Producto
Usuario (Clase incorporada)
Orden
OrdenItem
Reseña
2.2.1. Clase Producto
Navegar a la "Base de datos" sección.
Haga clic en "Crear una clase".
Seleccione "Personalizado" e ingrese "Producto" como el nombre de la clase.
Agregue las siguientes columnas:
nombre: Cadena
descripción: Cadena
precio: Número
imagen: Archivo
categoría: Cadena
inventario: Número
2.2.2. Clase de Pedido
Cree una "Clase de Pedido" con las siguientes columnas:
usuario: Puntero<_Usuario>
totalCantidad: Número
estado: Cadena (Valores: "pendiente", "pagado", "enviado", "entregado")
paymentIntentId: Cadena (Para rastrear el pago de Stripe)
direcciónDeEnvio: Cadena
2.2.3. Clase de Item de Pedido
Crea un "OrderItem" clase con las siguientes columnas:
orden: Puntero
producto: Puntero
cantidad: Número
precio: Número
2.2.4. Clase de Reseña
Crea una "Review" clase con las siguientes columnas:
producto: Puntero
usuario: Puntero<_Usuario>
calificación: Número
comentario: Cadena
2.3. Obtener Credenciales de la Aplicación
Navegar a Configuración de la Aplicación > Seguridad y Claves.
Anote su ID de Aplicación y Clave de Cliente.
  
Paso 3 – Implementación de la Gestión de Productos
3.1. Inicializando Parse en Flutter
Abrir lib/main.dart y modificarlo:
Dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'package:provider/provider.dart';
import 'screens/home_screen.dart';
import 'services/product_service.dart';

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

  const keyApplicationId = 'YOUR_APPLICATION_ID';
  const keyClientKey = 'YOUR_CLIENT_KEY';
  const keyParseServerUrl = 'https://parseapi.back4app.com';

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

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider<ProductService>(
      create: (_) => ProductService(),
      child: MaterialApp(
        title: 'E-commerce App',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: HomeScreen(),
      ),
    );
  }
}
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'package:provider/provider.dart';
import 'screens/home_screen.dart';
import 'services/product_service.dart';

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

  const keyApplicationId = 'YOUR_APPLICATION_ID';
  const keyClientKey = 'YOUR_CLIENT_KEY';
  const keyParseServerUrl = 'https://parseapi.back4app.com';

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

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider<ProductService>(
      create: (_) => ProductService(),
      child: MaterialApp(
        title: 'E-commerce App',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: HomeScreen(),
      ),
    );
  }
}
﻿
Reemplace 'YOUR_APPLICATION_ID' y 'YOUR_CLIENT_KEY' con sus credenciales de Back4App.
3.2. Creando el Modelo de Producto
Crea un directorio models bajo lib y añade product.dart:
Dart
// lib/models/product.dart
class Product {
  String id;
  String name;
  String description;
  double price;
  String imageUrl;
  String category;
  int inventory;

  Product({
    required this.id,
    required this.name,
    required this.description,
    required this.price,
    required this.imageUrl,
    required this.category,
    required this.inventory,
  });
}
// lib/models/product.dart
class Product {
  String id;
  String name;
  String description;
  double price;
  String imageUrl;
  String category;
  int inventory;

  Product({
    required this.id,
    required this.name,
    required this.description,
    required this.price,
    required this.imageUrl,
    required this.category,
    required this.inventory,
  });
}
﻿
3.3. Implementando el Servicio de Producto
Crea un directorio services bajo lib y añade product_service.dart:
Dart
// lib/services/product_service.dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import '../models/product.dart';

class ProductService with ChangeNotifier {
  List<Product> products = [];

  Future<void> fetchProducts() async {
    final query = QueryBuilder<ParseObject>(ParseObject('Product'));

    final response = await query.query();

    if (response.success && response.results != null) {
      products = response.results!.map((data) {
        return Product(
          id: data.objectId!,
          name: data.get<String>('name')!,
          description: data.get<String>('description')!,
          price: data.get<num>('price')!.toDouble(),
          imageUrl: data.get<ParseFileBase>('image')!.url!,
          category: data.get<String>('category')!,
          inventory: data.get<num>('inventory')!.toInt(),
        );
      }).toList();

      notifyListeners();
    }
  }
}
// lib/services/product_service.dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import '../models/product.dart';

class ProductService with ChangeNotifier {
  List<Product> products = [];

  Future<void> fetchProducts() async {
    final query = QueryBuilder<ParseObject>(ParseObject('Product'));

    final response = await query.query();

    if (response.success && response.results != null) {
      products = response.results!.map((data) {
        return Product(
          id: data.objectId!,
          name: data.get<String>('name')!,
          description: data.get<String>('description')!,
          price: data.get<num>('price')!.toDouble(),
          imageUrl: data.get<ParseFileBase>('image')!.url!,
          category: data.get<String>('category')!,
          inventory: data.get<num>('inventory')!.toInt(),
        );
      }).toList();

      notifyListeners();
    }
  }
}
﻿
3.4. Creando la Pantalla de Inicio
Crea screens directorio bajo lib y añade home_screen.dart:
Dart
// lib/screens/home_screen.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../services/product_service.dart';
import 'product_detail_screen.dart';

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

class _HomeScreenState extends State<HomeScreen> {
  late ProductService _productService;

  @override
  void initState() {
    super.initState();
    _productService = Provider.of<ProductService>(context, listen: false);
    _productService.fetchProducts();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('E-commerce App'),
        actions: [
          IconButton(
            icon: Icon(Icons.shopping_cart),
            onPressed: () {
              // Navigate to cart screen (to be implemented)
            },
          ),
        ],
      ),
      body: Consumer<ProductService>(
        builder: (context, productService, child) {
          if (productService.products.isEmpty) {
            return Center(child: CircularProgressIndicator());
          }

          return GridView.builder(
            padding: EdgeInsets.all(8.0),
            itemCount: productService.products.length,
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2,
              childAspectRatio: 0.75,
            ),
            itemBuilder: (context, index) {
              final product = productService.products[index];
              return GestureDetector(
                onTap: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (_) => ProductDetailScreen(product: product),
                    ),
                  );
                },
                child: Card(
                  child: Column(
                    children: [
                      Expanded(
                        child: Image.network(
                          product.imageUrl,
                          fit: BoxFit.cover,
                        ),
                      ),
                      Text(product.name),
                      Text('\$${product.price.toStringAsFixed(2)}'),
                    ],
                  ),
                ),
              );
            },
          );
        },
      ),
    );
  }
}
// lib/screens/home_screen.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../services/product_service.dart';
import 'product_detail_screen.dart';

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

class _HomeScreenState extends State<HomeScreen> {
  late ProductService _productService;

  @override
  void initState() {
    super.initState();
    _productService = Provider.of<ProductService>(context, listen: false);
    _productService.fetchProducts();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('E-commerce App'),
        actions: [
          IconButton(
            icon: Icon(Icons.shopping_cart),
            onPressed: () {
              // Navigate to cart screen (to be implemented)
            },
          ),
        ],
      ),
      body: Consumer<ProductService>(
        builder: (context, productService, child) {
          if (productService.products.isEmpty) {
            return Center(child: CircularProgressIndicator());
          }

          return GridView.builder(
            padding: EdgeInsets.all(8.0),
            itemCount: productService.products.length,
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2,
              childAspectRatio: 0.75,
            ),
            itemBuilder: (context, index) {
              final product = productService.products[index];
              return GestureDetector(
                onTap: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (_) => ProductDetailScreen(product: product),
                    ),
                  );
                },
                child: Card(
                  child: Column(
                    children: [
                      Expanded(
                        child: Image.network(
                          product.imageUrl,
                          fit: BoxFit.cover,
                        ),
                      ),
                      Text(product.name),
                      Text('\$${product.price.toStringAsFixed(2)}'),
                    ],
                  ),
                ),
              );
            },
          );
        },
      ),
    );
  }
}
﻿
3.5. Pantalla de Detalle del Producto
Crear product_detail_screen.dart bajo lib/screens/:
Dart
// lib/screens/product_detail_screen.dart
import 'package:flutter/material.dart';
import '../models/product.dart';
import '../services/cart_service.dart';
import 'package:provider/provider.dart';

class ProductDetailScreen extends StatelessWidget {
  final Product product;

  ProductDetailScreen({required this.product});

  @override
  Widget build(BuildContext context) {
    final cartService = Provider.of<CartService>(context);

    return Scaffold(
      appBar: AppBar(title: Text(product.name)),
      body: Column(
        children: [
          Expanded(child: Image.network(product.imageUrl)),
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: Text(product.description),
          ),
          Text('\$${product.price.toStringAsFixed(2)}'),
          ElevatedButton(
            onPressed: () {
              cartService.addToCart(product);
              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(content: Text('Added to cart')),
              );
            },
            child: Text('Add to Cart'),
          ),
        ],
      ),
    );
  }
}
// lib/screens/product_detail_screen.dart
import 'package:flutter/material.dart';
import '../models/product.dart';
import '../services/cart_service.dart';
import 'package:provider/provider.dart';

class ProductDetailScreen extends StatelessWidget {
  final Product product;

  ProductDetailScreen({required this.product});

  @override
  Widget build(BuildContext context) {
    final cartService = Provider.of<CartService>(context);

    return Scaffold(
      appBar: AppBar(title: Text(product.name)),
      body: Column(
        children: [
          Expanded(child: Image.network(product.imageUrl)),
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: Text(product.description),
          ),
          Text('\$${product.price.toStringAsFixed(2)}'),
          ElevatedButton(
            onPressed: () {
              cartService.addToCart(product);
              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(content: Text('Added to cart')),
              );
            },
            child: Text('Add to Cart'),
          ),
        ],
      ),
    );
  }
}
﻿
  
Paso 4 – Implementación de Cuentas de Usuario
4.1. Servicio de Autenticación
Agregar auth_service.dart bajo lib/services/:
Dart
// lib/services/auth_service.dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class AuthService with ChangeNotifier {
  ParseUser? user;

  Future<bool> signUp(String username, String password, String email) async {
    user = ParseUser.createUser(username, password, email);
    final response = await user!.signUp();

    if (response.success) {
      notifyListeners();
      return true;
    } else {
      user = null;
      return false;
    }
  }

  Future<bool> login(String username, String password) async {
    user = ParseUser(username, password, null);
    final response = await user!.login();

    if (response.success) {
      notifyListeners();
      return true;
    } else {
      user = null;
      return false;
    }
  }

  Future<void> logout() async {
    if (user != null) {
      await user!.logout();
      user = null;
      notifyListeners();
    }
  }

  bool get isAuthenticated => user != null;
}
// lib/services/auth_service.dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class AuthService with ChangeNotifier {
  ParseUser? user;

  Future<bool> signUp(String username, String password, String email) async {
    user = ParseUser.createUser(username, password, email);
    final response = await user!.signUp();

    if (response.success) {
      notifyListeners();
      return true;
    } else {
      user = null;
      return false;
    }
  }

  Future<bool> login(String username, String password) async {
    user = ParseUser(username, password, null);
    final response = await user!.login();

    if (response.success) {
      notifyListeners();
      return true;
    } else {
      user = null;
      return false;
    }
  }

  Future<void> logout() async {
    if (user != null) {
      await user!.logout();
      user = null;
      notifyListeners();
    }
  }

  bool get isAuthenticated => user != null;
}
﻿
4.2. Pantallas de Autenticación
Crear login_screen.dart y signup_screen.dart bajo lib/screens/.
Pantalla de inicio de sesión:
Dart
// lib/screens/login_screen.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../services/auth_service.dart';
import 'home_screen.dart';
import 'signup_screen.dart';

class LoginScreen extends StatelessWidget {
  final TextEditingController _usernameController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();

  void _login(BuildContext context) async {
    final authService = Provider.of<AuthService>(context, listen: false);
    bool success = await authService.login(
      _usernameController.text.trim(),
      _passwordController.text.trim(),
    );

    if (success) {
      Navigator.pushReplacement(
        context,
        MaterialPageRoute(builder: (_) => HomeScreen()),
      );
    } else {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Login failed')));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('E-commerce App Login'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            TextField(
              controller: _usernameController,
              decoration: InputDecoration(labelText: 'Username or Email'),
            ),
            TextField(
              controller: _passwordController,
              decoration: InputDecoration(labelText: 'Password'),
              obscureText: true,
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () => _login(context),
              child: Text('Login'),
            ),
            TextButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (_) => SignupScreen()),
                );
              },
              child: Text('Don\'t have an account? Sign up'),
            )
          ],
        ),
      ),
    );
  }
}
// lib/screens/login_screen.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../services/auth_service.dart';
import 'home_screen.dart';
import 'signup_screen.dart';

class LoginScreen extends StatelessWidget {
  final TextEditingController _usernameController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();

  void _login(BuildContext context) async {
    final authService = Provider.of<AuthService>(context, listen: false);
    bool success = await authService.login(
      _usernameController.text.trim(),
      _passwordController.text.trim(),
    );

    if (success) {
      Navigator.pushReplacement(
        context,
        MaterialPageRoute(builder: (_) => HomeScreen()),
      );
    } else {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Login failed')));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('E-commerce App Login'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            TextField(
              controller: _usernameController,
              decoration: InputDecoration(labelText: 'Username or Email'),
            ),
            TextField(
              controller: _passwordController,
              decoration: InputDecoration(labelText: 'Password'),
              obscureText: true,
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () => _login(context),
              child: Text('Login'),
            ),
            TextButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (_) => SignupScreen()),
                );
              },
              child: Text('Don\'t have an account? Sign up'),
            )
          ],
        ),
      ),
    );
  }
}
﻿
Pantalla de registro:
Dart
// lib/screens/signup_screen.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../services/auth_service.dart';
import 'home_screen.dart';

class SignupScreen extends StatelessWidget {
  final TextEditingController _usernameController = TextEditingController();
  final TextEditingController _emailController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();

  void _signUp(BuildContext context) async {
    final authService = Provider.of<AuthService>(context, listen: false);
    bool success = await authService.signUp(
      _usernameController.text.trim(),
      _passwordController.text.trim(),
      _emailController.text.trim(),
    );

    if (success) {
      Navigator.pushReplacement(
        context,
        MaterialPageRoute(builder: (_) => HomeScreen()),
      );
    } else {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Signup failed')));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('E-commerce App Signup'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            TextField(
              controller: _usernameController,
              decoration: InputDecoration(labelText: 'Username'),
            ),
            TextField(
              controller: _emailController,
              decoration: InputDecoration(labelText: 'Email'),
            ),
            TextField(
              controller: _passwordController,
              decoration: InputDecoration(labelText: 'Password'),
              obscureText: true,
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () => _signUp(context),
              child: Text('Sign Up'),
            ),
          ],
        ),
      ),
    );
  }
}
// lib/screens/signup_screen.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../services/auth_service.dart';
import 'home_screen.dart';

class SignupScreen extends StatelessWidget {
  final TextEditingController _usernameController = TextEditingController();
  final TextEditingController _emailController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();

  void _signUp(BuildContext context) async {
    final authService = Provider.of<AuthService>(context, listen: false);
    bool success = await authService.signUp(
      _usernameController.text.trim(),
      _passwordController.text.trim(),
      _emailController.text.trim(),
    );

    if (success) {
      Navigator.pushReplacement(
        context,
        MaterialPageRoute(builder: (_) => HomeScreen()),
      );
    } else {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Signup failed')));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('E-commerce App Signup'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            TextField(
              controller: _usernameController,
              decoration: InputDecoration(labelText: 'Username'),
            ),
            TextField(
              controller: _emailController,
              decoration: InputDecoration(labelText: 'Email'),
            ),
            TextField(
              controller: _passwordController,
              decoration: InputDecoration(labelText: 'Password'),
              obscureText: true,
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () => _signUp(context),
              child: Text('Sign Up'),
            ),
          ],
        ),
      ),
    );
  }
}
﻿
4.3. Actualizar Main para Incluir AuthService
En main.dart, envuelve el MaterialApp con MultiProvider:
Dart
// In main.dart
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider<ProductService>(
          create: (_) => ProductService(),
        ),
        ChangeNotifierProvider<AuthService>(
          create: (_) => AuthService(),
        ),
        ChangeNotifierProvider<CartService>(
          create: (_) => CartService(),
        ),
      ],
      child: MaterialApp(
        // ...
      ),
    );
  }
}
// In main.dart
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider<ProductService>(
          create: (_) => ProductService(),
        ),
        ChangeNotifierProvider<AuthService>(
          create: (_) => AuthService(),
        ),
        ChangeNotifierProvider<CartService>(
          create: (_) => CartService(),
        ),
      ],
      child: MaterialApp(
        // ...
      ),
    );
  }
}
﻿
4.4. Redirección Basada en el Estado de Autenticación
Modifica main.dart para verificar el estado de autenticación:
Dart
// main.dart
// Inside the build method
home: Consumer<AuthService>(
  builder: (context, authService, child) {
    if (authService.isAuthenticated) {
      return HomeScreen();
    } else {
      return LoginScreen();
    }
  },
),
// main.dart
// Inside the build method
home: Consumer<AuthService>(
  builder: (context, authService, child) {
    if (authService.isAuthenticated) {
      return HomeScreen();
    } else {
      return LoginScreen();
    }
  },
),
﻿
  
Paso 5 – Funcionalidad del Carrito de Compras
5.1. Crear Servicio de Carrito
Agregar cart_service.dart bajo lib/services/:
Dart
// lib/services/cart_service.dart
import 'package:flutter/material.dart';
import '../models/product.dart';

class CartItem {
  final Product product;
  int quantity;

  CartItem({required this.product, this.quantity = 1});
}

class CartService with ChangeNotifier {
  Map<String, CartItem> _items = {};

  void addToCart(Product product) {
    if (_items.containsKey(product.id)) {
      _items[product.id]!.quantity++;
    } else {
      _items[product.id] = CartItem(product: product);
    }
    notifyListeners();
  }

  void removeFromCart(String productId) {
    _items.remove(productId);
    notifyListeners();
  }

  void clearCart() {
    _items.clear();
    notifyListeners();
  }

  Map<String, CartItem> get items => _items;

  double get totalAmount {
    double total = 0.0;
    _items.forEach((key, cartItem) {
      total += cartItem.product.price * cartItem.quantity;
    });
    return total;
  }
}
// lib/services/cart_service.dart
import 'package:flutter/material.dart';
import '../models/product.dart';

class CartItem {
  final Product product;
  int quantity;

  CartItem({required this.product, this.quantity = 1});
}

class CartService with ChangeNotifier {
  Map<String, CartItem> _items = {};

  void addToCart(Product product) {
    if (_items.containsKey(product.id)) {
      _items[product.id]!.quantity++;
    } else {
      _items[product.id] = CartItem(product: product);
    }
    notifyListeners();
  }

  void removeFromCart(String productId) {
    _items.remove(productId);
    notifyListeners();
  }

  void clearCart() {
    _items.clear();
    notifyListeners();
  }

  Map<String, CartItem> get items => _items;

  double get totalAmount {
    double total = 0.0;
    _items.forEach((key, cartItem) {
      total += cartItem.product.price * cartItem.quantity;
    });
    return total;
  }
}
﻿
5.2. Crear Pantalla de Carrito
Agregar cart_screen.dart bajo lib/screens/:
Dart
// lib/screens/cart_screen.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../services/cart_service.dart';
import 'checkout_screen.dart';

class CartScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final cartService = Provider.of<CartService>(context);
    final cartItems = cartService.items.values.toList();

    return Scaffold(
      appBar: AppBar(title: Text('Your Cart')),
      body: Column(
        children: [
          Expanded(
            child: ListView.builder(
              itemCount: cartService.items.length,
              itemBuilder: (context, index) {
                final cartItem = cartItems[index];
                return ListTile(
                  leading: Image.network(cartItem.product.imageUrl),
                  title: Text(cartItem.product.name),
                  subtitle: Text('Quantity: ${cartItem.quantity}'),
                  trailing: Text('\$${(cartItem.product.price * cartItem.quantity).toStringAsFixed(2)}'),
                );
              },
            ),
          ),
          Text('Total: \$${cartService.totalAmount.toStringAsFixed(2)}'),
          ElevatedButton(
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (_) => CheckoutScreen()),
              );
            },
            child: Text('Proceed to Checkout'),
          ),
        ],
      ),
    );
  }
}
// lib/screens/cart_screen.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../services/cart_service.dart';
import 'checkout_screen.dart';

class CartScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final cartService = Provider.of<CartService>(context);
    final cartItems = cartService.items.values.toList();

    return Scaffold(
      appBar: AppBar(title: Text('Your Cart')),
      body: Column(
        children: [
          Expanded(
            child: ListView.builder(
              itemCount: cartService.items.length,
              itemBuilder: (context, index) {
                final cartItem = cartItems[index];
                return ListTile(
                  leading: Image.network(cartItem.product.imageUrl),
                  title: Text(cartItem.product.name),
                  subtitle: Text('Quantity: ${cartItem.quantity}'),
                  trailing: Text('\$${(cartItem.product.price * cartItem.quantity).toStringAsFixed(2)}'),
                );
              },
            ),
          ),
          Text('Total: \$${cartService.totalAmount.toStringAsFixed(2)}'),
          ElevatedButton(
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (_) => CheckoutScreen()),
              );
            },
            child: Text('Proceed to Checkout'),
          ),
        ],
      ),
    );
  }
}
﻿
  
Paso 6 – Pago Seguro con Integración de Stripe a través de Cloud Code
6.1. Configurar Cuenta de Stripe
Regístrate para una cuenta de Stripe.
Obtén tu Clave Publicable y Clave Secreta desde el Panel de Control de Stripe en Desarrolladores > Claves API.
6.2. Instalar SDK de Stripe en Cloud Code
Back4App admite funciones de Cloud Code escritas en JavaScript. Escribiremos funciones de Cloud Code para manejar el procesamiento de pagos.
6.2.1. Crear Proyecto de Cloud Code
En el panel de control de tu aplicación Back4App, ve a Configuración de la Aplicación > Funciones de Cloud Code.
Haz clic en "Editar código" para abrir el editor de Cloud Code.
6.2.2. Inicializar npm e Instalar Paquete de Stripe
En la terminal de Cloud Code (proporcionada en el editor), ejecuta:
Bash
npm init -y
npm install [email protected]
npm init -y
npm install stripe@8.174.0
﻿
Nota: El Cloud Code de Back4App utiliza la versión 14.x de Node.js, así que asegúrate de la compatibilidad.
6.3. Crear Función en la Nube para el Intento de Pago
Crea o modifica main.js en el editor de Cloud Code:
JS
// main.js
const Stripe = require('stripe');
const stripe = Stripe('YOUR_STRIPE_SECRET_KEY');

Parse.Cloud.define('createPaymentIntent', async (request) => {
  const { amount, currency } = request.params;

  try {
    const paymentIntent = await stripe.paymentIntents.create({
      amount: amount,
      currency: currency,
    });

    return { clientSecret: paymentIntent.client_secret };
  } catch (error) {
    throw new Parse.Error(500, error.message);
  }
});
// main.js
const Stripe = require('stripe');
const stripe = Stripe('YOUR_STRIPE_SECRET_KEY');

Parse.Cloud.define('createPaymentIntent', async (request) => {
  const { amount, currency } = request.params;

  try {
    const paymentIntent = await stripe.paymentIntents.create({
      amount: amount,
      currency: currency,
    });

    return { clientSecret: paymentIntent.client_secret };
  } catch (error) {
    throw new Parse.Error(500, error.message);
  }
});
﻿
Reemplaza 'YOUR_STRIPE_SECRET_KEY' con tu clave secreta de Stripe real.
Nota de Seguridad: Nunca expongas tu clave secreta en el lado del cliente. Mantenla segura en el Cloud Code.
6.4. Desplegar Cloud Code
Haz clic en "Desplegar" en el editor de Cloud Code para desplegar tus funciones.
6.5. Implementar Pago en Flutter
6.5.1. Inicializar Stripe en Flutter
En main.dart, después de Parse().initialize, añade:
Dart
import 'package:flutter_stripe/flutter_stripe.dart';

// Inside main() async
Stripe.publishableKey = 'YOUR_STRIPE_PUBLISHABLE_KEY';
import 'package:flutter_stripe/flutter_stripe.dart';

// Inside main() async
Stripe.publishableKey = 'YOUR_STRIPE_PUBLISHABLE_KEY';
﻿
Reemplaza 'TU_CLAVE_PUBLICABLE_DE_STRIPE' con tu clave publicable de Stripe.
6.5.2. Crear Pantalla de Checkout
Añade checkout_screen.dart bajo lib/screens/:
Dart
// lib/screens/checkout_screen.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../services/cart_service.dart';
import 'package:flutter_stripe/flutter_stripe.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'order_confirmation_screen.dart';

class CheckoutScreen extends StatelessWidget {
  Future<void> _processPayment(BuildContext context) async {
    final cartService = Provider.of<CartService>(context, listen: false);
    final totalAmount = (cartService.totalAmount * 100).toInt(); // Amount in cents

    // Call Cloud Function to create Payment Intent
    final response = await ParseCloudFunction('createPaymentIntent').execute(
      parameters: {
        'amount': totalAmount,
        'currency': 'usd',
      },
    );

    if (response.success) {
      final clientSecret = response.result['clientSecret'];

      // Initialize payment sheet
      await Stripe.instance.initPaymentSheet(
        paymentSheetParameters: SetupPaymentSheetParameters(
          paymentIntentClientSecret: clientSecret,
          merchantDisplayName: 'Your E-commerce App',
        ),
      );

      // Display payment sheet
      await Stripe.instance.presentPaymentSheet();

      // Payment successful
      // Save order to Back4App (to be implemented)
      cartService.clearCart();
      Navigator.pushReplacement(
        context,
        MaterialPageRoute(builder: (_) => OrderConfirmationScreen()),
      );
    } else {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('Payment failed: ${response.error!.message}')),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    final cartService = Provider.of<CartService>(context);

    return Scaffold(
      appBar: AppBar(title: Text('Checkout')),
      body: Column(
        children: [
          Text('Total: \$${cartService.totalAmount.toStringAsFixed(2)}'),
          ElevatedButton(
            onPressed: () => _processPayment(context),
            child: Text('Pay Now'),
          ),
        ],
      ),
    );
  }
}
// lib/screens/checkout_screen.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../services/cart_service.dart';
import 'package:flutter_stripe/flutter_stripe.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'order_confirmation_screen.dart';

class CheckoutScreen extends StatelessWidget {
  Future<void> _processPayment(BuildContext context) async {
    final cartService = Provider.of<CartService>(context, listen: false);
    final totalAmount = (cartService.totalAmount * 100).toInt(); // Amount in cents

    // Call Cloud Function to create Payment Intent
    final response = await ParseCloudFunction('createPaymentIntent').execute(
      parameters: {
        'amount': totalAmount,
        'currency': 'usd',
      },
    );

    if (response.success) {
      final clientSecret = response.result['clientSecret'];

      // Initialize payment sheet
      await Stripe.instance.initPaymentSheet(
        paymentSheetParameters: SetupPaymentSheetParameters(
          paymentIntentClientSecret: clientSecret,
          merchantDisplayName: 'Your E-commerce App',
        ),
      );

      // Display payment sheet
      await Stripe.instance.presentPaymentSheet();

      // Payment successful
      // Save order to Back4App (to be implemented)
      cartService.clearCart();
      Navigator.pushReplacement(
        context,
        MaterialPageRoute(builder: (_) => OrderConfirmationScreen()),
      );
    } else {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('Payment failed: ${response.error!.message}')),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    final cartService = Provider.of<CartService>(context);

    return Scaffold(
      appBar: AppBar(title: Text('Checkout')),
      body: Column(
        children: [
          Text('Total: \$${cartService.totalAmount.toStringAsFixed(2)}'),
          ElevatedButton(
            onPressed: () => _processPayment(context),
            child: Text('Pay Now'),
          ),
        ],
      ),
    );
  }
}
﻿
6.5.3. Manejar la Confirmación de Pago
Crear order_confirmation_screen.dart bajo lib/screens/:
Dart
// lib/screens/order_confirmation_screen.dart
import 'package:flutter/material.dart';

class OrderConfirmationScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Order Confirmed'),
        automaticallyImplyLeading: false,
      ),
      body: Center(
        child: Text('Thank you for your purchase!'),
      ),
    );
  }
}
// lib/screens/order_confirmation_screen.dart
import 'package:flutter/material.dart';

class OrderConfirmationScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Order Confirmed'),
        automaticallyImplyLeading: false,
      ),
      body: Center(
        child: Text('Thank you for your purchase!'),
      ),
    );
  }
}
﻿
6.6. Guardando la Orden en Back4App
Modifica el _processPayment método para guardar los detalles de la orden:
Dart
// After successful payment
final authService = Provider.of<AuthService>(context, listen: false);
final user = authService.user!;

// Create Order object
final order = ParseObject('Order')
  ..set('user', user)
  ..set('totalAmount', cartService.totalAmount)
  ..set('status', 'paid')
  ..set('paymentIntentId', clientSecret);

// Save Order
final orderResponse = await order.save();

if (orderResponse.success) {
  final orderObject = orderResponse.result;

  // Save OrderItems
  for (var cartItem in cartService.items.values) {
    final orderItem = ParseObject('OrderItem')
      ..set('order', orderObject)
      ..set('product', ParseObject('Product')..objectId = cartItem.product.id)
      ..set('quantity', cartItem.quantity)
      ..set('price', cartItem.product.price);

    await orderItem.save();
  }

  // Clear cart and navigate
  cartService.clearCart();
  Navigator.pushReplacement(
    context,
    MaterialPageRoute(builder: (_) => OrderConfirmationScreen()),
  );
} else {
  ScaffoldMessenger.of(context).showSnackBar(
    SnackBar(content: Text('Failed to save order')),
  );
}
// After successful payment
final authService = Provider.of<AuthService>(context, listen: false);
final user = authService.user!;

// Create Order object
final order = ParseObject('Order')
  ..set('user', user)
  ..set('totalAmount', cartService.totalAmount)
  ..set('status', 'paid')
  ..set('paymentIntentId', clientSecret);

// Save Order
final orderResponse = await order.save();

if (orderResponse.success) {
  final orderObject = orderResponse.result;

  // Save OrderItems
  for (var cartItem in cartService.items.values) {
    final orderItem = ParseObject('OrderItem')
      ..set('order', orderObject)
      ..set('product', ParseObject('Product')..objectId = cartItem.product.id)
      ..set('quantity', cartItem.quantity)
      ..set('price', cartItem.product.price);

    await orderItem.save();
  }

  // Clear cart and navigate
  cartService.clearCart();
  Navigator.pushReplacement(
    context,
    MaterialPageRoute(builder: (_) => OrderConfirmationScreen()),
  );
} else {
  ScaffoldMessenger.of(context).showSnackBar(
    SnackBar(content: Text('Failed to save order')),
  );
}
﻿
  
Paso 7 – Seguimiento de Orden
7.1. Crear Servicio de Orden
Agregar order_service.dart bajo lib/services/:
Dart
// lib/services/order_service.dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import '../models/order.dart';

class OrderService with ChangeNotifier {
  List<Order> orders = [];

  Future<void> fetchOrders(ParseUser user) async {
    final query = QueryBuilder<ParseObject>(ParseObject('Order'))
      ..whereEqualTo('user', user)
      ..orderByDescending('createdAt');

    final response = await query.query();

    if (response.success && response.results != null) {
      orders = response.results!.map((data) {
        return Order.fromParseObject(data);
      }).toList();

      notifyListeners();
    }
  }
}
// lib/services/order_service.dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import '../models/order.dart';

class OrderService with ChangeNotifier {
  List<Order> orders = [];

  Future<void> fetchOrders(ParseUser user) async {
    final query = QueryBuilder<ParseObject>(ParseObject('Order'))
      ..whereEqualTo('user', user)
      ..orderByDescending('createdAt');

    final response = await query.query();

    if (response.success && response.results != null) {
      orders = response.results!.map((data) {
        return Order.fromParseObject(data);
      }).toList();

      notifyListeners();
    }
  }
}
﻿
  
Paso 7 – Seguimiento de Orden
7.2. Crear Modelo de Pedido
Agregar order.dart bajo lib/models/:
Dart
// lib/models/order.dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class Order {
  String id;
  double totalAmount;
  String status;
  DateTime createdAt;

  Order({
    required this.id,
    required this.totalAmount,
    required this.status,
    required this.createdAt,
  });

  factory Order.fromParseObject(ParseObject object) {
    return Order(
      id: object.objectId!,
      totalAmount: object.get<num>('totalAmount')!.toDouble(),
      status: object.get<String>('status')!,
      createdAt: object.createdAt!,
    );
  }
}
// lib/models/order.dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class Order {
  String id;
  double totalAmount;
  String status;
  DateTime createdAt;

  Order({
    required this.id,
    required this.totalAmount,
    required this.status,
    required this.createdAt,
  });

  factory Order.fromParseObject(ParseObject object) {
    return Order(
      id: object.objectId!,
      totalAmount: object.get<num>('totalAmount')!.toDouble(),
      status: object.get<String>('status')!,
      createdAt: object.createdAt!,
    );
  }
}
﻿
7.3. Crear Pantalla de Pedidos
Agregar orders_screen.dart bajo lib/screens/:
Dart
// lib/screens/orders_screen.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../services/order_service.dart';
import '../services/auth_service.dart';
import '../models/order.dart';

class OrdersScreen extends StatefulWidget {
  @override
  _OrdersScreenState createState() => _OrdersScreenState();
}

class _OrdersScreenState extends State<OrdersScreen> {
  late OrderService _orderService;

  @override
  void initState() {
    super.initState();
    _orderService = Provider.of<OrderService>(context, listen: false);
    final authService = Provider.of<AuthService>(context, listen: false);
    _orderService.fetchOrders(authService.user!);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Your Orders')),
      body: Consumer<OrderService>(
        builder: (context, orderService, child) {
          if (orderService.orders.isEmpty) {
            return Center(child: Text('No orders found.'));
          }

          return ListView.builder(
            itemCount: orderService.orders.length,
            itemBuilder: (context, index) {
              final order = orderService.orders[index];
              return ListTile(
                title: Text('Order #${order.id}'),
                subtitle: Text('Status: ${order.status}'),
                trailing: Text('\$${order.totalAmount.toStringAsFixed(2)}'),
              );
            },
          );
        },
      ),
    );
  }
}
// lib/screens/orders_screen.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../services/order_service.dart';
import '../services/auth_service.dart';
import '../models/order.dart';

class OrdersScreen extends StatefulWidget {
  @override
  _OrdersScreenState createState() => _OrdersScreenState();
}

class _OrdersScreenState extends State<OrdersScreen> {
  late OrderService _orderService;

  @override
  void initState() {
    super.initState();
    _orderService = Provider.of<OrderService>(context, listen: false);
    final authService = Provider.of<AuthService>(context, listen: false);
    _orderService.fetchOrders(authService.user!);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Your Orders')),
      body: Consumer<OrderService>(
        builder: (context, orderService, child) {
          if (orderService.orders.isEmpty) {
            return Center(child: Text('No orders found.'));
          }

          return ListView.builder(
            itemCount: orderService.orders.length,
            itemBuilder: (context, index) {
              final order = orderService.orders[index];
              return ListTile(
                title: Text('Order #${order.id}'),
                subtitle: Text('Status: ${order.status}'),
                trailing: Text('\$${order.totalAmount.toStringAsFixed(2)}'),
              );
            },
          );
        },
      ),
    );
  }
}
﻿
  
Paso 8 – Reseñas y Calificaciones
8.1. Crear Servicio de Reseñas
Agregar review_service.dart bajo lib/services/:
Dart
// lib/services/review_service.dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import '../models/review.dart';

class ReviewService with ChangeNotifier {
  List<Review> reviews = [];

  Future<void> fetchReviews(String productId) async {
    final query = QueryBuilder<ParseObject>(ParseObject('Review'))
      ..whereEqualTo('product', ParseObject('Product')..objectId = productId)
      ..includeObject(['user']);

    final response = await query.query();

    if (response.success && response.results != null) {
      reviews = response.results!.map((data) {
        return Review.fromParseObject(data);
      }).toList();

      notifyListeners();
    }
  }

  Future<void> submitReview(String productId, ParseUser user, int rating, String comment) async {
    final review = ParseObject('Review')
      ..set('product', ParseObject('Product')..objectId = productId)
      ..set('user', user)
      ..set('rating', rating)
      ..set('comment', comment);

    await review.save();
    await fetchReviews(productId);
  }
}
// lib/services/review_service.dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import '../models/review.dart';

class ReviewService with ChangeNotifier {
  List<Review> reviews = [];

  Future<void> fetchReviews(String productId) async {
    final query = QueryBuilder<ParseObject>(ParseObject('Review'))
      ..whereEqualTo('product', ParseObject('Product')..objectId = productId)
      ..includeObject(['user']);

    final response = await query.query();

    if (response.success && response.results != null) {
      reviews = response.results!.map((data) {
        return Review.fromParseObject(data);
      }).toList();

      notifyListeners();
    }
  }

  Future<void> submitReview(String productId, ParseUser user, int rating, String comment) async {
    final review = ParseObject('Review')
      ..set('product', ParseObject('Product')..objectId = productId)
      ..set('user', user)
      ..set('rating', rating)
      ..set('comment', comment);

    await review.save();
    await fetchReviews(productId);
  }
}
﻿
8.2. Crear Modelo de Reseña
Agregar review.dart bajo lib/models/:
Dart
// lib/models/review.dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class Review {
  String id;
  int rating;
  String comment;
  ParseUser user;

  Review({
    required this.id,
    required this.rating,
    required this.comment,
    required this.user,
  });

  factory Review.fromParseObject(ParseObject object) {
    return Review(
      id: object.objectId!,
      rating: object.get<num>('rating')!.toInt(),
      comment: object.get<String>('comment')!,
      user: object.get<ParseUser>('user')!,
    );
  }
}
// lib/models/review.dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class Review {
  String id;
  int rating;
  String comment;
  ParseUser user;

  Review({
    required this.id,
    required this.rating,
    required this.comment,
    required this.user,
  });

  factory Review.fromParseObject(ParseObject object) {
    return Review(
      id: object.objectId!,
      rating: object.get<num>('rating')!.toInt(),
      comment: object.get<String>('comment')!,
      user: object.get<ParseUser>('user')!,
    );
  }
}
﻿
8.3. Actualizar la pantalla de detalles del producto
En product_detail_screen.dart, agrega una sección para mostrar y enviar reseñas.
Dart
// At the end of the Column in ProductDetailScreen
Expanded(
  child: Column(
    children: [
      // Display reviews
      Expanded(
        child: Consumer<ReviewService>(
          builder: (context, reviewService, child) {
            if (reviewService.reviews.isEmpty) {
              return Center(child: Text('No reviews yet.'));
            }

            return ListView.builder(
              itemCount: reviewService.reviews.length,
              itemBuilder: (context, index) {
                final review = reviewService.reviews[index];
                return ListTile(
                  title: Text(review.user.username ?? 'Anonymous'),
                  subtitle: Text(review.comment),
                  trailing: Text('${review.rating}/5'),
                );
              },
            );
          },
        ),
      ),
      // Submit review
      TextField(
        controller: _reviewController,
        decoration: InputDecoration(hintText: 'Write a review'),
      ),
      Row(
        children: [
          Text('Rating:'),
          DropdownButton<int>(
            value: _rating,
            onChanged: (value) {
              setState(() {
                _rating = value!;
              });
            },
            items: List.generate(5, (index) => index + 1)
                .map((e) => DropdownMenuItem(value: e, child: Text('$e')))
                .toList(),
          ),
          ElevatedButton(
            onPressed: () {
              final authService = Provider.of<AuthService>(context, listen: false);
              _reviewService.submitReview(
                product.id,
                authService.user!,
                _rating,
                _reviewController.text.trim(),
              );
              _reviewController.clear();
            },
            child: Text('Submit'),
          ),
        ],
      ),
    ],
  ),
),
// At the end of the Column in ProductDetailScreen
Expanded(
  child: Column(
    children: [
      // Display reviews
      Expanded(
        child: Consumer<ReviewService>(
          builder: (context, reviewService, child) {
            if (reviewService.reviews.isEmpty) {
              return Center(child: Text('No reviews yet.'));
            }

            return ListView.builder(
              itemCount: reviewService.reviews.length,
              itemBuilder: (context, index) {
                final review = reviewService.reviews[index];
                return ListTile(
                  title: Text(review.user.username ?? 'Anonymous'),
                  subtitle: Text(review.comment),
                  trailing: Text('${review.rating}/5'),
                );
              },
            );
          },
        ),
      ),
      // Submit review
      TextField(
        controller: _reviewController,
        decoration: InputDecoration(hintText: 'Write a review'),
      ),
      Row(
        children: [
          Text('Rating:'),
          DropdownButton<int>(
            value: _rating,
            onChanged: (value) {
              setState(() {
                _rating = value!;
              });
            },
            items: List.generate(5, (index) => index + 1)
                .map((e) => DropdownMenuItem(value: e, child: Text('$e')))
                .toList(),
          ),
          ElevatedButton(
            onPressed: () {
              final authService = Provider.of<AuthService>(context, listen: false);
              _reviewService.submitReview(
                product.id,
                authService.user!,
                _rating,
                _reviewController.text.trim(),
              );
              _reviewController.clear();
            },
            child: Text('Submit'),
          ),
        ],
      ),
    ],
  ),
),
﻿
  
Conclusión
En este tutorial completo, has construido una aplicación de comercio electrónico utilizando Flutter y Back4App, integrada con Stripe para el procesamiento seguro de pagos a través de Cloud Code. Implementaste características clave como listados de productos, funcionalidad de carrito de compras, autenticación de usuarios, seguimiento de pedidos y reseñas.
Puntos Clave
Integración de Back4App: Simplifica la gestión del backend para tu aplicación Flutter.
Integración de Stripe a través de Cloud Code: Procesa pagos de forma segura sin exponer claves sensibles.
Arquitectura Modular: Separar servicios y modelos mejora la mantenibilidad.
Próximos Pasos
Mejorar la seguridad: Implementar un manejo adecuado de errores y validación de entradas.
Mejoras de UI/UX: Refinar la interfaz de usuario para una mejor experiencia del usuario.
Gestión de inventario: Actualizar el inventario de productos al realizar una compra.
Notificaciones por correo electrónico: Enviar correos electrónicos de confirmación de pedidos a los usuarios.
Panel de administración: Crear una interfaz de administración para gestionar productos y pedidos.
Recursos adicionales
﻿Documentación de Back4App﻿
﻿Guía de Parse Server﻿
﻿Documentación oficial de Flutter﻿
﻿Referencia de API de Stripe﻿
﻿Paquete de Flutter Stripe﻿
¡Feliz codificación!
Actualizado 23 Jan 2025
¿Esta página le fue útil?
Construyendo una aplicación de chat en tiempo real en Flutter con Back4App
Cómo construir una aplicación de traductor de voz AI utilizando Flutter y Back4App