11.6. Working with forms in Flutter: Adding submit and cancel buttons

Working with forms is an essential part of any application, whether it's collecting information from the user or allowing them to interact with the application in a more meaningful way. In Flutter, there are several ways to work with forms, and in this chapter, we'll focus on adding submit and cancel buttons to a form.

First, let's start by creating a new Flutter project and adding a new file called 'form_page.dart'. Inside this file, let's create a new class called 'FormPage', which will be a StatefulWidget. Inside this class, let's create a variable for our form and a function to initialize it.

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('Form'),
      ),
      body:Form(
        key: _formKey,
        child: Column(
          children: [
            // Add your form fields here
          ],
        ),
      ),
    );
  }
}

Now that we have the basic structure of our form, we can start adding fields to it. For example, we can add a TextFormField to collect the username. Let's also add a submit button and a cancel button to our form.

Column(
  children: [
    TextFormField(
      decoration: InputDecoration(labelText: 'Name'),
      validator: (value) {
        if (value.isEmpty) {
          return 'Please enter your name';
        }
        return null;
      },
    ),
    RaisedButton(
      child: Text('Send'),
      onPressed:() {
        if (_formKey.currentState.validate()) {
          // If the form is valid, display a Snackbar
          scaffold.of(context)
              .showSnackBar(SnackBar(content: Text('Processing Data')));
        }
      },
    ),
    RaisedButton(
      child: Text('Cancel'),
      onPressed:() {
        // Here you can clear the form or go back to the previous page
      },
    ),
  ],
),

As you can see, we've added a TextFormField with a simple validation to verify that the field is not empty. Then we add a RaisedButton with a label of 'Submit'. When this button is pressed, it checks if the form is valid. If so, it displays a Snackbar with a message saying the data is being processed.

The cancel button does nothing at this time, but you can add functionality to it, such as clearing the form or going back to the previous page.

It's important to note that Flutter provides many other widgets that you can use to create your form. For example, you can use a Checkbox, a Radio Button, a Slider, a Date Picker and many others. The way to work with these widgets is very similar to what we've shown here, so you should be able to add these widgets to your form without much effort.

In summary, working with forms in Flutter is relatively simple, but also very powerful. You can create complex forms with validation and custom logic without having to write a lot of code. Furthermore, the ability to add submit and cancel buttons to your form makes user interaction with your application much more pleasant and intuitive.

In the next section, we'll talk about working with navigation and routing in Flutter, which is another essential part of any app. Stay tuned!

Next page of the Free Ebook:

155Working with forms in Flutter: Storing and submitting form data

4 minutes