Routing 1: Pages on the Fly

There are a couple different ways to add more pages to your Flutter app.

For all pages you know will exist, you can use declared routes.

But this app just builds pages on the fly for each individual dog. This is a good case for route builders.

1. Create a Dog Detail Page:

Create a new file called dog_detail_page.dart

This is going to be a StatefulWidget, so the user of your app can rate dogs later. But for now, there will be no state to manage.

For now this is what you'll be building:

dog detail screenshot

  1. // dog_detail_page.dart
  3. import 'package:flutter/material.dart';
  5. import 'dog_model.dart';
  7. class DogDetailPage extends StatefulWidget {
  8.   final Dog dog;
  10.   DogDetailPage(this.dog);
  12.   @override
  13.   _DogDetailPageState createState() => _DogDetailPageState();
  14. }
  16. class _DogDetailPageState extends State<DogDetailPage> {
  17.   // Arbitrary size choice for styles
  18.   final double dogAvatarSize = 150.0;
  20.   Widget get dogImage {
  21.     // Containers define the size of its children.
  22.     return Container(
  23.       height: dogAvatarSize,
  24.       width: dogAvatarSize,
  25.       // Use Box Decoration to make the image a circle
  26.       // and add an arbitrary shadow for styling.
  27.       decoration: BoxDecoration(
  28.         shape: BoxShape.circle,
  29.         // Like in CSS you often want to add multiple
  30.         // BoxShadows for the right look so the
  31.         // boxShadow property takes a list of BoxShadows.
  32.         boxShadow: [
  33.           const BoxShadow(
  34.               // just like CSS:
  35.               // it takes the same 4 properties
  36.               offset: const Offset(1.0, 2.0),
  37.               blurRadius: 2.0,
  38.               spreadRadius: -1.0,
  39.               color: const Color(0x33000000)),
  40.           const BoxShadow(
  41.               offset: const Offset(2.0, 1.0),
  42.               blurRadius: 3.0,
  43.               spreadRadius: 0.0,
  44.               color: const Color(0x24000000)),
  45.           const BoxShadow(
  46.               offset: const Offset(3.0, 1.0),
  47.               blurRadius: 4.0,
  48.               spreadRadius: 2.0,
  49.               color: const Color(0x1F000000)),
  50.         ],
  51.         // This is how you add an image to a Container's background.
  52.         image: DecorationImage(
  53.           fit: BoxFit.cover,
  54.           image: NetworkImage(widget.dog.imageUrl),
  55.         ),
  56.       ),
  57.     );
  58.   }
  60.   // The rating section that says ★ 10/10.
  61.   Widget get rating {
  62.     // Use a row to lay out widgets horizontally.
  63.     return Row(
  64.       // Center the widgets on the main-axis
  65.       // which is the horizontal axis in a row.
  66.       mainAxisAlignment: MainAxisAlignment.center,
  67.       children: <Widget>[
  68.         Icon(
  69.           Icons.star,
  70.           size: 40.0,
  71.         ),
  72.         Text(' ${widget.dog.rating} / 10',
  73.             style: Theme.of(context).textTheme.display2),
  74.       ],
  75.     );
  76.   }
  78.   // The widget that displays the image, rating and dog info.
  79.   Widget get dogProfile {
  80.     return Container(
  81.       padding: EdgeInsets.symmetric(vertical: 32.0),
  82.       decoration: BoxDecoration(
  83.         // This would be a great opportunity to create a custom LinearGradient widget
  84.         // that could be shared throughout the app but I'll leave that to you.
  85.         gradient: LinearGradient(
  86.           begin: Alignment.topRight,
  87.           end: Alignment.bottomLeft,
  88.           stops: [0.1, 0.5, 0.7, 0.9],
  89.           colors: [
  90.             Colors.indigo[800],
  91.             Colors.indigo[700],
  92.             Colors.indigo[600],
  93.             Colors.indigo[400],
  94.           ],
  95.         ),
  96.       ),
  97.       // The Dog Profile information.
  98.       child: Column(
  99.         crossAxisAlignment: CrossAxisAlignment.center,
  100.         children: <Widget>[
  101.           dogImage,
  102.           Text(
  103.             '${widget.dog.name}  🎾',
  104.             style: TextStyle(fontSize: 32.0),
  105.           ),
  106.           Text(
  107.             widget.dog.location,
  108.             style: TextStyle(fontSize: 20.0),
  109.           ),
  110.           Padding(
  111.             padding:
  112.                 const EdgeInsets.symmetric(horizontal: 32.0, vertical: 16.0),
  113.             child: Text(widget.dog.description),
  114.           ),
  115.           rating
  116.         ],
  117.       ),
  118.     );
  119.   }
  121.   //Finally, the build method:
  122.   //
  123.   // Aside:
  124.   // It's often much easier to build UI if you break up your widgets the way I
  125.   // have in this file rather than trying to have one massive build method
  126.   @override
  127.   Widget build(BuildContext context) {
  128.     // This is a new page, so you need a new Scaffold!
  129.     return Scaffold(
  130.       backgroundColor: Colors.black87,
  131.       appBar: AppBar(
  132.         backgroundColor: Colors.black87,
  133.         title: Text('Meet ${widget.dog.name}'),
  134.       ),
  135.       body: dogProfile,
  136.     );
  137.   }
  138. }

2. Add the Routing mechanism:

Now you've added the DogDetailPage but you can't get to it. Let's add some routing.

On your main page that lists all the dogs, each card will be a button that when tapped brings up that dog's detail page.

Import DogDetailPage into dog_card.dart:

  1. // dog_card.dart
  3. import 'package:flutter/material.dart';
  5. import 'dog_detail_page.dart';
  6. import 'dog_model.dart';

In your _DogCardState class, have build wrap everything in a button:

  1. // dog_card.dart
  3. @override
  4. Widget build(BuildContext context) {
  5.   // InkWell is a special Material widget that makes its children tappable
  6.   // and adds Material Design ink ripple when tapped.
  7.   return InkWell(
  8.     // onTap is a callback that will be triggered when tapped.
  9.     onTap: showDogDetailPage,
  10.     child: Padding(
  11.       padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
  12.       child: Container(
  13.         height: 115.0,
  14.         child: Stack(
  15.           children: <Widget>[
  16.             Positioned(
  17.               left: 50.0,
  18.               child: dogCard,
  19.             ),
  20.             Positioned(top: 7.5, child: dogImage),
  21.           ],
  22.         ),
  23.       ),
  24.     ),
  25.   );
  26. }
  28. // This is the builder method that creates a new page.
  29. showDogDetailPage() {
  30.   // Navigator.of(context) accesses the current app's navigator.
  31.   // Navigators can 'push' new routes onto the stack,
  32.   // as well as pop routes off the stack.
  33.   //
  34.   // This is the easiest way to build a new page on the fly
  35.   // and pass that page some state from the current page.
  36.   Navigator.of(context).push(
  37.     MaterialPageRoute(
  38.       // builder methods always take context!
  39.       builder: (context) {
  40.         return DogDetailPage(dog);
  41.       },
  42.     ),
  43.   );
  44. }

Your app now has pages for each and every dog.

And you may have noticed that there's a back button on the dog detail page, but there's no code for it.

Flutter automatically adds a leading button to an AppBar, which pops a route off. You can override it in the AppBar widget if you ever need to.