Flutter - Exibindo Imagens

Hoje veremos como podemos exibir imagens locais e remotas no Flutter.

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

Flutter - Exibindo Imagens

Os aplicativos Flutter podem incluir código e ativos (às vezes chamados de recursos). Um ativo é um arquivo que é empacotado e implantado com seu aplicativo e está acessível no tempo de execução. Tipos comuns de ativos incluem dados estáticos (por exemplo, arquivos JSON), arquivos de configuração, ícones e imagens.

Assim a exibição de imagens é fundamental para a maioria dos aplicativos móveis e o Flutter fornece o Widget Image para exibir diferentes tipos de imagens.

Usamos o widget Image para exibir imagens, sendo que os formatos suportados são JPEG, PNG, GIF, GIF animado, WebP, WebP Animado, BMP e WBMP, e, podemos exibir imagens locais e imagens remotas, obtidas a partir de uma url.

Dessa forma o widget Image nos permite exibir uma imagem dentro de nossa interface de usuário através de vários meios diferentes. A seguir temos os construtores usados para exibir imagens:

Além destes construtores existem outras propriedades que podemos usar para alterar a aparência da imagem. Dentre elas destacamos:

Para mais detalhes de parâmetros, propriedades e construtores veja a documentação oficial neste link: https://docs.flutter.io/flutter/widgets/Image-class.html

A seguir vejamos como exibir imagens na prática.

Exibindo imagens locais

Vamos começar exibindo imagens locais.

Para isso podemos usar o construtor Image.asset para exibir a imagem, que cria um widget que exibe um ImageStream obtido do pacote de ativos/recursos.

Crie um novo projeto Flutter no VS Code chamado flutter_imagem.

O primeiro passo é criar uma nova pasta dentro da raiz do projeto flutter chamada imagens.(Você pode dar o nome que desejar)

A seguir dentro desta pasta adicione a imagem que deseja exibir. No exemplo eu vou exibir a imagem logomac.png.

A seguir temos que atualizar o arquivo pubspec.yaml do projeto Flutter definindo uma seção assets e indicar o caminho da imagem:

Nota: O formato yaml é um formato de serialização (codificação de dados) de dados legíveis por humanos inspirado em linguagens como XML, C, Python, Perl.

Nesta configuração estamos dizendo ao Flutter que estamos usando uma imagem estática localizada na pasta imagens com o nome logomac.png.

Agora vamos definir o código no arquivo main.dart conforme abaixo:

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Exibindo imagem local')),
         body: Column(
            children: <Widget>[
              Image.asset(
                'imagens/logomac.png',
              ),
              Text('Macoratti.net')
            ],
          ),
      ),
    );
  }
}

Neste código estamos usando seis widgets :

Executando o projeto pressionando F5 (ou flutter run -d all no terminal de comandos) iremos obter o resultado abaixo:

Podemos também usar o parâmetro fit e definir a enumeração BoxFit definindo um valor. Exemplo:

 body: Column(
            children: <Widget>[
              Image.asset(
                'imagens/logomac.png',
                 fit: BoxFit.fill
              ),
              Text('Macoratti.net')
            ],

Exibindo imagens remotas

Exibir imagens remotas no Flutter é muito simples. Basta usar o construtor Image.newtork.

Exemplo:  Image.network('https://picsum.photos/250?image=9',)

O construtor padrão Image.network não manipula funcionalidades mais avançadas, como o fading de imagens após o carregamento ou o armazenamento em cache de imagens no dispositivo após o download.

Como exemplo vou exibir uma imagem remota localizada em :  https://picsum.photos/250?image=9

No arquivo main.dart inclua o código abaixo:

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var title = 'Imagens Remotas(web)';
    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: Image.network(
          'https://picsum.photos/250?image=9',
        ),
      ),
    );
  }
}

Executando o projeto iremos obter o resultado a seguir:

Aqui também podemos também usar o parâmetro fit e definir a enumeração BoxFit definindo um valor. Exemplo:

 body: Image.network(
          'https://picsum.photos/250?image=9',
           fit : BoxFit.cover
        ),

Vimos assim uma introdução básica sobre como exibir imagens locais e imagens remotas no Flutter.

Veja a víde aula sobre o widget Image : Flutter - Apresentando o widge Image

Aguarde mais artigos sobre o assunto em breve.

"E não temais os que matam o corpo e não podem matar a alma; temei antes aquele que pode fazer perecer no inferno a alma e o corpo."
Mateus 10:28

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