Flutter - Widgets Básicos

Este artigo apresenta um resumo dos principais Widgets básicos usados nas aplicações Flutter.

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

Usando os Widgets básicos

No Flutter quase tudo são widgets. Então vamos falar um pouco sobre eles.

Os Widgets são imutáveis. Ou seja, eles não podem ser alterados. Quaisquer propriedades que eles contêm são finais e só podem ser definidas quando o widget for inicializado. Isso os mantém leves, de modo que é barato recriá-los quando a árvore de widgets for alterada.

Existem dois tipos de widgets: 1) sem estado ou StatelessWidget e 2) com estado ou StatefulWidget

1-) Widgets sem estado são widgets que não armazenam nenhum estado. Ou seja, eles não armazenam valores que podem mudar. Por exemplo, um ícone é sem estado; você define a imagem do ícone quando a cria e depois não muda mais. Um widget de texto também é sem estado.

Você pode dizer: "Mas espere, você pode alterar o valor do texto". É verdade, mas se você quiser alterar o valor do texto, basta criar um novo widget inteiro com o novo texto. O widget Text não armazena uma propriedade de texto que pode ser alterada.

2-) O segundo tipo de widget é chamado de widget com estado. Isso significa que ele pode acompanhar as alterações e atualizar a interface do usuário com base nessas alterações.

Assim ao criar uma aplicação Flutter geralmente vamos utilizar widgets para a estrutura base da nossa aplicação.

Na documentação do Flutter podemos consultar os widgets básicos no link a seguir: https://flutter.dev/docs/development/ui/widgets/basics

Abaixo um resumo dos principais Widgets usados:

1- Scaffold

O widget Scaffold implementa o layout visual básico do Material Design, permitindo adicionar facilmente
vários widgets como AppBar, BottomAppBar, FloatingActionButton, Drawer, SnackBar, BottomSheet e muito mais.

2- SafeArea

O widget SafeArea é necessário para os dispositivos atuais, como o iPhone X ou Dispositivos Android com um entalhe (um recorte parcial que obscurece a tela geralmente localizada em a parte superior do dispositivo).

void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: SafeArea(
              child:Center(
                child: Column(
                   children: [
                      Text('Ola Pessoal !!!', style: TextStyle(fontSize: 40),)
                ],
              ),
       ))));
  }
}

O widget SafeArea adiciona automaticamente preenchimento suficiente ao widget filho para evitar invasões do sistema operacional. Opcionalmente, você pode passar um quantidade mínima de preenchimento ou um valor booleano para não aplicar preenchimento na parte superior, inferior, esquerda ou direita.

3- Container

O widget Container é um widget muito usado que permite a personalização do seu widget filho. Você pode adicionar facilmente propriedades como cor, largura, altura, preenchimento, margem, borda, restrição, alinhamento, transformação (como girar ou dimensionar o widget), e muitos outros. A propriedade child é opcional e o widget Container pode ser usado como um espaço reservado vazio (invisível) para adicionar espaço entre os widgets.

    import 'package:flutter/material.dart';
    void main() {
      runApp(
        Container(
          color: Colors.blue,
        ),
      );
    }

4- Text

O widget Text é usado para exibir uma sequência de caracteres. O construtor Text usa os argumentos string, style, maxLines, overflow, textAlign e outros. Um construtor é usado para transmitir os argumentos para inicializar e customizar o widget Text.

Text(
  'Ola, Paulo Como estás ?',
  textAlign: TextAlign.center,
  overflow: TextOverflow.ellipsis,
  style:TextStyle(fontWeight: FontWeight.bold),
)

 

const Text.rich(
      TextSpan(text: 'Olá', // default text style
         children: <TextSpan>
         [
           TextSpan(text: ' legal ',
             style: TextStyle(fontStyle: FontStyle.italic)),
           TextSpan(text: ' flutter',
             style: TextStyle(fontWeight: FontWeight.bold)),
         ],
     ),
)

5- RichText

O widget RichText é uma ótima maneira de exibir texto usando vários estilos. Este widget usa TextSpans como widget filhos para estilizar diferentes partes das strings.

