Desvanecer imágenes con un marcador de posición
Cómo aplicar un desvanecimiento a las imágenes.
Al mostrar imágenes usando el Widget Image predeterminado,
es posible que notes que simplemente aparecen de repente en la pantalla a medida que se cargan.
Esto podría resultar visualmente molesto para tus usuarios.
En su lugar, ¿no sería agradable mostrar primero un marcador de posición y
que las imágenes aparezcan gradualmente a medida que se cargan? Utiliza el Widget
FadeInImage
exactamente para este propósito.
FadeInImage funciona con imágenes de cualquier tipo: en memoria, recursos locales,
o imágenes de internet.
En memoria
#En este ejemplo, utiliza el paquete transparent_image
para obtener un marcador de posición transparente simple.
FadeInImage.memoryNetwork(
placeholder: kTransparentImage,
image: 'https://picsum.photos/250?image=9',
),
Ejemplo completo
#import 'package:flutter/material.dart';
import 'package:transparent_image/transparent_image.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
const title = 'Fade in images';
return MaterialApp(
title: title,
home: Scaffold(
appBar: AppBar(title: const Text(title)),
body: Stack(
children: <Widget>[
const Center(child: CircularProgressIndicator()),
Center(
child: FadeInImage.memoryNetwork(
placeholder: kTransparentImage,
image: 'https://picsum.photos/250?image=9',
),
),
],
),
),
);
}
}
Desde el asset bundle
#También puedes considerar el uso de recursos locales como marcadores de posición.
Primero, añade el recurso al archivo pubspec.yaml del proyecto
(para obtener más detalles, consulta Añadir recursos e imágenes):
flutter:
assets:
- assets/loading.gif
Luego, utiliza el constructor FadeInImage.assetNetwork():
FadeInImage.assetNetwork(
placeholder: 'assets/loading.gif',
image: 'https://picsum.photos/250?image=9',
),
Ejemplo completo
#import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
const title = 'Fade in images';
return MaterialApp(
title: title,
home: Scaffold(
appBar: AppBar(title: const Text(title)),
body: Center(
child: FadeInImage.assetNetwork(
placeholder: 'assets/loading.gif',
image: 'https://picsum.photos/250?image=9',
),
),
),
);
}
}
A menos que se indique lo contrario, la documentación de este sitio refleja Flutter 3.44.0. Página actualizada por última vez el 2026-05-05. Ver código fuente oreportar un problema.