Modelli Flutter
Costruisci un'app di e-commerce con Flutter, Back4App e integrazione di Stripe tramite Cloud Code

47min
Introduzione
Sviluppare un'app di e-commerce comporta molteplici componenti, tra cui elenchi di prodotti, funzionalità del carrello, elaborazione dei pagamenti sicura, tracciamento degli ordini e recensioni degli utenti. Combinare il potente toolkit UI di Flutter con i servizi backend scalabili di Back4App semplifica il processo di sviluppo. Inoltre, integrare Stripe per l'elaborazione dei pagamenti tramite Back4App Cloud Code consente una gestione delle transazioni sicura e professionale.
In questo tutorial, costruirai un'app di e-commerce con le seguenti funzionalità:
Elenchi di Prodotti: Visualizza prodotti con immagini, descrizioni e prezzi.
Carrello della Spesa: Aggiungi e rimuovi prodotti dal carrello.
Account Utente: Gestisci profili e indirizzi degli utenti.
Checkout Sicuro: Elabora i pagamenti in modo sicuro utilizzando Stripe tramite Back4App Cloud Code.
Tracciamento Ordini: Traccia lo stato e la cronologia degli ordini.
Recensioni e Valutazioni: Consenti agli utenti di inviare recensioni e valutazioni.
Prerequisiti
Per seguire questo tutorial, avrai bisogno di:
Flutter SDK installato sul tuo computer. Segui la guida all'installazione di Flutter.
Conoscenze di base di Flutter e Dart.
Un IDE o editor di testo come Visual Studio Code o Android Studio.
Un account Back4App. Registrati su Back4App.
Account Stripe. Registrati su Stripe per ottenere le chiavi API.
Node.js e npm installati per lo sviluppo del Cloud Code.
﻿
Passo 1 – Configurazione del Progetto Flutter
1.1. Crea un Nuovo Progetto Flutter
Apri il tuo terminale e esegui:
Bash
flutter create ecommerce_app
flutter create ecommerce_app
﻿
Naviga nella directory del progetto:
Bash
cd ecommerce_app
cd ecommerce_app
﻿
1.2. Aggiungi Dipendenze
Apri pubspec.yaml e aggiungi le seguenti dipendenze:
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
﻿
Esegui flutter pub get per installare i pacchetti.
Nota:
parse_server_sdk_flutter per l'integrazione con Back4App.
provider per la gestione dello stato.
cached_network_image per il caricamento efficiente delle immagini.
flutter_stripe per l'integrazione di Stripe lato client.
uuid per generare identificatori unici.
  
Passo 2 – Configurazione di Back4App
2.1. Crea una Nuova Applicazione Back4App
Accedi al tuo dashboard di Back4App.
Clicca su "Crea nuova App".
Inserisci "EcommerceApp" come nome dell'applicazione e clicca su "Crea".
2.2. Configura i Modelli di Dati
Dobbiamo creare diverse classi in Back4App:
Prodotto
Utente (Classe integrata)
Ordine
OrdineArticolo
Recensione
2.2.1. Classe Prodotto
Naviga alla "Database" sezione.
Clicca su "Crea una classe".
Seleziona "Personalizzato" e inserisci "Prodotto" come nome della classe.
Aggiungi le seguenti colonne:
nome: Stringa
descrizione: Stringa
prezzo: Numero
immagine: File
categoria: Stringa
inventario: Numero
Crea un "OrderItem" classe con le seguenti colonne:
ordine: Puntatore
prodotto: Puntatore
quantità: Numero
prezzo: Numero
2.2.4. Classe Recensione
Crea una "Review" classe con le seguenti colonne:
prodotto: Puntatore
utente: Puntatore<_Utente>
valutazione: Numero
commento: Stringa
2.3. Ottenere le credenziali dell'applicazione
Naviga a Impostazioni App > Sicurezza e Chiavi.
Annota il tuo ID Applicazione e Chiave Client.
  
Passo 3 – Implementazione della gestione dei prodotti
3.1. Inizializzazione di Parse in Flutter
Apri lib/main.dart e modificalo:
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(),
      ),
    );
  }
}
﻿
Sostituisci 'YOUR_APPLICATION_ID' e 'YOUR_CLIENT_KEY' con le tue credenziali di Back4App.
3.2. Creazione del modello di prodotto
Crea una directory models sotto lib e aggiungi 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. Implementazione del Servizio Prodotto
Crea una directory services sotto lib e aggiungi 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. Creare la Schermata Home
Crea screens directory sotto lib e aggiungi 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. Schermata Dettagli Prodotto
Crea product_detail_screen.dart sotto 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'),
          ),
        ],
      ),
    );
  }
}
﻿
  
Passo 4 – Implementazione degli Account Utente
4.1. Servizio di Autenticazione
Aggiungi auth_service.dart sotto 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. Schermate di Autenticazione
Crea login_screen.dart e signup_screen.dart sotto lib/screens/.
Schermata di accesso:
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'),
            )
          ],
        ),
      ),
    );
  }
}
﻿
Schermata di registrazione:
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. Aggiorna Main per includere AuthService
In main.dart, avvolgi il 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. Reindirizzamento Basato sullo Stato di Autenticazione
Modifica main.dart per controllare lo stato di autenticazione:
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();
    }
  },
),
﻿
  
