Spanish (Español) translation by Xiomara Reynoso (you can also view the original English article)
Una lista es la clave de los elementos de UI para aplicaciones móviles. Aprenderás cómo crear una lista en una aplicación de Flutter con este tutorial.
No necesitas ser un experto para crear listas en la aplicación de Flutter. Si en el pasado has desarrollado aplicaciones para Android o iOS, Flutter ListView será como pan comido. Y si solamente estás comenzando con el desarrollo de Flutter, solamente sigue y verás lo fácil que puede llegar a ser.
En este tutorial, se mostrarán unos ejemplos de algunos patrones ListView comunes en Flutter. Puedes fácilmente reusar estos para tu magnifica aplicación.
Ejemplos de Flutters ListView
Ahora comencemos un proyecto utilizando el estudio de Android con flutter 1.0 y lo llamaremos Flutter_view.
Entonces, ten en cuenta que este código aquí funciona como una cabecera para todos los fragmentos de códigos de ListsViews que se mencionarán a continuación de la misma.
1 |
import 'package:Flutter/material.dart'; |
2 |
|
3 |
void main() => runApp(MyApp()); |
4 |
|
5 |
class MyApp extends StatelessWidget {
|
6 |
@override |
7 |
Widget build(BuildContext context) {
|
8 |
return MaterialApp( |
9 |
debugShowCheckedModeBanner: false, |
10 |
title: 'ListViews', |
11 |
theme: ThemeData( |
12 |
primarySwatch: Colors.teal, |
13 |
), |
14 |
home: Scaffold( |
15 |
appBar: AppBar(title: Text('ListViews')),
|
16 |
body: BodyLayout(), |
17 |
), |
18 |
); |
19 |
} |
20 |
} |
21 |
|
22 |
class BodyLayout extends StatelessWidget {
|
23 |
@override |
24 |
Widget build(BuildContext context) {
|
25 |
return _myListView(context); |
26 |
} |
27 |
} |
Esencialmente, hay algunos tipos de ListeView que pueden ser usados como un proyecto de Flutter. La elección depende las listas estéticas y la interfaz de usuario de la aplicación. A menudo se les pide a los desarrolladores que encuentren un balance entre la creatividad y practicidad para el menú de barras y las listas de opciones de la aplicación.
Veamos la diferencia de tipos de listas que puedes tener en la aplicación de Flutter.
Lista Estática
Cuando tienes opciones limitadas, puedes usar listas estáticas predeterminadas encontrarás en el constructor ListView de Flutter. Las listas estáticas son ideales para crear una pagina de menú.
Aquí hay un fragmento de código que puedes utilizar:
1 |
Widget _myListView(BuildContext context) {
|
2 |
return ListView( |
3 |
children: <Widget>[ |
4 |
ListTile( |
5 |
title: Text('Black'),
|
6 |
), |
7 |
ListTile( |
8 |
title: Text('White'),
|
9 |
), |
10 |
ListTile( |
11 |
title: Text('Grey'),
|
12 |
), |
13 |
], |
14 |
); |
15 |
} |
Y aquí está como se debería de ver:
.png)
.png)
.png)
Esta lista de colores solo incluye los títulos, pero los puedes personalizar los ListTitle con subtítulos, imágenes, e incluso iconos.
Lista Dinámica
Cuando creas una lista estática, todos los elementos son creados al mismo tiempo. Listas cortas se beneficia de esta técnica. Sin embargo, cuando ofreces una lista larga de opciones como escoger un país para un envió internacional, entonces necesitas el constructor ListView.builder() para crear una lista dinámica.
Reemplaza tu aplicación con este código myListView()
1 |
Widget _myListView(BuildContext context) {
|
2 |
|
3 |
// backing data |
4 |
final europeanCountries = ['Albania', 'Andorra', 'Armenia', 'Austria', |
5 |
'Azerbaijan', 'Belarus', 'Belgium', 'Bosnia and Herzegovina', 'Bulgaria', |
6 |
'Croatia', 'Cyprus’]; |
7 |
|
8 |
return ListView.builder( |
9 |
itemCount: europeanCountries.length, |
10 |
itemBuilder: (context, index) {
|
11 |
return ListTile( |
12 |
title: Text(europeanCountries[index]), |
13 |
); |
14 |
}, |
15 |
); |
16 |
|
17 |
} |
Su aplicación ahora ofrecerá una lista como esta:
.png)
.png)
.png)
Cuando pongas un itemCount en el código, entonces la ListView constructora en Flutter prepara un especifico numero de opciones al mismo tiempo. El itemBuilder se puede usar también para ver cada una de las ListTitle individualmente. El uso de un index hace más fácil la extracción de datos de la lista de los nombres de los países Europeos que han sido usados como el respaldo de información.
Listas Infinitas
Muchas aplicaciones requieren listas infinitas, esto ha sido siempre un desafío para Android y iOS en el pasado. Sin embargo con Flutter, puedes simplemente alterar el parámetro de itemCount y cambiar la ListTitle para mostrar el índice de la file así:
.png)
.png)
.png)
Aquí está el fragmento del código:
1 |
Widget _myListView(BuildContext context) {
|
2 |
return ListView.builder( |
3 |
itemBuilder: (context, index) {
|
4 |
return ListTile( |
5 |
title: Text('row $index'),
|
6 |
); |
7 |
}, |
8 |
); |
9 |
} |
Este código solo genera dinámicamente cada una de las ListTitle cuando es necesario, entonces la vista previa puede tener todas las filas que necesites. La ListView inteligentemente decidirá cuando generar cada título para que este esté disponible cuando esa parte de la lista esté visible.
Si quieres llevarlo un paso más allá entonces puedes agregar divisores en la lista dinámica para que la aplicación esté visiblemente más organizada. Aquí está como puedes hacerlo.
1 |
Widget _myListView(BuildContext context) {
|
2 |
return ListView.separated( |
3 |
itemCount: 1000, |
4 |
itemBuilder: (context, index) {
|
5 |
return ListTile( |
6 |
title: Text('row $index'),
|
7 |
); |
8 |
}, |
9 |
separatorBuilder: (context, index) {
|
10 |
return Divider(); |
11 |
}, |
12 |
); |
13 |
} |
Y aquí está como la lista se ve con los divisores.
.png)
.png)
.png)
La altura y los colores de estos divisores puede ser cambiada con argumentos en el constructor Divider().
Listas Horizontales
Mientras todas las listas previas han estado en el eje y, ¡puedes fácilmente crear una lista horizontal en Flutter! Una simple especificación en el scrollDirection puede ser usada en un diseño personalizado para acomodar una lista horizontal.
Aquí está como lo puedes hacer.
1 |
Widget _myListView(BuildContext context) {
|
2 |
return ListView.builder( |
3 |
scrollDirection: Axis.horizontal, |
4 |
itemBuilder: (context, index) {
|
5 |
return Container( |
6 |
margin: const EdgeInsets.symmetric(horizontal: 1.0), |
7 |
color: Colors.black26, |
8 |
child: Text('$index'),
|
9 |
); |
10 |
}, |
11 |
); |
12 |
} |
Y aquí está como la lista se ve desde un eje horizontal:
.png)
.png)
.png)
ListTitle personalizado
Ahora que hemos cubierto los tipos más comunes de ListViews, es tiempo de aumentar la estética de la aplicación. Flutter asegura que tu aplicación móvil se va a ver fácil y ofrece una extensa variedad de widgets para acomodarse a las necesidades del desarrollador.
La ListTitle widget es usada para manejar el contenido normal mostrado en las listas. Esto funciona cuando no hay personalizaciones implicadas en el diseño.
Cuando creamos la primera lista de colores, solo usamos ListView. Ahora nosotros podemos introducir detalles como imágenes, subtítulos, e incluso iconos.
Sigue lo siguiente:
1 |
Widget _myListView(BuildContext context) {
|
2 |
return ListView( |
3 |
children: <Widget>[ |
4 |
ListTile( |
5 |
leading: Icon(Icons.wb_sunny), |
6 |
title: Text('Sun'),
|
7 |
), |
8 |
ListTile( |
9 |
leading: Icon(Icons.brightness_3), |
10 |
title: Text('Moon'),
|
11 |
), |
12 |
ListTile( |
13 |
leading: Icon(Icons.star), |
14 |
title: Text('Star'),
|
15 |
), |
16 |
], |
17 |
); |
18 |
} |
Con este código se va a ver así:
.png)
.png)
.png)
Mientras la habilidad-táctil de la lista puede ser alternado con onTap, nosotros personalizaremos la lista un poco más allá. Si quieres agregar imágenes en vez de iconos para personalizar la aplicación, entonces el widget recomendado es CircleAvatar.
1 |
Widget _myListView(BuildContext context) {
|
2 |
return ListView( |
3 |
children: <Widget>[ |
4 |
ListTile( |
5 |
leading: CircleAvatar( |
6 |
backgroundImage: AssetImage('assets/sun.jpg'),
|
7 |
), |
8 |
title: Text('Sun'),
|
9 |
), |
10 |
ListTile( |
11 |
leading: CircleAvatar( |
12 |
backgroundImage: AssetImage('assets/moon.jpg'),
|
13 |
), |
14 |
title: Text('Moon'),
|
15 |
), |
16 |
ListTile( |
17 |
leading: CircleAvatar( |
18 |
backgroundImage: AssetImage('assets/stars.jpg'),
|
19 |
), |
20 |
title: Text('Star'),
|
21 |
), |
22 |
], |
23 |
); |
24 |
} |
.png)
.png)
.png)
Puede ser alternada con NetworkImage (imageUrl) y dejar el AssetImage (path) pero recuerda, cuando necesites que las imágenes se contengan por sí mismas, lo último es la mejor opción.
Registra la ubicación de los activos en pubspec.yaml:
1 |
Flutter: |
2 |
assets: |
3 |
- assets/ |
Reinicia la aplicación y estará listo!
Listas de Flutter y Fuentes de Datos
Finalicemos con algo interesante: ¿sabías que Flutter te permite crear una fuente de datos con varios tipos de artículos y también facilita la conversión de esa fuente de datos a una larga lista de widgets?
Entonces, puedes usar la lista de Flutter para mostrar un encabezado con una lista de opciones o expandir sobre las especificaciones de los detalles de los productos, ¿encabezado por encabezado?
Primero echemos un vistazo a la lista completada:
.png)
.png)
.png)
Y aquí está el código que generó esa lista:
1 |
import 'package:flutter/material.dart'; |
2 |
|
3 |
void main() {
|
4 |
runApp(MyApp( |
5 |
items: List<ListItem>.generate( |
6 |
1000, |
7 |
(i) => i % 6 == 0 |
8 |
? HeadingItem("Heading $i")
|
9 |
: MessageItem("Sender $i", "Message body $i"),
|
10 |
), |
11 |
)); |
12 |
} |
13 |
|
14 |
class MyApp extends StatelessWidget {
|
15 |
final List<ListItem> items; |
16 |
|
17 |
MyApp({Key key, @required this.items}) : super(key: key);
|
18 |
|
19 |
@override |
20 |
Widget build(BuildContext context) {
|
21 |
final title = 'Mixed List'; |
22 |
|
23 |
return MaterialApp( |
24 |
title: title, |
25 |
home: Scaffold( |
26 |
appBar: AppBar( |
27 |
title: Text(title), |
28 |
), |
29 |
body: ListView.builder( |
30 |
// Let the ListView know how many items it needs to build. |
31 |
itemCount: items.length, |
32 |
// Provide a builder function. This is where the magic happens. |
33 |
// Convert each item into a widget based on the type of item it is. |
34 |
itemBuilder: (context, index) {
|
35 |
final item = items[index]; |
36 |
|
37 |
return ListTile( |
38 |
title: item.buildTitle(context), |
39 |
subtitle: item.buildSubtitle(context), |
40 |
); |
41 |
}, |
42 |
), |
43 |
), |
44 |
); |
45 |
} |
46 |
} |
47 |
|
48 |
/// The base class for the different types of items the list can contain. |
49 |
abstract class ListItem {
|
50 |
/// The title line to show in a list item. |
51 |
Widget buildTitle(BuildContext context); |
52 |
|
53 |
/// The subtitle line, if any, to show in a list item. |
54 |
Widget buildSubtitle(BuildContext context); |
55 |
} |
56 |
|
57 |
/// A ListItem that contains data to display a heading. |
58 |
class HeadingItem implements ListItem {
|
59 |
final String heading; |
60 |
|
61 |
HeadingItem(this.heading); |
62 |
|
63 |
Widget buildTitle(BuildContext context) {
|
64 |
return Text( |
65 |
heading, |
66 |
style: Theme.of(context).textTheme.headline5, |
67 |
); |
68 |
} |
69 |
|
70 |
Widget buildSubtitle(BuildContext context) => null; |
71 |
} |
72 |
|
73 |
/// A ListItem that contains data to display a message. |
74 |
class MessageItem implements ListItem {
|
75 |
final String sender; |
76 |
final String body; |
77 |
|
78 |
MessageItem(this.sender, this.body); |
79 |
|
80 |
Widget buildTitle(BuildContext context) => Text(sender); |
81 |
|
82 |
Widget buildSubtitle(BuildContext context) => Text(body); |
83 |
} |
El código para este ejemplo es un poco más complicado que los demás y no voy a explicar los detalles. Pero siéntete libre de jugar con el código y ve si puedes hacerlo funcionar en el modo que quieras para tu aplicación! Este elemento te ofrece una gran manera de mantener una enorme cantidad de contenido en tu organizada aplicación.
Pensamientos Finales
Con ListViews puedes agregar subtítulos y cartas para mejorar la estética e incluso optar por ideas maximalistas para tu aplicación también. Sin embargo, yo te sugiero mantener tu diseño al mínimo ya que esa es la tendencia de diseño para el año.
Pero ¡la decisión es tuya!
Yo espero que esto te haya ayudado a entender lo básico de las listas y un poco de la personalización. Al final, todo depende de cuán creativo quieras ser, porque las posibilidades que ofrece Flutter son ilimitadas.
By
