O problema parece estar relacionado à forma como os bytes da imagem estão sendo manipulados ou ao formato dos dados que estão sendo enviados do backend. Vamos tentar resolver isso passo a passo.
1. Verifique os Bytes da Imagem
Primeiro, vamos garantir que os bytes da imagem estão corretos e não estão sendo corrompidos durante o processo.
No Backend (Node.js):
const fs = require('fs');
const imageBytes = fs.readFileSync('caminho/para/sua/imagem.jpg');
console.log('Primeiros bytes da imagem:', imageBytes.slice(0, 10));
No Flutter:
print('Primeiros bytes recebidos: ${bytesImage.take(10).toList()}');
Compare os primeiros bytes logados no backend com os primeiros bytes recebidos no Flutter. Eles devem ser idênticos. Se forem diferentes, há um problema na transmissão dos dados.
2. Use Base64 para Transmissão
Como você já tentou usar Base64, vamos garantir que isso seja feito corretamente.
No Backend (Node.js):
const base64Image = imageBytes.toString('base64');
console.log('Base64 da imagem:', base64Image);
No Flutter:
String base64String = ...; // Receba a string Base64
Uint8List bytesImage = base64Decode(base64String);
print('Primeiros bytes decodificados: ${bytesImage.take(10).toList()}');
3. Verifique o Formato da Imagem
Certifique-se de que o formato da imagem (JPEG, PNG, etc.) é suportado pelo Image.memory. Você pode tentar usar uma imagem simples em formato PNG para teste.
4. Exiba a Imagem no Flutter
Agora, vamos tentar exibir a imagem no Flutter.
Image imagem = Image.memory(
bytesImage,
errorBuilder: (context, error, stackTrace) {
print('Erro ao carregar imagem: $error');
return Icon(Icons.error);
},
);
// Para exibir a imagem em um widget:
Container(
child: imagem,
);
5. Teste com uma Imagem Simples
Para descartar problemas com a imagem específica que você está usando, tente com uma imagem simples e pequena.
No Backend (Node.js):
const fs = require('fs');
const imageBytes = fs.readFileSync('caminho/para/sua/imagem_simples.png');
const base64Image = imageBytes.toString('base64');
console.log('Base64 da imagem simples:', base64Image);
No Flutter:
String base64String = ...; // Receba a string Base64 da imagem simples
Uint8List bytesImage = base64Decode(base64String);
Image imagem = Image.memory(bytesImage);
// Para exibir a imagem em um widget:
Container(
child: imagem,
);
6. Verifique o Código Completo
Aqui está um exemplo completo de como você pode fazer isso:
No Backend (Node.js):
const fs = require('fs');
const express = require('express');
const app = express();
app.get('/image', (req, res) => {
const imageBytes = fs.readFileSync('caminho/para/sua/imagem.jpg');
const base64Image = imageBytes.toString('base64');
res.json({ image: base64Image });
});
app.listen(3000, () => {
console.log('Servidor rodando na porta 3000');
});
No Flutter:
import 'dart:convert';
import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
class ImageTest extends StatefulWidget {
@override
_ImageTestState createState() => _ImageTestState();
}
class _ImageTestState extends State<ImageTest> {
Uint8List? bytesImage;
@override
void initState() {
super.initState();
fetchImage();
}
Future<void> fetchImage() async {
final response = await http.get(Uri.parse('http://localhost:3000/image'));
if (response.statusCode == 200) {
final data = jsonDecode(response.body);
setState(() {
bytesImage = base64Decode(data['image']);
});
} else {
throw Exception('Falha ao carregar a imagem');
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Teste de Imagem'),
),
body: Center(
child: bytesImage != null
? Image.memory(
bytesImage!,
errorBuilder: (context, error, stackTrace) {
return Icon(Icons.error);
},
)
: CircularProgressIndicator(),
),
);
}
}
void main() {
runApp(MaterialApp(
home: ImageTest(),
));
}
Conclusão
Se após todos esses passos o problema persistir, pode haver um problema mais profundo, como uma incompatibilidade entre o formato dos dados ou um bug no Flutter. Nesse caso, você pode tentar usar outra biblioteca para exibir imagens, como cached_network_image, ou abrir uma issue no repositório do Flutter no GitHub.
Boa sorte, Gustavo! 🚀
