0

soy nuevo en flutter y quise implementar una Api, Lo hice y ahora recibo una lista de elementos, aun no conozco todos los widget y todas las propiedades de ListView pero vi que para lo que necesito lo ideal seria el onTap pero no entiendo como implementarlo de forma correcta:

class HomeScreen extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: HomePage(),
      debugShowCheckedModeBanner: false,
      theme: ThemeData.light(),
    );
  }
}

class HomePage extends StatefulWidget{

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

class _HomePageState extends State<HomePage>{

  Map data;
  List pokemonData;
  String photoUrlDetails = 'https://pokeres.bastionbot.org/images/pokemon/';
  String photoUrlPixel = 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/';

  getPokemon() async {
   http.Response response = await http.get('https://pokeapi.co/api/v2/pokemon/');
    data = json.decode(response.body);

    setState(() {
      pokemonData = data["results"];
    });
  }

  @override
  void initState(){
    super.initState();
    getPokemon();
  }

  Widget build(BuildContext context){
    return Scaffold(
      appBar: AppBar(
        title: Text('Pokedex'),
        centerTitle: true,
        backgroundColor: Colors.red,
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: ListView.builder(
            itemCount: pokemonData == null ? 0 : pokemonData.length,
          itemBuilder: (BuildContext context, int index){
              return Card(
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Row(
                    children: <Widget>[
                      CircleAvatar(backgroundImage: NetworkImage(photoUrlPixel+"${index+1}.png"),
                      backgroundColor: Colors.transparent,),
                      Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Text("${pokemonData[index]["name"]}", style: TextStyle( fontSize: 20.0,                         fontWeight: FontWeight.w100),),
                      )
                    ],
                  ),
                ),
              );
          },
        ),
      ),
    );
  }
}
introducir la descripción de la imagen aquí

Mi duda es, como puedo aplicar la propiedad onTap al widget, y que seria necesario para desplegar una ventana emergente donde pueda mostrar información mas detallada del item que estoy seleccionando haciendo una nueva consulta a "/pokemon/{id}/":

Ventana emergente

Y por ultimo me gustaria saber cual es la mejor forma de paginar para que al hacer scroll se puedan ir cargando mas elementos, ya que me trae 20 items por consulta el endpoint.

1 respuesta 1

1

Para el onTap puedes usar el widget GestureDetector on InkWell , este último te da el efecto de splash al presionarlo, puedes usarlos de esta forma:

 return 

GestureDetector( // o InkWell
                onTap() {
                   _irAlDetalle(pokemonData[index]);
                }
                child: Card(
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Row(
                    children: <Widget>[
                      CircleAvatar(backgroundImage: NetworkImage(photoUrlPixel+"${index+1}.png"),
                      backgroundColor: Colors.transparent,),
                      Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Text("${pokemonData[index]["name"]}", style: TextStyle( fontSize: 20.0,                         fontWeight: FontWeight.w100),),
                      )
                    ],
                  ),
                ),
              ),);

Para mostrar el detalle simplemente creas una nueva ruta


void _irAlDetalle(dynamic pokemon){
  
    Navigator.of(context).push(MaterialPageRoute(
      builder: (_) => PokemonDetalle(pokemon);
    ));
}


Donde PokemonDetalle es un nuevo widget que debes crear que debe recibir un atributo pokemon.

Para el tema del paginado te recomiendo que veas un video que hicimos en el canal The Dart Side :)

https://www.youtube.com/watch?v=lxTulCxn0zM

1
  • 1
    Justo lo que necesitaba, pude agregar el onTap sin problemas, ahora solo necesito aprender a hacer la otra petición para obtener el detalle y mostrarlo en la otra ventana, el video que me mandaste ya me dio una idea, aun no lo implemento pero ya entendí la lógica que necesitaba. el 28 jun. 2020 a las 4:04

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.