0

Al presionar el icono de siguiente, como puedo hacer que tome los valores del siguiente de la lista, es decir como cambiar los valores de los Text y Image.network.

introducir la descripción de la imagen aquí

este es mi codigo:

import 'package:flutter/material.dart';

class AnimalesPage extends StatefulWidget {
  @override
  State createState() => AnimalesPageState();
}

class Animal {
  String ID;
  String nombre;
  String imagen;
  String cantidad;

  Animal(this.ID, this.nombre, this.imagen, this.cantidad);
}

class AnimalesPageState extends State<AnimalesPage> {
  final globalKey = new GlobalKey<ScaffoldState>();
  int _cIndex = 0;

  void _incrementTab(index) {
    setState(() {
      _cIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    final lista = [];
    lista.add(new Animal(
        "1",
        "Oso",
        "https://pbs.twimg.com/profile_images/573534886063030272/gqv3XyAZ_400x400.jpeg",
        "10"));
    lista.add(new Animal(
        "2",
        "Perro",
        "https://pbs.twimg.com/profile_images/670027373090353153/gCBT8qLC_400x400.png",
        "20"));
    lista.add(new Animal(
        "3",
        "Puerco",
        "https://kisseskinah.files.wordpress.com/2015/06/img_57151.png?w=680",
        "30"));

    return Scaffold(
      key: globalKey,
      body: Center(
        child: Row(
          children: <Widget>[
            _buildPrevButton(),
            Column(
              children: <Widget>[
                SizedBox(
                  height: 160.0,
                ),
                Padding(
                  padding: const EdgeInsets.only(
                    top: 16.0,
                  ),
                  child: Image.network(
                    lista[0].imagen,
                    width: 100.0,
                  ),
                ),
                Text(
                  lista[0].nombre,
                  style: TextStyle(fontSize: 25.0),
                ),
                Text(
                  lista[0].cantidad,
                  style: TextStyle(fontSize: 25.0),
                ),
              ],
            ),
            _buildNextButton(),
          ],
        ),
      ),
    );
  }

  Widget _buildNextButton() {
    return new Padding(
      padding: EdgeInsets.only(right: 35.0),
      child: IconButton(
        onPressed: () {
          print("Next");
        },
        icon: new Icon(
          Icons.navigate_next,
          size: 40.0,
        ),
        color: Colors.grey,
      ),
    );
  }

  Widget _buildPrevButton() {
    return new Padding(
      padding: EdgeInsets.only(left: 35.0),
      child: Icon(
        Icons.navigate_before,
        color: Colors.grey,
        size: 40.0,
      ),
    );
  }
}

1 respuesta 1

1

Ya que estás en un StatefulWidget, solo tienes que refrescar el index y usarlo, ahora solo estás usando directamente el índice 0.

También moví tu array de animales al método initState, para que la variable se pueda acceder en tus otros métodos y no solo en el build.

class AnimalesPageState extends State<AnimalesPage> {
  final globalKey = new GlobalKey<ScaffoldState>();
  int _cIndex = 0;

  void _incrementTab(index) {
    setState(() {
      _cIndex = index;
    });
  }

  final List<Animal> lista = [];

  @override
  void initState() {
    lista.add(new Animal(
        "1",
        "Oso",
        "https://pbs.twimg.com/profile_images/573534886063030272/gqv3XyAZ_400x400.jpeg",
        "10"));
    lista.add(new Animal(
        "2",
        "Perro",
        "https://pbs.twimg.com/profile_images/670027373090353153/gCBT8qLC_400x400.png",
        "20"));
    lista.add(new Animal(
        "3",
        "Puerco",
        "https://kisseskinah.files.wordpress.com/2015/06/img_57151.png?w=680",
        "30"));
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: globalKey,
      body: Center(
        child: Row(
          children: <Widget>[
            _buildPrevButton(),
            Column(
              children: <Widget>[
                SizedBox(
                  height: 160.0,
                ),
                Padding(
                  padding: const EdgeInsets.only(
                    top: 16.0,
                  ),
                  child: Image.network(
                    lista[_cIndex].imagen,
                    width: 100.0,
                  ),
                ),
                Text(
                  lista[_cIndex].nombre,
                  style: TextStyle(fontSize: 25.0),
                ),
                Text(
                  lista[_cIndex].cantidad,
                  style: TextStyle(fontSize: 25.0),
                ),
              ],
            ),
            _buildNextButton(),
          ],
        ),
      ),
    );
  }

  Widget _buildNextButton() {
    return new Padding(
      padding: EdgeInsets.only(right: 35.0),
      child: IconButton(
        onPressed: () {
          print("Next");
          setState(() {
            if (_cIndex < lista.length - 1) _cIndex++;
          });
        },
        icon: Icon(
          Icons.navigate_next,
          size: 40.0,
        ),
        color: Colors.grey,
      ),
    );
  }

  Widget _buildPrevButton() {
    return new Padding(
      padding: EdgeInsets.only(left: 35.0),
      child: IconButton(
        onPressed: () {
          setState(() {
            if (_cIndex > 0) _cIndex--;
          });
        },
        icon: Icon(
          Icons.navigate_before,
          color: Colors.grey,
          size: 40.0,
        ),
      ),
    );
  }
}

2
  • genial bro, gracias. Hasta el previus lo hiciste :) esque soy un animal para programar jajaja. Saludos
    – Wilmer
    el 6 feb. 2020 a las 19:55
  • jaja nada que ver, poco a poco, no dejes de practicar, te dejo el canal de youtube que tengo con un amigo sobre Flutter: youtube.com/c/TheDartSide el 6 feb. 2020 a las 19:56

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.