Flutter - Obtendo dados da Web e exibindo no ListView - II

Hoje veremos como podemos obter dados da internet e exibí-los em um ListView no Flutter.

Vamos continuar o artigo anterior mostrando como exibir os detalhes de  um elemento da lista quando ele for selecionado.

Exibindo os detalhes do usuário

Para poder exibir os detlhes vamos usar a função onTap() que é chamada quando um item do ListTile é tocado ou selecionado.

No código definido nesta função vamos usar o widget Navigator. que gerencia um conjunto de widgets filhos com uma disciplina de pilha.

Vamos navegar para uma outra tela que será representada por um StatelessWidget que vamos chamar de DetailsPage que vai exibir os detalhes do usuário. Para fazer isso temos que passar no construtor do Widget o usuário selecionado.

Assim ao tocar no item da lista temos que usar o método Navigator.push() que adiciona uma rota à pilha de rotas gerenciadas pelo Navigator. Para criar a rota vamos usar um MaterialPageRoute que faz transição para a nova rota usando uma animação especifica da plataforma.

Assim o código do método listaUsuarios() incluimos o código da função onTap() :

listaUsuarios() {
    return ListView.builder(
      itemCount : users.length,
      itemBuilder: (context, index) {
         return ListTile(
           leading: CircleAvatar(
             backgroundImage: NetworkImage(
              'http://www.macoratti.net/Imagens/contato1.png'),
            ),
           title: Text(users[index].name,
                        style: TextStyle(
                                fontSize: 20.0, 
                                color: Colors.black)),
           subtitle: Text(users[index].email), 
              onTap: () {
               Navigator.push(context, 
                     new MaterialPageRoute(
                       builder: (context) => DetailPage(users[index])));
           },
         );
      },
     );
  }
}

Assim estaremos navegando para uma nova rota ou tela representada pelo widget DetailPage() que esta recebendo o usuário selecionado.

Vamos criar no projeto o StatelessWidget usando o assistente do VS Code digitando st e selecionando a opção conforme mostra a figura a seguir:

No widget DetailPage vamos incluir o código abaixo:

class DetailPage extends StatelessWidget {
  final User user;
  DetailPage(this.user);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(user.name),
        ),
        body : userDetails()
    );
  }

  userDetails(){
    return Container(padding: new EdgeInsets.all(32.0),
            child: 
                ListTile(
                 title: Text(user.email,
                  style: TextStyle(fontWeight: FontWeight.w500)),
                 subtitle: Text("$user.username"),
                 leading: Icon(Icons.email,color: Colors.blue),
              ),
          );
    }
}

No código recebemos o usuer no construtor da classe DetailPage e usando um Scaffold no parâmetro body criamos o método userDetails().

No  método userDetails() estamos usando um Container que tem como filho um ListTile onde estamos exibindo as informações do usuário.

Executando o projeto iremos obter o resultado abaixo:

Temos assim nosso projeto exibindo os dados JSON no ListView e permitindo selecionar um item da lista e exibir seus detalhes.

Pegue o projeto dos arquivos aqui: main_detail_user.dart

"Porque o reino de Deus não é comida nem bebida, mas justiça, e paz, e alegria no Espírito Santo."
Romanos 14:17

Veja os Destaques e novidades do SUPER DVD Visual Basic (sempre atualizado) : clique e confira !

Quer migrar para o VB .NET ?

Quer aprender C# ??

Quer aprender os conceitos da Programação Orientada a objetos ?

Quer aprender o gerar relatórios com o ReportViewer no VS 2013 ?

Referências:

José Carlos Macoratti