Forms 1: User Input

Adding functionality to your AddDogForm is a pretty easy feat.

Essentially, you just need to add a couple built in Flutter classes that keep track of form input, and a function that returns the data to the main page through the router.

1. TextEditingController class

There are a couple ways to go about tracking text input form elements. You can use Form widgets, or you can track each text input separately.

In this example, I will show you how to do the latter. TextEditingController is an important and fundamental thing in Flutter.

A TextEditingController is basically a class that listens to its assigned TextField, and updates it's own internal state every time the text in the TextField changes.

In your _AddDogFormPageState class, add a controller and onChanged property to each TextField:

  1. // new_dog_form.dart
  3. class _AddDogFormPageState extends State<AddDogFormPage> {
  4.   // One TextEditingController for each form input:
  5.   TextEditingController nameController = TextEditingController();
  6.   TextEditingController locationController = TextEditingController();
  7.   TextEditingController descriptionController = TextEditingController();
  9.   @override
  10.   Widget build(BuildContext context) {
  11.     return Scaffold(
  12.       appBar: AppBar(
  13.         title: Text('Add a new Dog'),
  14.         backgroundColor: Colors.black87,
  15.       ),
  16.       body: Container(
  17.         color: Colors.black54,
  18.         child: Padding(
  19.           padding: const EdgeInsets.symmetric(
  20.             vertical: 8.0,
  21.             horizontal: 32.0,
  22.           ),
  23.           child: Column(
  24.             children: [
  25.               Padding(
  26.                 padding: const EdgeInsets.only(bottom: 8.0),
  27.                 child: TextField(
  28.                     // Tell your textfield which controller it owns
  29.                     controller: nameController,
  30.                     // Every single time the text changes in a
  31.                     // TextField, this onChanged callback is called
  32.                     // and it passes in the value.
  33.                     //
  34.                     // Set the text of your controller to
  35.                     // to the next value.
  36.                     onChanged: (v) => nameController.text = v,
  37.                     decoration: InputDecoration(
  38.                       labelText: 'Name the Pup',
  39.                     )),
  40.               ),
  41.               Padding(
  42.                 padding: const EdgeInsets.only(bottom: 8.0),
  43.                 child: TextField(
  44.                     controller: locationController,
  45.                     onChanged: (v) => locationController.text = v,
  46.                     decoration: InputDecoration(
  47.                       labelText: "Pups location",
  48.                     )),
  49.               ),
  50.               Padding(
  51.                 padding: const EdgeInsets.only(bottom: 8.0),
  52.                 child: TextField(
  53.                     controller: descriptionController,
  54.                     onChanged: (v) => descriptionController.text = v,
  55.                     decoration: InputDecoration(
  56.                       labelText: 'All about the pup',
  57.                     )),
  58.               ),
  59.               Padding(
  60.                 padding: const EdgeInsets.all(16.0),
  61.                 child: Builder(
  62.                   builder: (context) {
  63.                     return RaisedButton(
  64.                       onPressed: () => print('PRESSED'),
  65.                       color: Colors.indigoAccent,
  66.                       child: Text('Submit Pup'),
  67.                     );
  68.                   },
  69.                 ),
  70.               ),
  71.             ],
  72.           ),
  73.         ),
  74.       ),
  75.     );
  76.   }
  77. }

Now, even though it doesn't look like anything new is happening, the TextEditingControllers are keeping track of your form.

2. Submit The Form

Import dog_model.dart into new_dog_form.dart:

  1. // new_dog_form.dart
  3. import 'package:flutter/material.dart';
  5. import 'dog_model.dart';

In the same _AddDogFormPageState class, add the submitPup function, which will pass the form information back via the Navigator:

  1. // new_dog_form.dart
  3. // You'll need the context in order for the Navigator to work.
  4. void submitPup(BuildContext context) {
  5.   // First make sure there is some information in the form.
  6.   // A dog needs a name, but may be location independent,
  7.   // so we'll only abandon the save if there's no name.
  8.   if (nameController.text.isEmpty) {
  9.     print('Dogs need names!');
  10.   } else {
  11.     // Create a new dog with the information from the form.
  12.     var newDog = Dog(nameController.text, locationController.text,
  13.         descriptionController.text);
  14.     // Pop the page off the route stack and pass the new
  15.     // dog back to wherever this page was created.
  16.     Navigator.of(context).pop(newDog);
  17.   }
  18. }

And lastly, add submitPup to your 'RaisedButton' onPressed callback:

  1. // new_dog_form.dart
  3. builder: (BuildContext context) {
  4.   return RaisedButton(
  5.     onPressed: () => submitPup(context),
  6.     color: Colors.indigoAccent,
  7.     child: Text('Submit Pup'),
  8.   );
  9. },

And that's that. Now, you should be able to submit a new dog and see it on your main page!