Rellenar un ListView Manualmente en Flutter


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.

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.

El 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.

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.

Leave a comment