0

Estoy trabajando en un componente en Flutter que debe importar imágenes de la galería dentro de un formulario, de momento estoy pasándolas a base64 y eso se supone que es lo que dispondría al momento de mostrarlas.

Pero al investigar un poco como hacerlo y replicarlo veo que el rendimiento de transición entre cada unas de las imágenes es bastante lento.

El código simplificado es el siguiente:

Archivo main.dart

import 'package:flutter/material.dart';
import 'package:proyecto/screens/test.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      debugShowCheckedModeBanner: false,
      initialRoute: 'master',
      home: TestScreen(),
    );
  }
}

Archivo test.dart

import 'dart:convert';
import 'dart:typed_data';

import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';

class TestScreen extends StatelessWidget {
  List<String> imagenes = [
    "/9j/.../AKDP/9k=",
    "/9j//+ECj...//2Q=="
  ];

  @override
  Widget build(BuildContext context) {
    final _screenSize = MediaQuery.of(context).size;

    return Scaffold(
      body: Container(
        padding: EdgeInsets.only(top: 1.0),
        child: Swiper(
          itemBuilder: (BuildContext context,int index){
            Uint8List bytes = base64Decode(imagenes[index]);
            MemoryImage image = MemoryImage( bytes );

            return Hero(
              tag: "imagen_$index",
              child: ClipRRect(
                borderRadius: BorderRadius.circular(15.0),
                child: GestureDetector(
                  onTap: () { },
                  child: FadeInImage(
                    image: image,
                    placeholder: AssetImage('assets/img/no-image.jpg'),
                    fit: BoxFit.cover
                  ),
                ),
              ),
            );
          },
          itemCount: imagenes.length,
          // pagination: new SwiperPagination(),
          // control: new SwiperControl(),
          itemWidth: _screenSize.width * 0.7,
          itemHeight: _screenSize.height * 0.3,
          layout: SwiperLayout.STACK,
        ),
      ),
    );
  }
}

Donde el arreglo de imágenes lo recorte para poder plasmarlo acá... pero bien pueden usar convertir por medio de esta página y usar las imágenes que ustedes deseen para recrear el problema, en caso que quieran ver a lo que hago referencia.

Sin embargo, agrego un gif con el comportamiento al que hago referencia.

Transición lenta de imagenes

Me gustaría que me den una idea quienes hayan trabajado imágenes en Flutter a ver que alternativas podría usar o que estoy haciendo mal.

Gracias de antemano.

8
  • has probado con imagenes más pequeñas o usando networkimage en lugar de MemoryImage solo para descartar ? el 27 ene. 2020 a las 19:23
  • Con networkImage o assets funciona de maravilla, pero como tengo que adjuntar imágenes ya sea desde galería o desde cámara por eso había pensado en manejarlo por base64. el 27 ene. 2020 a las 19:32
  • 1
    ok entiendo, el problema es que el base64Decode está tomando mucho tiempo, es por eso el delay, lo mejor sería que uses FutureBuilder o alguna función asíncrona para que hagas el decode de todas las imagenes primero y luego las usas en el carousel el 27 ene. 2020 a las 19:35
  • Si necesitas ayuda en eso puedes preguntar :) el 27 ene. 2020 a las 20:09
  • Justamente estaba tratando de hacer la prueba según lo que me indicabas para ver si en realidad solucionaba el problema antes de dar una respuesta... y así fue. Voy a colocar una respuesta con la solución. el 27 ene. 2020 a las 20:15

1 respuesta 1

0

Haciendo uso de un FutureBuilder se mejora el rendimiento de las transiciones. Por tanto cambie el builder de la siguiente forma.

Archivo test.dart

  @override
  Widget build(BuildContext context) {
    final _screenSize = MediaQuery.of(context).size;

    return Scaffold(
      body: Container(
        padding: EdgeInsets.only(top: 1.0),
        child: FutureBuilder<List<MemoryImage>>(
          future: Future.value(
            imagenes.map((item) => MemoryImage( base64Decode(item) )).toList()
          ),
          builder: (BuildContext context, AsyncSnapshot<List<MemoryImage>> snapshot) {

            if( snapshot.hasData && snapshot.data.length > 0 ) {
              return Swiper(
                itemBuilder: (BuildContext context, int index){
                  return Hero(
                    tag: "imagen_$index",
                    child: ClipRRect(
                      borderRadius: BorderRadius.circular(15.0),
                      child: GestureDetector(
                        onTap: () { },
                        child: FadeInImage(
                          image: snapshot.data[index],
                          placeholder: AssetImage('assets/img/no-image.jpg'),
                          fit: BoxFit.cover
                        ),
                      ),
                    ),
                  );
                },
                itemCount: imagenes.length,
                // pagination: new SwiperPagination(),
                // control: new SwiperControl(),
                itemWidth: _screenSize.width * 0.7,
                itemHeight: _screenSize.height * 0.3,
                layout: SwiperLayout.STACK,
              );
            } 

            return Center(
              child: CircularProgressIndicator(),
            );
          }
        ),
      ),
    );
  }

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.