Inicio » Cursos » Flutter App Copa América

Curso Flutter App Copa América

Lección: 7 ➜ Click en ListView Maestro Detalle

Como hacer un maestro detalle con un ListView en Flutter lanzando una segunda pantalla con toda la información de la Noticia.

Lección 7: Click en ListView Maestro Detalle

Implementación del evento Click en un ListView con Flutter, lanzando una segunda pantalla con todo el detalle de la Noticia, para obtener dicho objetivo debemos usar los siguientos widgets además de otros:

  • InkWell, evento ontap()
  • ListView simple

Veremos como pasar variables de un widget a otro mediante un array 

CÓDIGO DART CLICK EN UN LISTVIEW

 

return new InkWell(
                child: Card(
                  child: Column(
                    children: <Widget>[
                      Stack(
                        children: <Widget>[
                          Center( child: CircularProgressIndicator(),),
                          Center(
                              child: Image.network(
                                  "http://192.168.43.96/fixture/public/img/noticias/"+data[i]['urlfoto']
                              )
                          )
                        ],
                      ),
                      Text(data[i]['titulo'], style: TextStyle(fontSize: 20,), textAlign: TextAlign.center,),
                      Align(
                        alignment: Alignment.centerRight,
                        child: Text(data[i]['updated_at']),
                      )
                    ],
                  ),
                ),
                onTap: (){
                  //print(data[i]["titulo"]);
                  Navigator.push(context, new MaterialPageRoute(
                      builder: (BuildContext context) => new PaginaDetalle(data[i]))
                  );
                },
              );

 


2668 visitas

Más cursos que pueden interesarte

Más cursos

Codea Codea App

México, Colombia, España, Venezuela, Argentina, Bolivia, Perú

© Todos los derechos reservados Codea App | ...de frente al código!!! | 2020 - 2023