Di più
Come utilizzare Uint8List in Flutter e persisterlo nel backend utilizzando Back4App?

12min
Introduzione
Nei sistemi digitali, i file sono spesso rappresentati come una sequenza di byte, e Dart fornisce un modo efficiente per gestire i dati byte utilizzando Uint8List. Un Uint8List è un elenco di lunghezza fissa di interi non firmati a 8 bit, il che significa che ogni numero varia da 0 a 255. Questa struttura è utile per lavorare con dati binari, come immagini o file, dove l'efficienza della memoria è cruciale.
In questo tutorial, tratteremo come lavorare con Uint8List in Flutter, convertire file in elenchi di byte e persistere i dati nel backend di Back4app utilizzando il Parse SDK per Flutter.
Requisiti
Prima di iniziare, assicurati di avere quanto segue:
Un account Back4app. Registrati per un account gratuito su Back4app.com.
Un ambiente di sviluppo Flutter configurato sul tuo computer locale. Segui la guida all'installazione di Flutter se non l'hai ancora configurato.
Conoscenze di base di Dart, widget Flutter e utilizzo di Back4app per i servizi backend.
Passo 1 – Configurare il tuo backend Back4app
Crea un progetto Back4app: Accedi al tuo account Back4app e crea un nuovo progetto.
Crea classi Parse: Per questo tutorial, crea una classe Parse chiamata FileStorage per memorizzare i dati binari:
filename (String): Il nome del file.
fileData (File): I dati binari del file.
Ottieni le tue credenziali Back4app: Naviga nelle impostazioni del tuo progetto per recuperare il tuo ID applicazione e la chiave client, che ti serviranno per connettere la tua app Flutter a Back4app.
Passo 2 – Configurare il progetto Flutter
Crea un nuovo progetto Flutter: Apri il tuo terminale o prompt dei comandi e esegui:
Bash
flutter create uint8list_example
flutter create uint8list_example
﻿
Aggiungi dipendenze: Apri pubspec.yaml e aggiungi le seguenti dipendenze:
YAML
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: latest_version
  file_picker: latest_version
  path_provider: latest_version
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: latest_version
  file_picker: latest_version
  path_provider: latest_version
﻿
Esegui flutter pub get per installare queste dipendenze.
Inizializza Parse nella tua app: In lib/main.dart, inizializza il SDK di Parse:
Dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk_flutter.dart';

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

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

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

  runApp(MyApp());
}

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

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

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

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

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Uint8ListExample(),
    );
  }
}
﻿
Sostituisci 'YOUR_BACK4APP_APP_ID' e 'YOUR_BACK4APP_CLIENT_KEY' con le tue credenziali effettive di Back4app.
Passo 3 – Lavorare con Uint8List in Flutter
Selezione e Lettura del File: Usa il file_picker pacchetto per selezionare un file dal dispositivo e convertirlo in un Uint8List:
Dart
import 'dart:io';
import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:file_picker/file_picker.dart';
import 'package:path_provider/path_provider.dart';

class Uint8ListExample extends StatefulWidget {
  @override
  _Uint8ListExampleState createState() => _Uint8ListExampleState();
}

class _Uint8ListExampleState extends State<Uint8ListExample> {
  Uint8List? _fileBytes;
  String? _fileName;

  Future<void> _pickFile() async {
    FilePickerResult? result = await FilePicker.platform.pickFiles();

    if (result != null) {
      PlatformFile file = result.files.first;

      setState(() {
        _fileBytes = file.bytes;
        _fileName = file.name;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Uint8List Example')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: _pickFile,
              child: Text('Pick a File'),
            ),
            if (_fileName != null)
              Text('Selected File: $_fileName'),
            if (_fileBytes != null)
              ElevatedButton(
                onPressed: _saveToBackend,
                child: Text('Save to Backend'),
              ),
          ],
        ),
      ),
    );
  }

  Future<void> _saveToBackend() async {
    // Implement the saving logic in the next step
  }
}
import 'dart:io';
import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:file_picker/file_picker.dart';
import 'package:path_provider/path_provider.dart';

class Uint8ListExample extends StatefulWidget {
  @override
  _Uint8ListExampleState createState() => _Uint8ListExampleState();
}

class _Uint8ListExampleState extends State<Uint8ListExample> {
  Uint8List? _fileBytes;
  String? _fileName;

