Routing 2: Add New Dog Page

The only other page we will create is to add dogs.

The next section will show you how to handle user input, but you might as well add that route now, while we're on the subject.

1. Add NewDogPage

Create a new file in the lib folder called new_dog_form.dart.

The UI of this page is simple:

form page screen shot

Here's the code with no functionality (again, you'll add the user input functionality in the next section):

  1. // new_dog_form.dart
  3. import 'package:flutter/material.dart';
  5. class AddDogFormPage extends StatefulWidget {
  6.   @override
  7.   _AddDogFormPageState createState() => _AddDogFormPageState();
  8. }
  10. class _AddDogFormPageState extends State<AddDogFormPage> {
  11.   @override
  12.   Widget build(BuildContext context) {
  13.     // new page needs scaffolding!
  14.     return Scaffold(
  15.       appBar: AppBar(
  16.         title: Text('Add a new Dog'),
  17.         backgroundColor: Colors.black87,
  18.       ),
  19.       body: Container(
  20.         color: Colors.black54,
  21.         child: Padding(
  22.           padding: const EdgeInsets.symmetric(
  23.             vertical: 8.0,
  24.             horizontal: 32.0,
  25.           ),
  26.           child: Column(
  27.             children: [
  28.               Padding(
  29.                 padding: const EdgeInsets.only(bottom: 8.0),
  30.                 // Text Field is the basic input widget for Flutter.
  31.                 // It comes built in with a ton of great UI and
  32.                 // functionality, such as the labelText field you see below.
  33.                 child: TextField(
  34.                     decoration: InputDecoration(
  35.                   labelText: 'Name the Pup',
  36.                 )),
  37.               ),
  38.               Padding(
  39.                 padding: const EdgeInsets.only(bottom: 8.0),
  40.                 child: TextField(
  41.                     decoration: InputDecoration(
  42.                   labelText: "Pup's location",
  43.                 )),
  44.               ),
  45.               Padding(
  46.                 padding: const EdgeInsets.only(bottom: 8.0),
  47.                 child: TextField(
  48.                   decoration: InputDecoration(
  49.                     labelText: 'All about the pup',
  50.                   ),
  51.                 ),
  52.               ),
  53.               // A Strange situation.
  54.               // A piece of the app that you'll add in the next
  55.               // section *needs* to know its context,
  56.               // and the easiest way to pass a context is to
  57.               // use a builder method. So I've wrapped
  58.               // this button in a Builder as a sort of 'hack'.
  59.               Padding(
  60.                 padding: const EdgeInsets.all(16.0),
  61.                 child: Builder(
  62.                   builder: (context) {
  63.                     // The basic Material Design action button.
  64.                     return RaisedButton(
  65.                       // If onPressed is null, the button is disabled
  66.                       // this is my goto temporary callback.
  67.                       onPressed: () => print('PRESSED'),
  68.                       color: Colors.indigoAccent,
  69.                       child: Text('Submit Pup'),
  70.                     );
  71.                   },
  72.                 ),
  73.               ),
  74.             ],
  75.           ),
  76.         ),
  77.       ),
  78.     );
  79.   }
  80. }

2. Add the Routing

Like the last section, you now have a page that you can't access. Add the button and routing information to the _MyHomePageState class.

  1. // main.dart
  3. @override
  4. Widget build(BuildContext context) {
  5.   return Scaffold(
  6.     appBar: AppBar(
  7.       title: Text(widget.title),
  8.       backgroundColor: Colors.black87,
  9.       // This is how you add new buttons to the top right of a material appBar.
  10.       // You can add as many as you'd like.
  11.       actions: [
  12.          IconButton(
  13.           icon: Icon(Icons.add),
  14.           onPressed: _showNewDogForm,
  15.         ),
  16.       ],
  17.     ),
  18.   ...

That will add a plus-sign looking button to the top right corner of your app, and finally you can add the method that builds a new route.

Import new_dog_form.dart in main.dart:

  1. // main.dart
  3. import 'package:flutter/material.dart';
  5. import 'dog_list.dart';
  6. import 'dog_model.dart';
  7. import 'new_dog_form.dart';

Add this anywhere in your _MyHomePageState class:

  1. // Any time you're pushing a new route and expect that route
  2. // to return something back to you,
  3. // you need to use an async function.
  4. // In this case, the function will create a form page
  5. // which the user can fill out and submit.
  6. // On submission, the information in that form page
  7. // will be passed back to this function.
  8. Future _showNewDogForm() async {
  9.   // push a new route like you did in the last section
  10.   Dog newDog = await Navigator.of(context).push(
  11.     MaterialPageRoute(
  12.       builder: (BuildContext context) {
  13.         return AddDogFormPage();
  14.       },
  15.     ),
  16.   );
  17.   // A null check, to make sure that the user didn't abandon the form.
  18.   if (newDog != null) {
  19.     // Add a newDog to our mock dog array.
  20.     initialDoggos.add(newDog);
  21.   }
  22. }