11.6. Trabalhando com formulários em Flutter: Adicionando botões de envio e cancelamento

Trabalhar com formulários é uma parte essencial de qualquer aplicativo, seja para coletar informações do usuário ou para permitir que eles interajam com o aplicativo de uma maneira mais significativa. No Flutter, existem várias maneiras de trabalhar com formulários, e neste capítulo, vamos nos concentrar em adicionar botões de envio e cancelamento a um formulário.

Primeiro, vamos começar criando um novo projeto Flutter e adicionando um novo arquivo chamado 'form_page.dart'. Dentro deste arquivo, vamos criar uma nova classe chamada 'FormPage', que será um StatefulWidget. Dentro desta classe, vamos criar uma variável para o nosso formulário e uma função para inicializá-lo.

class FormPage extends StatefulWidget {
  @override
  _FormPageState createState() => _FormPageState();
}

class _FormPageState extends State {
  final _formKey = GlobalKey();

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Formulário'),
      ),
      body: Form(
        key: _formKey,
        child: Column(
          children: [
            // Adicione seus campos de formulário aqui
          ],
        ),
      ),
    );
  }
}

Agora que temos a estrutura básica do nosso formulário, podemos começar a adicionar campos a ele. Por exemplo, podemos adicionar um TextFormField para coletar o nome do usuário. Vamos também adicionar um botão de envio e um botão de cancelamento ao nosso formulário.

Column(
  children: [
    TextFormField(
      decoration: InputDecoration(labelText: 'Nome'),
      validator: (value) {
        if (value.isEmpty) {
          return 'Por favor, insira seu nome';
        }
        return null;
      },
    ),
    RaisedButton(
      child: Text('Enviar'),
      onPressed: () {
        if (_formKey.currentState.validate()) {
          // Se o formulário for válido, exiba um Snackbar
          Scaffold.of(context)
              .showSnackBar(SnackBar(content: Text('Processando Dados')));
        }
      },
    ),
    RaisedButton(
      child: Text('Cancelar'),
      onPressed: () {
        // Aqui você pode limpar o formulário ou voltar para a página anterior
      },
    ),
  ],
),

Como você pode ver, adicionamos um TextFormField com uma validação simples para verificar se o campo não está vazio. Em seguida, adicionamos um RaisedButton com um rótulo de 'Enviar'. Quando este botão é pressionado, ele verifica se o formulário é válido. Se for, ele exibe um Snackbar com uma mensagem dizendo que os dados estão sendo processados.

O botão de cancelamento não faz nada neste momento, mas você pode adicionar funcionalidade a ele, como limpar o formulário ou voltar para a página anterior.

É importante notar que Flutter fornece muitos outros widgets que você pode usar para criar seu formulário. Por exemplo, você pode usar um Checkbox, um Radio Button, um Slider, um Date Picker e muitos outros. A maneira de trabalhar com esses widgets é muito semelhante à que mostramos aqui, então você deve ser capaz de adicionar esses widgets ao seu formulário sem muito esforço.

Em resumo, trabalhar com formulários em Flutter é relativamente simples, mas também muito poderoso. Você pode criar formulários complexos com validação e lógica personalizada sem ter que escrever muito código. Além disso, a capacidade de adicionar botões de envio e cancelamento ao seu formulário torna a interação do usuário com o seu aplicativo muito mais agradável e intuitiva.

Na próxima seção, vamos falar sobre como trabalhar com navegação e rotas em Flutter, que é outra parte essencial de qualquer aplicativo. Fique ligado!