RichText(
  text: TextSpan(
    text: 'Ola ',
    style: DefaultTextStyle.of(context).style,
    children: <TextSpan>[
      TextSpan(text: 'bold', style: TextStyle(fontWeight: FontWeight.bold)),
      TextSpan(text: ' Mundo !'),
    ],
  ),
)

6- Column

O widget Column exibe seus filhos verticalmente. É necessária uma propriedade children contendo uma matriz de <Widget>, o que significa que você pode adicionar vários widgets. Os filhos alinham verticalmente sem ocupar toda a altura da tela.

Cada widget filho pode ser incorporado em um widget Expanded para preencher o espaço disponível. Podemos usar CrossAxisAlignment, MainAxisAlignment e MainAxisSize ​para alinhar e dimensionar a quantidade de espaço ocupado no eixo principal.

Column(
   crossAxisAlignment: CrossAxisAlignment.center,
   mainAxisAlignment: MainAxisAlignment.spaceEvenly,
   mainAxisSize: MainAxisSize.max,
   children: <Widget>[
      Text('Coluna 1'),
      Divider(),
      Text('Coluna 2'),
      Divider(),
      Text('Coluna 3'),
    ],
),

7- Row
Um widget Row exibe seus filhos horizontalmente. Usa uma propriedade children contendo uma matriz de  <Widget>. As mesmas propriedades que a coluna contém são aplicadas ao Widget Row com a exceção de que o alinhamento é horizontal, não vertical.

Row(
  crossAxisAlignment: CrossAxisAlignment.start,
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
   mainAxisSize: MainAxisSize.max,
     children: <Widget>[
       Row(
         children: <Widget>[
            Text('Linha 1'),
               Padding(padding: EdgeInsets.all(16.0),),
            Text('Linha 2'),
                Padding(padding: EdgeInsets.all(16.0),),
            Text('Linha 3'),
            ],
       ),
   ],
),

8- Button

O widget Button é muito usado e o Flutter tem vários tipos de widgets Buttons como :

Abaixo um código exemplo mostrando um exemplo de FlatButton:

FlatButton(
  color: Colors.blue,
  textColor: Colors.white,
  disabledColor: Colors.grey,
  disabledTextColor: Colors.black,
  padding: EdgeInsets.all(8.0),
  splashColor: Colors.blueAccent,
  onPressed: () {
    /*...*/
  },
  child: Text(
    "FlatButton",
    style: TextStyle(fontSize: 20.0),
  ),
)

Geralmente é obrigatório definição do evento onPressed para gerenciar a ação do usuário.

9- Image

Usamos este widget 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:

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')
            ],
          ),
      ),
    );
  }
}

10- Icon

Podemos usar o widget Icon para definir widget gráfico desenhado com um glifo de uma fonte descrita em um IconData.

import "package:flutter/material.dart";
import 'package:flutter_widgets/const/_const.dart';
class IconPage extends StatefulWidget {
  @override
  _IconState createState() => _IconState();
}
class _IconState extends State<IconPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(PageName.ICON),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: <Widget>[
            Icon(
              Icons.ac_unit,
              size: 100,
              color: RED,
            ),
            Icon(
              Icons.build,
              size: 200,
              color: PURPLE,
              textDirection: TextDirection.ltr,
            ),
            Icon(
              Icons.build,
              size: 200,
              color: BLUE_DEEP,
              textDirection: TextDirection.rtl,
            )
          ],
        ),
      ),
    );
  }
}

Apresentamos um resumo dos principais widgets básicos usados no Flutter com um trecho de código destacando as principais propriedades/métodos usadas com o widget.

Para saber mais acompanhe os artigos na seção Flutter e as vídeo aulas do meu canal no Youtube : Jose Carlos Macoratti - YouTube

E estamos conversados...

"E Jesus clamou, e disse: Quem crê em mim, crê, não em mim, mas naquele que me enviou.
E quem me vê a mim, vê aquele que me enviou.
Eu sou a luz que vim ao mundo, para que todo aquele que crê em mim não permaneça nas trevas."
João 12:44-46

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