  Future<void> _pickFile() async {
    FilePickerResult? result = await FilePicker.platform.pickFiles();

    if (result != null) {
      PlatformFile file = result.files.first;

      setState(() {
        _fileBytes = file.bytes;
        _fileName = file.name;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Uint8List Example')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: _pickFile,
              child: Text('Pick a File'),
            ),
            if (_fileName != null)
              Text('Selected File: $_fileName'),
            if (_fileBytes != null)
              ElevatedButton(
                onPressed: _saveToBackend,
                child: Text('Save to Backend'),
              ),
          ],
        ),
      ),
    );
  }

  Future<void> _saveToBackend() async {
    // Implement the saving logic in the next step
  }
}
﻿
Questo codice consente all'utente di selezionare un file, legge il file come un Uint8List, e visualizza il nome del file e un pulsante per salvarlo.
Passo 4 – Persistenza del Uint8List in Back4app
Per memorizzare il file in Back4app, utilizziamo l' ParseFile oggetto, che ci consente di caricare dati binari come immagini o documenti.
Salvare il file in Back4app: Aggiorna il _saveToBackend metodo per persistere il file selezionato in Back4app:
Dart
Future<void> _saveToBackend() async {
  if (_fileBytes != null && _fileName != null) {
    final parseFile = ParseFile(null, name: _fileName, byteData: _fileBytes);

    // Create a new ParseObject to store the file
    final fileStorage = ParseObject('FileStorage')
      ..set('filename', _fileName)
      ..set('fileData', parseFile);

    // Save the file in Back4app
    final response = await fileStorage.save();

    if (response.success) {
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(
        content: Text('File saved successfully!'),
      ));
    } else {
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(
        content: Text('Failed to save file.'),
      ));
    }
  }
}
Future<void> _saveToBackend() async {
  if (_fileBytes != null && _fileName != null) {
    final parseFile = ParseFile(null, name: _fileName, byteData: _fileBytes);

    // Create a new ParseObject to store the file
    final fileStorage = ParseObject('FileStorage')
      ..set('filename', _fileName)
      ..set('fileData', parseFile);

    // Save the file in Back4app
    final response = await fileStorage.save();

    if (response.success) {
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(
        content: Text('File saved successfully!'),
      ));
    } else {
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(
        content: Text('Failed to save file.'),
      ));
    }
  }
}
﻿
Questo metodo carica il file come dati binari in Back4app utilizzando un ParseFile. Se ha successo, visualizza un messaggio di conferma.
Passo 5 – Esecuzione dell'App
Esegui la tua app utilizzando flutter run. Dovresti vedere un pulsante per selezionare un file, seguito da un'opzione per salvarlo nel backend una volta selezionato.
Verifica i dati in Back4app accedendo al tuo dashboard di Back4app e controllando la FileStorage classe. Dovresti vedere il file salvato insieme al suo nome.
Migliori Pratiche per Memorizzare Dati Binari
Quando lavori con Uint8List e dati binari, ecco alcune migliori pratiche:
Usa : Il ParseFile di Back4app è un modo efficiente per memorizzare e recuperare dati binari come immagini, video e documenti.
Evita di Memorizzare File di Grandi Dimensioni Direttamente negli Oggetti Parse: Se i tuoi file sono grandi, considera di utilizzare un servizio di archiviazione come AWS S3 e memorizza l'URL del file nel tuo oggetto Parse invece del file stesso.
Compressione e Ottimizzazione: Per immagini o file di grandi dimensioni, considera di comprimere il file prima di caricarlo per migliorare le prestazioni.
Conclusione
In questo tutorial, abbiamo trattato come lavorare con Uint8List in Flutter, convertire file in elenchi di byte e persistere questi dati in Back4app utilizzando il Parse SDK. Uint8List fornisce un modo efficiente in termini di memoria per gestire i dati byte in Dart, rendendolo adatto per operazioni su file come caricamenti di immagini, archiviazione di documenti e altro. Integrare questo con Back4app ti consente di memorizzare e gestire facilmente i dati binari nel cloud.
Per ulteriori informazioni, visita la documentazione di Flutter e documentazione di Back4app. Buon coding!
Aggiornato 23 Jan 2025
Questa pagina ti è stata di aiuto?
Comprendere il pattern matching in Flutter utilizzando il backend di Back4app
AVANTI IL PROSSIMO
Build a dropdown menu in Flutter with backend data from Back4app