Flutter - Criando AlertDialogs

Hoje vou mostrar como criar AlertDialogs, ou caixa de diálogo de alerta, 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

No Flutter tudo são widgets.

Criando AlertDialogs

Uma caixa de diálogo de alerta, AlertDialgos, informa o usuário sobre situações que exigem reconhecimento. Um diálogo de alerta tem um título opcional e uma lista opcional de ações onde o título é exibido acima do conteúdo e as ações são exibidas abaixo do conteúdo.

Se o conteúdo for muito grande para caber na tela verticalmente, a caixa de diálogo exibirá o título e as ações e deixará o conteúdo estourar, o que raramente é desejado.

Ele aparece como um pop-up no meio da tela que coloca uma sobreposição sobre o fundo. É mais usado para confirmar uma das ações irreversíveis do usuário.

A maneira mais simples de criar um diálogo de alerta é chamar a função showDialog() que altera o estado da aplicação. Assim temos que definir a função showDialog() com um context e uma função itemBuilder que precisa retornar um objeto do tipo Dialog, onde a opção mais comum é usar um AlertDialog.

void _exibirDialogo() {
    showDialog(
       context:  context,
       builder:  (BuildContext context) {
         return AlertDialog();
    },
   );
}

Podemos ter muitas configurações para um AlertDialog, onde vários atributos podem ser definidos incluindo o titulo contéudo e Actions ou acções. A Actions é o lugar onde você define os Buttons, geralmente na parte inferior da caixa de diálogo.

A seguir um trecho de código básico para definição de um AlertDialog com um botão:

void _showDialog() {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        // retorna um objeto do tipo Dialog
        return AlertDialog(
          title: new Text("Alert Dialog titulo"),
          content: new Text("Alert Dialog body"),
          actions: <Widget>[
            // define os botões na base do dialogo
            new FlatButton(
              child: new Text("Fechar"),
              onPressed: () {
                Navigator.of(context).pop();
              },
            ),
          ],
        );
      },
    );

Vejamos a seguir alguns exemplos de criação de AlertDialogs.

Criando AlertDialogs

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_alertdialogs 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 substituir o código do arquivo main.dart pelo código abaixo:

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter'),
        ),
        body: MyLayout()),
    );
  }
}
class MyLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: RaisedButton(
        child: Text('Exibir Alerta'),
        onPressed: () {
          showAlertDialog1(context);
        },
      ),
    );
  }
}

Este será o nosso template onde temos um botão com o texto 'Exibir Alerta' que ao ser clicado aciona o método onPressed() e chama o método showAlertDialog(BuildContext context) onde vamos definir o código para criar os AlertDialogs.

Dentro da pasta lib crie uma pasta chamada AlertDialogs e nesta pasta vamos definir o código de cada um dos AlertDialogs.

1- Criando uma caixa de alerta com um botão

showAlertDialog1(BuildContext context) 
{ 
    // configura o button
  Widget okButton = FlatButton(
    child: Text("OK"),
    onPressed: () { },
  );
  // configura o  AlertDialog
  AlertDialog alerta = AlertDialog(
    title: Text("Promoção Imperdivel"),
    content: Text("Não perca a promoção."),
    actions: [
      okButton,
    ],
  );
  // exibe o dialog
  showDialog(
    context: context,
    builder: (BuildContext context) {
      return alerta;
    },
  );
}

2- Criando uma caixa de alerta com dois botões

 import 'package:flutter/material.dart';
showAlertDialog2(BuildContext context) {
   Widget cancelaButton = FlatButton(
    child: Text("Cancelar"),
    onPressed:  () {},
  );
  Widget continuaButton = FlatButton(
    child: Text("Continar"),
    onPressed:  () {},
  );
  //configura o AlertDialog
  AlertDialog alert = AlertDialog(
    title: Text("AlertDialog"),
    content: Text("Deseja continuar aprendendo Flutter ?"),
    actions: [
      cancelaButton,
      continuaButton,
    ],
  );
  //exibe o diálogo
  showDialog(
    context: context,
    builder: (BuildContext context) {
      return alert;
    },
  );
}

3- Criando uma caixa de alerta com três botões

import 'package:flutter/material.dart';
showAlertDialog3(BuildContext context) {
  // configura os botões
  Widget lembrarButton = FlatButton(
    child: Text("Lembrar"),
    onPressed:  () {},
  );
  Widget cancelaButton = FlatButton(
    child: Text("Cancelar"),
    onPressed:  () {},
  );
  Widget dispararButton = FlatButton(
    child: Text("Disparar"),
    onPressed:  () {},
  );
  // configura o  AlertDialog
  AlertDialog alert = AlertDialog(
    title: Text("Aviso"),
    content: Text("Disparar este míssil vai destruir o mundo."),
    actions: [
      lembrarButton,
      cancelaButton,
      dispararButton,
    ],
  );
  // exibe o dialogo
  showDialog(
    context: context,
    builder: (BuildContext context) {
      return alert;
    },
  );
}

Tratando o pressionamento do Button

Nos exemplos acima o tratamento da chamada do callback onPressed dos botões estavam todos vazios.

Podemos, realizar o tratamento de onPressed incluindo o código conforme abaixo:

 Widget dispararButton = FlatButton(
    child: Text("Disparar"),
    onPressed:  () {
      Navigator.of(context).pop();
          dispararMissel();
          },
        );

Se você definir onPressed igual a null o botão será desabilitado:

 Widget cancelaButton = FlatButton(
    child: Text("Cancelar"),
    onPressed:  null,
  );

Além disso você ainda tem como opção usar a biblioteca de alertas RFlutter, que é facilmente personalizável e fácil de usar. Seu estilo padrão inclui cantos arredondados e você pode adicionar botões o quanto quiser.

Veja detalhes no link: https://github.com/RatelHub/rflutter_alert

Aguarde em breve mais artigos sobre Flutter.

E a paz de Deus, que excede todo o entendimento, guardará os vossos corações e os vossos pensamentos em Cristo Jesus. Filipenses 4:7

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