Cómo convertir BASE64 string en imagen con Flutter?

Te damos la bienvenida a nuestra página, en este sitio encontrarás la solucíon que estabas buscando.

Solución:

Puedes convertir un Uint8List a un aleteo Image artilugio usando el Image.memory constructor. (Utilizar el Uint8List.fromList constructor para convertir un List a Uint8List si es necesario.) Puede utilizar BASE64.encode para ir por el otro lado.

Aquí hay un código de muestra.

import 'dart:async';
import 'dart:convert';
import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

void main() 
  runApp(new MyApp());


class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return new MaterialApp(
      theme: new ThemeData.dark(),
      home: new MyHomePage(),
    );
  


class MyHomePage extends StatefulWidget 
  @override
  State createState() => new MyHomePageState();


class MyHomePageState extends State 
  String _base64;

  @override
  void initState() 
    super.initState();
    (() async 
      http.Response response = await http.get(
        'https://flutter.io/images/flutter-mark-square-100.png',
      );
      if (mounted) 
        setState(() 
          _base64 = BASE64.encode(response.bodyBytes);
        );
      
    )();
  

  @override
  Widget build(BuildContext context) 
    if (_base64 == null)
      return new Container();
    Uint8List bytes = BASE64.decode(_base64);
    return new Scaffold(
      appBar: new AppBar(title: new Text('Example App')),
      body: new ListTile(
        leading: new Image.memory(bytes),
        title: new Text(_base64),
      ),
    );
  

Sin embargo, generalmente es una mala idea almacenar grandes cantidades de datos binarios en su base de datos. No está aprovechando los puntos fuertes de la base de datos en tiempo real de Firebase y terminará desperdiciando ancho de banda transmitiendo datos que no necesita, así como codificando y decodificando innecesariamente. Deberías usar el firebase_storage plugin en su lugar, almacenando la ruta o la URL de descarga de la imagen en la base de datos.

Hay una forma más sencilla usando 'dart:convert' paquete

Image.memory(base64Decode(base64String));

Implementación y algunos métodos útiles:

import 'dart:convert';
import 'dart:typed_data';
import 'package:flutter/widgets.dart';


Image imageFromBase64String(String base64String) 
  return Image.memory(base64Decode(base64String));


Uint8List dataFromBase64String(String base64String) 
  return base64Decode(base64String);


String base64String(Uint8List data) 
  return base64Encode(data);

Uint8List _bytesImage;

String _imgString = 'iVBORw0KGgoAAAANSUhEUg.....';

_bytesImage = Base64Decoder().convert(_imgString);

Image.memory(_bytesImage)

Te mostramos las comentarios y valoraciones de los usuarios

Si conservas algún titubeo o forma de enriquecer nuestro división te sugerimos realizar una anotación y con gusto lo observaremos.

---

---

Utiliza Nuestro Buscador