Passo 5 – Funzionalità del Carrello
5.1. Crea Servizio Carrello
Aggiungi cart_service.dart sotto 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. Crea Schermata Carrello
Aggiungi cart_screen.dart sotto 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'),
          ),
        ],
      ),
    );
  }
}
﻿
  
Passaggio 6 – Checkout Sicuro con Integrazione Stripe tramite Cloud Code
6.1. Configura l'Account Stripe
Iscriviti per un account Stripe.
Ottieni la tua Chiave Pubblicabile e Chiave Segreta dal Dashboard di Stripe sotto Sviluppatori > Chiavi API.
6.2. Installa il SDK di Stripe nel Cloud Code
Back4App supporta le funzioni di Cloud Code scritte in JavaScript. Scriveremo funzioni di Cloud Code per gestire l'elaborazione dei pagamenti.
6.2.1. Crea un Progetto di Cloud Code
Nel dashboard della tua app Back4App, vai a Impostazioni App > Funzioni Cloud.
Clicca "Modifica codice" per aprire l'editor di Cloud Code.
6.2.2. Inizializza npm e Installa il Pacchetto Stripe
Nel terminale di Cloud Code (fornito nell'editor), esegui:
Bash
npm init -y
npm install [email protected]
npm init -y
npm install stripe@8.174.0
﻿
Nota: Il Cloud Code di Back4App utilizza la versione 14.x di Node.js, quindi assicurati della compatibilità.
6.3. Crea Funzione Cloud per l'Intento di Pagamento
Crea o modifica main.js nell'editor del 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);
  }
});
﻿
Sostituisci 'YOUR_STRIPE_SECRET_KEY' con la tua chiave segreta Stripe effettiva.
Nota di Sicurezza: Non esporre mai la tua chiave segreta sul lato client. Tienila al sicuro nel Cloud Code.
6.4. Distribuisci il Cloud Code
Clicca "Distribuisci" nell'editor del Cloud Code per distribuire le tue funzioni.
6.5. Implementare il pagamento in Flutter
6.5.1. Inizializzare Stripe in Flutter
In main.dart, dopo Parse().initialize, aggiungi:
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';
﻿
Sostituisci 'YOUR_STRIPE_PUBLISHABLE_KEY' con la tua chiave pubblicabile Stripe.
6.5.2. Creare la schermata di checkout
Aggiungi checkout_screen.dart sotto 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. Gestire la conferma del pagamento
Crea order_confirmation_screen.dart sotto 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. Salvataggio dell'Ordine su Back4App
Modifica il _processPayment metodo per salvare i dettagli dell'ordine:
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')),
  );
}
﻿
  
Passo 7 – Tracciamento dell'Ordine
7.1. Crea Servizio Ordine
Aggiungi order_service.dart sotto 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();
    }
  }
}
﻿
  
Passo 7 – Tracciamento dell'Ordine
7.2. Crea Modello Ordine
Aggiungi order.dart sotto 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. Crea Schermata Ordini
Aggiungi orders_screen.dart sotto 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)}'),
              );
            },
          );
        },
      ),
    );
  }
}
﻿
  
Passo 8 – Recensioni e Valutazioni
8.1. Crea Servizio Recensioni
Aggiungi review_service.dart sotto 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. Crea il modello di recensione
Aggiungi review.dart sotto 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. Aggiorna la schermata dei dettagli del prodotto
In product_detail_screen.dart, aggiungi una sezione per visualizzare e inviare recensioni.
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'),
          ),
        ],
      ),
    ],
  ),
),
﻿
  
Conclusione
In questo tutorial completo, hai costruito un'app di e-commerce utilizzando Flutter e Back4App, integrata con Stripe per l'elaborazione sicura dei pagamenti tramite Cloud Code. Hai implementato funzionalità chiave come elenchi di prodotti, funzionalità del carrello, autenticazione degli utenti, tracciamento degli ordini e recensioni.
Punti Chiave
Integrazione con Back4App: Semplifica la gestione del backend per la tua app Flutter.
Integrazione di Stripe tramite Cloud Code: Elabora i pagamenti in modo sicuro senza esporre chiavi sensibili.
Architettura Modulare: Separare servizi e modelli migliora la manutenibilità.
Prossimi Passi
Migliora la Sicurezza: Implementa una corretta gestione degli errori e validazione degli input.
Miglioramenti UI/UX: Affina l'interfaccia utente per una migliore esperienza utente.
Gestione dell'Inventario: Aggiorna l'inventario dei prodotti al momento dell'acquisto.
Notifiche Email: Invia email di conferma dell'ordine agli utenti.
Pannello di Amministrazione: Crea un'interfaccia di amministrazione per gestire prodotti e ordini.
Risorse Aggiuntive
﻿Documentazione Back4App﻿
﻿Guida a Parse Server﻿
﻿Documentazione Ufficiale di Flutter﻿
﻿Riferimento API di Stripe﻿
﻿Pacchetto Flutter Stripe﻿
Buon Codice!
Aggiornato 23 Jan 2025
Questa pagina ti è stata di aiuto?
Crea un'applicazione di chat in tempo reale in Flutter con Back4App.
AVANTI IL PROSSIMO
Come costruire un'app di traduzione vocale AI utilizzando Flutter e Back4App