Flutter - Imagens com ListView e Stack

Neste artigo veremos como exibir imagens em um ListView usando o widget Stack.

O Flutter é um SDK de aplicativo móvel do Google que ajuda a criar aplicativos móveis modernos para iOS e Android usando uma única (quase) base de código.

Se você não conhece o Flutter veja o meu artigo :  Flutter - Primeiros contatos e impressões

Exibindo Imagens no ListView

Eu já apresentei os widgets ListView e GridView nestes artigos:

Hoje veremos como exibir imagens de passários em uma lista rolável e para isso vamos usar o ListView.

Queremos exibir as imagens de alguns passáros e seus nomes e para isso vamos usar o widget Stack.

Criando o projeto Flutter

No Visual Studio Code tecle CTRL+ SHIFT+P para abrir a paleta de comandos e a seguir selecione a opção : Fluter:New Project;

A seguir informe o nome do projeto : flutter_circleimage e tecle ENTER;

Na janela de diálogo a seguir selecione a pasta onde o projeto vai ser salvo e clique em :
Select a folder to create the project in;

O Flutter vai criar um projeto padrão onde todo o código da aplicação vai estar no arquivo main.dart dentro da pasta lib do projeto.

Vamos selecionar o arquivo main.dart e apagar todo o código gerado deixando o arquivo vazio.

A seguir inclua o código abaixo no arquivo main.dart para criar o leiaute padrão usando os Widgets MaterialApp e Scaffold :

import 'package:flutter/material.dart';
import 'Passaro.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  build(context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Pássaros',
      home: Home()
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(  appBar: AppBar(
        title: Text("Pássaros"),
      ),
      body: _body()
   );
  }
  _body() {  
   }
}

Vamos definir o código do projeto no método Body().

Como vamos exibir imagens locais de alguns pássaros, vamos criar a pasta Imagens no projeto e copiar algumas imagens para esta pasta. A seguir vamos definir no arquivo pubspec.yaml o local usado para exibir as imagens:

...
 assets
   - imagens
..

Vamos criar a gora a classe Passaro no arquivo passaro.dart na pasta lib:

class Passaro {
  String nome;
  String imagem;
  Passaro(String nome, String imagem)
  {
    this.nome = nome;
    this.imagem = imagem;
  }
}

Nesta classe definimos apenas o nome e a imagem do pássaro.

Agora temos que importar o arquivo passaro.dart no arquivo main.dart.

import 'passaro.dart'

Agora vamos incluir no método _body() o código que vai criar objetos do tipo Passaro e exibir suas imagens no ListView:

  _body() {
     List<Passaro> passaros = [
      Passaro("Anu","imagens/anu.jpg"),
      Passaro("Pardal","imagens/pardal.jpg"),
      Passaro("Canário","imagens/canario.jpg"),
      Passaro("Bem-Te-Vi","imagens/bem-te-vi.jpg"),
      Passaro("Beija-Flor","imagens/beija-flor.jpg")
     ];
     return ListView.builder(
      itemCount: passaros.length,
      itemExtent: 300,
      itemBuilder: (BuildContext context, int index) {  
        Passaro passaro = passaros[index];
        return _imagem(passaro.imagem);
      },
    );
   }
   _imagem(String img){
     return Image.asset(
       img,
       fit: BoxFit.cover,
      );
   }

Neste código estamos exibindo as imagens no ListView usando o construtor builder e a propriedade itemExtent que força as imagens a ter um tamanho no valor definido na direção da rolagem (no nosso exemplo verticalmente).

Definimos também o método _imagem(String img) que retorna a imagem usando a configuração BoxFit.Cover.

Agora queremos exibir o nome do pássaro ao lado da imagem e para isso vamos usar o widget Stack alterando o código conforme abaixo:

 _body() {
     List<Passaro> passaros = [
      Passaro("Anu","imagens/anu.jpg"),
      Passaro("Pardal","imagens/pardal.jpg"),
      Passaro("Canário","imagens/canario.jpg"),
      Passaro("Bem-Te-Vi","imagens/bem-te-vi.jpg"),
      Passaro("Beija-Flor","imagens/beija-flor.jpg")
     ];
     return ListView.builder(
      itemCount: passaros.length,
      itemExtent: 250,
      itemBuilder: (BuildContext context, int index) {
        return _itemView(passaros, index);
      },
    );
   }
   _itemView(List<Passaro> passaros, int index) {
     Passaro passaro = passaros[index];    
    return Stack(
      fit: StackFit.expand,
      children: <Widget>[
        _imagem(passaro.imagem),
        Align(
          alignment: Alignment.bottomRight,
          child: Container(
            margin: EdgeInsets.all(10),
            padding: EdgeInsets.all(10),
            decoration: BoxDecoration(
                color: Colors.red,
                borderRadius: BorderRadius.circular(20)
            ),
            child: Text(
              passaro.nome,
              style: TextStyle(fontSize: 30, color: Colors.white),
            ),
          ),
        ),
      ],
    );
  }
   _imagem(String img){
     return Image.asset(
       img,
       fit: BoxFit.cover,
      );
   }

Criamos o método _itemView(passaros, index);  onde estamos retornando um Stack contendo a imagem e na imagem temos como filho o widget Container que usa um BoxDecoration para exibir o nome do passáro alinhado no fundo à direita.

Pegue o projeto dos arquivos aqui: main_passaros.dart

Ninguém jamais viu a Deus; o Deus unigênito (Jesus), que está no seio do Pai, é quem o revelou.
João 1:17,18

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