Flutter - Criando uma imagem circular - II

Neste artigo veremos como criar uma imagem circular no Flutter.

Continuando a primeira parte do artigo vamos mostrar como obter imagens.

Criando uma imagem Circular

No arquivo arquivo main.dart 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';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Imagens Circulares',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: CircleImage(),
    );
  }
}

class CircleImage extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
           title: Text("Imagens Circulares"),
       ),
       body: circleImage()
    );
   }

  circleImage() {

  }
}

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

Neste método vamos incluir o código abaixo:

circleImage() {
    return Center(
      child : new Container(
      width: 190.0,
      height: 190.0,
      decoration: BoxDecoration(
          shape: BoxShape.circle,
          image: DecorationImage(
          fit: BoxFit.fill,
          image: NetworkImage(
                 "http://www.macoratti.net/Imagens/pessoas/mac.jpg")
            )
        ),
     ),
   );
  }

Neste métodos estamos centralizando um Container com largura e altura de 190.0 e usando a classe BoxDecoration que desenha uma caixa circular usando a propriedade shape definida como BoxShap.circle.

A classe BoxDecoration fornece uma variedade de maneiras de desenhar uma caixa.A caixa tem uma borda, um body e pode definir uma boxShadow.

A forma da caixa pode ser um círculo ou um retângulo. Se for um retângulo, a propriedade borderRadius controlará a redondeza dos cantos.  O corpo da caixa é pintado em camadas. A camada mais inferior é a cor, que preenche a caixa. Acima disso, está o gradiente, que também preenche a caixa.

 Finalmente, existe a imagem, cujo alinhamento preciso é controlado pela classe DecorationImage. Na classe DecorationImage exibimos uma imagem remota da url - http://www.macoratti.net/Imagens/pessoas/mac.jpg e ajustando a imagem.

Executando o projeto iremos obter o resultado abaixo:

Pegue o projeto dos arquivos aqui: main_circle_image.dart

"Porque onde há inveja e espírito faccioso aí há perturbação e toda a obra perversa.
Mas a sabedoria que do alto vem é, primeiramente pura, depois pacífica, moderada, tratável, cheia de misericórdia e de bons frutos, sem parcialidade, e sem hipocrisia."
Tiago 3:16,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