Flutter - Apresentando o Widget Card

No artigo de hoje vamos apresentar o widget Card do material design.

O que é o 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

Apresentando o widget Card

O Widget Card é um widget do Material Design e possui cantos ligeiramente arredondados e uma sombra. Geralmente este widget é usado para representar informações relacionados.

Vamos vê-lo em ação com um exemplo prático.

Crie um novo projeto Flutter no VS Code e no arquivo main.dart na pasta lib vamos iniciar definindo o código padrão usando o MaterialApp onde estamos desabilitando a label de Debug e definindo o Widget MyApp() no parâmetro home que é a porta de entrada da aplicação:

import 'package:flutter/material.dart';
void main(){
  runApp(  MaterialApp(
    debugShowCheckedModeBanner: false,
    home:   MyApp(),
  ));
}

A seguir vamos criar o StatefulWidget MyApp() onde usamos o Scaffold definindo a AppBar, o título centralizado, a cor de fundo vermelha e em body definimos o método _body retornando um Container, mas a seguir vamos criar um Card:

Nota: Aqui também poderíamos ter criado um StatelessWidget.

class MyApp extends StatefulWidget {
  @override
  _State createState() =>   _State();
}
class _State extends State<MyApp>{
  @override
  Widget build(BuildContext context) {
    return   Scaffold(
      appBar:   AppBar(
        title:   Text('Card - Exemplo'),
        centerTitle :  true,
        backgroundColor: Colors.red,
      ),
      body: _body(),
    );

    _body() {
        return Container();
     }

  }

A seguir no método _body vamos definir um Container com preenchimento de 10 espaços em todos os lados, e, definir um Widget Column centralizado como filho.

A seguir vamos criar um Card bem simples que tem como filho um Container com preenchimento de 10 espaços e como filho um Widget Column onde temos dois widgets Text:

_body(){
    return Container(
      padding: EdgeInsets.all(10.0),
      child: Center(
        child: Column(
          children: <Widget>[
              Card(
              child: Container(
                padding: EdgeInsets.all(20.0),
                child: Column(
                  children: <Widget>[
                      Text('Macoratti .net'),
                      Text('Quase tudo para .NET')
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
     );
  }

Temos assim um Card bem simples que exibe apenas texto; observe que o Card apresenta uma pequena elevação sombreada destacando-se no leiaute.

Vamos criar um outro Card agora exibindo uma imagem com texto:

 
_body(){
    return Container(
      padding: EdgeInsets.all(10.0),
      child: Center(
        child: Column(
          children: <Widget>[
             Card(
              color: Colors.amber, 
              child: Container(
                padding: EdgeInsets.all(32.0),
                child: Column(
                  children: <Widget>[
                    Image.network(
"https://flutter.io/images/catalog-widget-placeholder.png"),
                    Divider(),
                    Text('Flutter - 2019')
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
     );
  }

Neste código usamos a argumento color do Card para destacar a cor no Card e empilhamos em um widget Column uma imagem e um texto. Para separar o texto da imagem usamos o widget Divider().

Vamos agora criar outro Card e incluir botões:

 
_body(){
    return Container(
        padding: EdgeInsets.all(10.0),
        child: Center(
          child: Column(
            children: <Widget>[
              Card(
                color: Colors.grey[100],
                child: Container(
                   padding: EdgeInsets.all(10),
                   child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                       Image.network(
   'https://flutter.io/images/catalog-widget-placeholder.png',
                       height: 150,width: 150),
                       Text(
                   "Flutter - 2019 - Macoratti.net quase tudo para .NET",
                        maxLines: 1,
                        overflow: TextOverflow.ellipsis,
                        style: TextStyle(fontSize: 20),
                      ),
                       Text( 
                        "http://www.macoratti.net",
                        style: TextStyle(fontSize: 14),
                      ),
                       ButtonTheme.bar(
                          child: ButtonBar(
                            children: <Widget>[
                           FlatButton(
                            child: const Text('DETALHES'),
                            onPressed: () { /* ... */ },
                          ),
                          FlatButton(
                            child: const Text('SHARE'),
                            onPressed: () { /* ... */ },
                          ),
                            ],
                           )
                       )
                    ]
                   ),
                ),
             ),
            ],
          ),
        ),
       );
  }

Aqui cabe destacar o argumento color do Card onde definimos um cor cinza clara para destacar. Para criar os botões usamos o construtor ButtonTheme.bar que cria um tema de botão apropriado para barras de botões, conforme usado nos rodapés da caixa de diálogo e nos cabeçalhos das tabelas de dados.

A seguir definimos como filho o widget ButtonBar que posiciona os botões horizontalmente de acordo com o preenchimento no ButtonTheme atual. Como filhos deste widget temos dois FlatButton com Texto e também podemos implementar o callback onPressed().

Pegue o código dos arquivos dart usados no projeto aqui:  main_card.dart

"Disse-lhes, pois, Jesus: Quando levantardes o Filho do homem, então conhecereis que EU SOU, e que nada faço por mim mesmo; mas isto falo como meu Pai me ensinou."
João 8: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