La lista de imágenes dinámicas es la lista de imágenes cuando agregamos imágenes dinámicamente. En este artículo, veremos cómo agregar imágenes dinámicamente a la lista de imágenes. Es algo así como que estamos agregando algunos elementos a la lista. No hay necesidad de agregar dependencia a nuestro proyecto. A continuación se muestra un video de muestra para tener una idea de lo que vamos a hacer en este artículo.
Implementación paso a paso
Paso 1 : crea un proyecto vacío. Y agregue la biblioteca de materiales al archivo principal .
Dart
import 'package:flutter/material.dart';
Paso 2 : ahora llame al método principal , en este ejecute el método runApp que ejecutará nuestra aplicación o clase.
Dart
void main() => runApp(A4Run());
Paso 3 : Ahora tenemos que crear un widget con estado A4Run .
¿Por qué con estado?
Porque estamos implementando dinámicamente para que el estado de la aplicación cambie. Cree una clase A4Run con estado . Y devuelva el andamio, agregue AppBar.
Dart
class A4Run extends StatefulWidget {
A4Run() : super();
@override
A4RunState createState() => A4RunState();
}
class A4RunState extends State<A4Run> {
@override
Widget build(BuildContext context) {
// finding length of the list
var ImgCount=imgList.length;
// scaffold with appbar
return Scaffold(
// appbar with leading icon and title
appBar: AppBar(
leading:Icon(Icons.image),
title: Text("Dynamic Add Image List"),
),
);
}
}
En el proyecto, estamos usando tres imágenes y haciendo la lista de ellas imgList , de modo que seleccionamos selecciones aleatorias de la lista dinámicamente y luego agregamos imágenes nuevamente a la lista.
Dart
// list of images
List imgList = [
Image.asset('Images/S1.png'),
Image.asset('Images/S3.png'),
Image.asset('Images/S2.png'),
];
No olvide agregar la imagen en el activo del archivo pubspec.yaml . De lo contrario, esto arrojará un error. Puede consultar este artículo para lo mismo. El proceso de pensamiento es que haremos que ListView y Add item cuenten y un botón para agregar la imagen. y adjuntar la imagen.
Paso 4 : ahora en el cuerpo del andamio , cree un widget ListView. En ListView primero, usaremos la fila para mostrar el recuento de elementos y un botón. Ahora agregue un niño más a la vista de lista, que mostrará la lista de imágenes.
Dart
body:
Padding(
padding: const EdgeInsets.all(12.0),
// listview with scroll
// direction vertical
child: ListView (
scrollDirection: Axis.vertical,
// listview children
children: [
Row(
children: [
// image count in the list
// or length of the list
Text("Image Count:$ImgCount"),
SizedBox(width:45),
// icon button to add
// the image to the list
FlatButton.icon(
icon:Icon(Icons.add),
label:Text("Add Image"),
// when pressed call
// the add method
onPressed:(){
},
)
]
// traversal in the list
// and display each image .
for(var item in imgList)
Center(
child:Container(
width:200,
height:150,
child:item
),
)
),
],
),
),
Paso 5 : Ahora haga un método que tome las imágenes aleatorias para la lista y luego vuelva a agregarlas a la lista.
Dart
// AddRandomImage method to add
// the image to the list
void AddRandomImage(){
// random image select in range 0-3
var RandImgIndex=new Random().nextInt(3);
// if index =0 pick image that is on 0 index
if(RandImgIndex==0){
imgList.add(Image.asset('Images/S1.png'));
}
// if index =1 pick image at index 1
else if(RandImgIndex==1){
imgList.add(Image.asset('Images/S2.png'));
}
// pick image at 3 index
else{
imgList.add(Image.asset('Images/S3.png'));
}
}
Paso 6 : Y finalmente, en la propiedad presionada, llame al método setState y en él llame al método AddRandomImage .
Dart
onPressed:(){
// setstate method to call the
// method AddRandomImage
setState(() {
AddRandomImage();
});
},
Código completo
Dart
import 'dart:math';
import 'package:flutter/material.dart';
// main method with runapp runs the class A4Run
void main() => runApp(A4Run());
class A4Run extends StatefulWidget {
A4Run({Key? key}) : super(key: key);
@override
A4RunState createState() => A4RunState();
}
class A4RunState extends State<A4Run> {
// list of images
List imgList = [
Image.asset('Images/S1.png'),
Image.asset('Images/S3.png'),
Image.asset('Images/S2.png'),
Image.asset('Images/S2.png'),
];
// method to add images dynamically
void AddRandomImage() {
var RandImgIndex = Random().nextInt(3);
// if index is 0 we will pick image at index 0
if (RandImgIndex == 0) {
imgList.add(Image.asset('Images/S1.png'));
// if index is 1 we will pick image at index 1
} else if (RandImgIndex == 1) {
imgList.add(Image.asset('Images/S2.png'));
} else {
// if index is 2 we will pick image at index 2
imgList.add(Image.asset('Images/S3.png'));
}
}
@override
Widget build(BuildContext context) {
// count of the list of image
var ImgCount = imgList.length;
// MaterialApp with debugShowCheckedModeBanner false
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
leading: Icon(Icons.image),
title: Text("Dynamic Add Image List"),
),
body: Padding(
padding: EdgeInsets.all(12.0),
// list view to show images and list count
child: ListView(
scrollDirection: Axis.vertical,
children: [
Row(children: [
// showing item count
Text("Image Count:$ImgCount"),
SizedBox(width: 45),
// icon button to call the
// method AddRandomImage
OutlinedButton.icon(
icon: Icon(Icons.add),
label: Text("Add Image"),
onPressed: () {
setState(() {
// calling method
AddRandomImage();
});
},
)
]),
// showing list of images
for (var item in imgList)
Center(
child: Container(width: 500, height: 350, child: item),
)
],
),
),
),
);
}
}