Como criar formulários em aplicativos Flutter

Se você está desenvolvendo um aplicativo usando o Flutter, provavelmente vai precisar criar formulários para que os usuários possam fornecer informações. Neste tutorial, vamos ensinar como criar formulários eficientes e funcionais para aplicativos. Você aprenderá a adicionar campos de entrada, botões de envio e outros elementos essenciais para criar forms completos e atraentes.

Comece agora a criar seus formulários em flutter seguindo este tutorial passo a passo.

1 – Insira o widget ‘Form’ ao seu app

Abra o arquivo main.dart do seu projeto Flutter e adicione o widget “Form” em seu build method. Isso irá criar um formulário para o usuário preencher.

  @override
  Widget build(BuildContext context) {
    return Form(
      child: Column(
        children: [
          // campos de entrada e outros widgets aqui
        ],
      ),
    );
  }

2 – Adicione campos de entrada

Dentro do widget Form, adicione os campos de entrada que você deseja que o usuário preencha. Por exemplo, você pode adicionar um “TextFormField” para uma caixa de texto ou um “DropdownButtonFormField” para uma lista suspensa. Certifique-se de especificar um “key” para cada campo de entrada, pois isso será necessário mais tarde.

 TextFormField(
    key: Key('username'),
    decoration: InputDecoration(labelText: 'Username'),
  ),
  TextFormField(
    key: Key('password'),
    decoration: InputDecoration(labelText: 'Password'),
    obscureText: true,
  ),
  DropdownButtonFormField(
    key: Key('country'),
    decoration: InputDecoration(labelText: 'Country'),
    items: ['Brazil', 'USA', 'UK', 'Germany'].map((String value) {
      return new DropdownMenuItem<String>(
        value: value,
        child: new Text(value),
      );
    }).toList(),
  ),

3 – Crie um botão de envio

Adicione um botão de envio no final do formulário. Você pode usar um “RaisedButton” ou um “FlatButton” para isso.

 RaisedButton(
    onPressed: () {
      // lógica de envio aqui
    },
    child: Text('Enviar'),
  ),

4 – Escreva a lógica de envio

Adicione uma função para o evento onPressed do botão de envio. Essa função deve validar os campos de entrada e, se tudo estiver correto, enviar as informações do formulário para o servidor ou realizar qualquer outra ação desejada.

 RaisedButton(
    onPressed: () {
      if (_formKey.currentState.validate()) {
        // salvar e enviar informações aqui
      }
    },
    child: Text('Submit'),
  ),

5 – Validar os campos de entrada do formulário

Para validar os campos de entrada, use o método “validate()” em cada um dos seus “TextFormFields”. Isso irá verificar se o usuário preencheu corretamente os campos e exibirá erros se necessário. Você também pode usar o método “autovalidate” do widget “Form” para validar os campos automaticamente enquanto o usuário preenche o formulário.

TextFormField(
    key: Key('email'),
    decoration: InputDecoration(labelText: 'Email'),
    validator: (value) {
      if (value.isEmpty || !value.contains('@')) {
        return 'Please enter a valid email';
      }
      return null;
    },
    autovalidate: true,
  ),

6 – Salvar os campos de entrada do formulário

Quando o usuário clicar no botão de envio, chame o método “save()” do widget “Form”. Isso irá salvar os campos de entrada e permitirá que você acesse os valores digitados pelo usuário através do “key” especificado anteriormente.

RaisedButton(
    onPressed: () {
      if (_formKey.currentState.save()) {
        // acessar os valores dos campos de entrada aqui
        var username = _formKey.currentState.value['username'];
        var password = _formKey.currentState.value['password'];
        var country = _formKey.currentState.value['country'];
      }
    },
    child: Text('Submit'),
  ),

Conclusão

Espero que este tutorial tenha ajudado você a entender como criar formulários em seus apps Flutter. Agora você sabe como adicionar campos de entrada, botões de envio e outros elementos aos seus formulários e como validar e salvar os dados fornecidos pelo usuário.

Lembre-se de sempre verificar se os campos de entrada foram preenchidos corretamente e de adicionar um botão de envio para que o usuário possa enviar o formulário quando estiver pronto.

Com essas habilidades em mãos, você está pronto para criar formulários eficientes e funcionais em seus projetos.