Listas estáticas en flutter
Vamos a ver como se usan la listas en Flutter: crear , llenar, mostrar.....
El ejemplo a desarrollar es una lista sencilla de contactos basada en una lista estática
Código
Se definen las listas estáticas:''colores" y "nombres"la de colores simplemente para darle algún efecto visual al ejemplo y la lista de nombres de los contactos:
class AvatarPage extends StatelessWidget {
@override
List colores=[Colors.deepOrange[200],Colors.greenAccent[200],Colors.purpleAccent[200]];
final List<String> nombres= ['Dios Mio', 'Jesucristo', 'Espíritu Santo','Lili','Hector mi kukito'];
El juego comienza en el body; donde se crea un Widget ListView que llama a un método
_crearLista que crea los items,en particular me gusta dividir el código para poder entender
el arbor de Widget,
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Avatar page',),
actions: [
],
centerTitle: true,
),
//ejemplo lista de contactos
body: Container(
//color: Colors.greenAccent[200],
padding: EdgeInsets.all(10.0),
child: ListView(
children: _crearLista(),
),
) ,
);
}
Llenar la lista : consiste en iterar la lista estática nombres que tenemos y por cada nombre crear
un container que contendrá un item de la lista. el método _ItemLista se le pasa por parámetro
un nombre y un color, este container sera agregado a una lista de widget.
//Creando la lista estatica de Widget
List<Widget> _crearLista(){
int _i=0;
List<Widget> listaContactos=[];
for (var item in nombres) {
final widgetTemp=Container(
decoration: _estiloListTile(),
padding: EdgeInsets.all(0.0) ,
child: _itemLista(item,_i),
);
listaContactos.add(widgetTemp);
_i++;
if(_i>2){
_i=0;
}
}
return listaContactos;
}
Este segmento del código crea un ListTile , que continenel circulo de colorque se llama leading y el nombre del contacto.
//creando un item de la lista
ListTile _itemLista(String nombreContacto, int index){
return ListTile(
title: Text(nombreContacto),//aqui voy a poner los nombre
leading:CircleAvatar(
child:Icon(
Icons.accessibility,
color: Colors.white,
), ///aqui tienes que poner las fotos
backgroundColor: colores[index],
),
enabled: true,
onTap: (){
print('estoy haciendo click');
},
);
}
el código siguiente es para darle algo de estilo a los items de la lista.
BoxDecoration _estiloListTile(){
return BoxDecoration(
color: Colors.grey[100],
border: Border(
bottom: BorderSide(width: 1.0, color: Colors.grey.shade300,)
)
);
}
