El ListView en Flutter es un elemento que sirve para mostrar lista de cosas, puede ser texto o tambien otros widgets como imagenes, botones, etc.
Este articulo es parte de la Guia Maestra para crear aplicaciones en Flutter →
El elemento ListView sirve para mostrar elementos en forma de lista, en este caso para el ejemplo vamos a en listar elementos tipo ListTile que es un clasico de todas las lista, es decir elementos de lista comunes y corriente.
En flutter l elemento ListView tiene un parametro “children” donde todos sus elementos hijos van dentro separados por coman.
Este es el ejemplo.
ListView(
children: <Widget>[
ListTile(leading: Text("Argentina"), title: Text("Principal"), subtitle: Text("Este es un subtitulo"),),
ListTile(leading: Text("Chile")),
ListTile(leading: Text("Colombia")),
ListTile(leading: Text("Mexico")),
ListTile(leading: Text("Paraguay")),
ListTile(leading: Text("Venezuela")),
],
);Como podemos ver todos los elementos ListTile tiene el parametro “leading” que es el texto destacado, tambien tiene un parametro “title” que es un titulo y un parametro “subtitle” que es un subtitulo que se muestra mas pequeño.
De esta manera se puede construir una lista de elementos manualmente e ir agregando elementos segun sea necesario.
Propósito: Crear filas de lista estandarizadas con soporte nativo para gestos.
Parámetros clave:
leading: Widget posicionado al inicio (Icono/Imagen).title: Widget de texto principal.subtitle: Widget de texto secundario (inferior).trailing: (Opcional) Widget posicionado al final, ideal para flechas de navegación o checkboxes.
Ventaja: Proporciona automáticamente el padding y la alineación recomendada por Material Design.
Codigo
A continuacion el codigo completo.
import 'package:flutter/material.dart';
void main() {
runApp(const MainApp());
}
class MainApp extends StatelessWidget {
const MainApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: Scaffold(
body: HelloList(),
),
);
}
}
class HelloList extends StatelessWidget {
const HelloList({super.key});
@override
Widget build(BuildContext context) {
return ListView(
children: <Widget>[
ListTile(leading: Text("Argentina"), title: Text("Principal"), subtitle: Text("Este es un subtitulo"),),
ListTile(leading: Text("Belize")),
ListTile(leading: Text("Brasil")),
ListTile(leading: Text("Costa Rica")),
ListTile(leading: Text("Chile")),
ListTile(leading: Text("Colombia")),
ListTile(leading: Text("Guatemala")),
ListTile(leading: Text("Mexico")),
ListTile(leading: Text("Panama")),
ListTile(leading: Text("Paraguay")),
ListTile(leading: Text("Peru")),
ListTile(leading: Text("Venezuela")),
],
);
}
}Resultado
El resultado es el siguiente.
