FLUTTER: RangeError (índice): Índice fuera de rango: no hay índices válidos: 0 (Pasar parámetros)

18 Jul, 2023 Programación 0

Espero que puedas ayudarme a encontrar una forma de resolver este problema que surge. Estoy tratando de pasar los datos de la lista y el índice a la pestaña siguiente.

Pero obtengo este error: RangeError (índice): Índice fuera de rango: no hay índices válidos: 0.

Aquí te dejo el código que estoy utilizando.

Entonces obtengo los datos y lleno la lista:

Future<list> getData() async {
  final response = await http.get(url);
  return json.decode(response.body);
}

body: FutureBuilder<list>(
  future: getData(),
  builder: (context, snapshot) {
    if (snapshot.hasError) print(snapshot.error);
    return snapshot.hasData
        ? ItemList(
            list: snapshot.data ?? [],
          )
        : new Center(
            child: CircularProgressIndicator(),
          );
  },
)

Y así trato de obtener el índice y la lista, donde me señala el error:

class ItemList extends StatelessWidget {
  const ItemList({Key? key, required this.list}) : super(key: key);
  final List list;

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: list.isEmpty ? 0 : list.length,
      itemBuilder: (context, i) {
        return Container(
          padding: const EdgeInsets.all(10.0),
          child: GestureDetector(
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => Detail(list: list, index: i), // <----error
                ),
              );
            },
          ),
        );
      },
    );
  }
}

Mi otra pestaña es así:

class Detail extends StatefulWidget {
  List list = [];
  int index = 0;
  Detail({index, list});

  @override
  _DetailState createState() => _DetailState();
}

Lo recupero de la siguiente manera:

widget.list[widget.index]['id']

JSON:

json [{"id":"1","nombre de usuario":"Victor","contraseña":"12345","nivel":"admin"}, {"id":"5","nombre de usuario":"sekia","contraseña":"12345","nivel":"cliente"}]

davy.ai

July 18, 2023 at 10:32 am

Para pasar datos desde un ListView a una página de detalle en Flutter, debes hacer lo siguiente:

Asegúrate de que tus datos de lista se estén obteniendo y mostrando correctamente en tu ListView.
Agrega un GestureDetector a cada elemento en tu widget ListView.builder que navegará a la página de detalle cuando se toque.
En la función onTap, utiliza el método Navigator.push para navegar a la página de detalle y pasar los datos requeridos como argumentos al constructor del widget de la página de detalle.
En el widget de la página de detalle, extrae los argumentos pasados utilizando el método ModalRoute.of(context).settings.arguments y utiliza los datos para mostrar los detalles del elemento seleccionado.

Aquí tienes un ejemplo de implementación de los pasos anteriores:

// Define un objeto de datos para representar cada elemento en la lista
class Item {
  final int id;
  final String name;
  final String description;

  Item({required this.id, required this.name, required this.description});
}

// Crea una lista de elementos para mostrar en el ListView
final List<item> itemList = [
  Item(id: 1, name: 'Item 1', description: 'Descripción del elemento 1'),
  Item(id: 2, name: 'Item 2', description: 'Descripción del elemento 2'),
  Item(id: 3, name: 'Item 3', description: 'Descripción del elemento 3'),
];

// Define el widget ListView
class ItemListView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Lista de elementos'),
      ),
      body: ListView.builder(
        itemCount: itemList.length,
        itemBuilder: (context, index) {
          final item = itemList[index];
          return GestureDetector(
            onTap: () {
              // Navega a la página de detalle y pasa los datos del elemento
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => ItemDetailPage(item: item),
                ),
              );
            },
            child: ListTile(
              title: Text(item.name),
              subtitle: Text(item.description),
            ),
          );
        },
      ),
    );
  }
}

// Define el widget de la página de detalle
class ItemDetailPage extends StatelessWidget {
  final Item item;

  ItemDetailPage({required this.item});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Detalle del elemento'),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text('ID: ${item.id}'),
          Text('Nombre: ${item.name}'),
          Text('Descripción: ${item.description}'),
        ],
      ),
    );
  }
}

En este ejemplo, el widget ItemListView muestra un widget ListView.builder que muestra una lista de widgets ListTile, uno para cada elemento en la lista itemList. Cuando un usuario toca un elemento, se llama a la función onTap, que utiliza el método Navigator.push para navegar al widget ItemDetailPage y pasar el objeto item seleccionado como argumento.

El widget ItemDetailPage recibe el argumento pasado y lo utiliza para mostrar los detalles del elemento seleccionado. En este ejemplo, simplemente muestra las cadenas id, name y description del objeto item pasado.

es.davy.ai

¿Tienes una pregunta?

FLUTTER: RangeError (índice): Índice fuera de rango: no hay índices válidos: 0 (Pasar parámetros)

Answer

davy.ai