On the home page of the app, we already have an IconButton that the user can press to add a book to their favorites. We only need to connect it to the addFavorites() method in the BooksHelper class to make it work. Let's look at the steps to do that here:

1. Get to the ui.dart file, and in the BooksTable class in the build() method, in the last TableCell, edit the IconButton so that in the onPressed() method, it can add (or remove) a book in the favorites list, as follows:

child: IconButton( 
   color: (isFavorite) ? Colors.red : Colors.amber,  
   tooltip: (isFavorite) ? 'Remove from favorites' :
   'Add to favorites',  
   icon: Icon(Icons.star),  
   onPressed: () { 
      if (isFavorite) { 
         helper.removeFromFavorites(book, context); 
      } else {  
         helper.addToFavorites(book); 
   } 
})) 

2. We'll need to do the same in the BookList widget. In the trailing IconButton in the build() method, update the code so that it calls the addToFavorites() or removeFromFavorites() methods of the BooksHelper class, as follows:

trailing: IconButton( 
   color: (isFavorite) ? Colors.red : Colors.amber,  
   tooltip: (isFavorite) ? 'Remove from favorites' :
    'Add to favorites',  
   icon: Icon(Icons.star),  
   onPressed: () { 
      if (isFavorite) { 
      helper.removeFromFavorites(books[position], context); 
   } else {  
      helper.addToFavorites(books[position]); 
} }), 

The last step to complete the app is adding the second page of the app, the favorites screen, which can be done in the following way:

1. In the lib folder, add a new file called favorite_screen.dart.
2. At the top of the file, add the required imports, as follows:

import 'package:flutter/material.dart'; 
import 'ui.dart'; 
import 'data/books_helper.dart'; 
import 'main.dart'; 

3. Create a new stateful widget, called FavoriteScreen, like this:

class FavoriteScreen extends StatefulWidget { 
@override 
   _FavoriteScreenState createState() => _FavoriteScreenState(); 
} 

class _FavoriteScreenState extends State<FavoriteScreen> { 
@override 
   Widget build(BuildContext context) { 
      return Container(); 
}} 

4. In the _FavoriteScreenState class, add a BooksHelper object and the properties that make the state—a list called books and an integer called booksCount, as follows:

BooksHelper helper; 
List<dynamic> books = List<dynamic>(); 
int booksCount; 

When this screen is called, it should load the favorite books currently stored in SharedPreferences.

5. Create a new asynchronous method called initialize() that will update the state of the screen, and, in particular, the books list and the bookCount property, as shown in the following code block:

Future initialize() async { 
   books = await helper.getFavorites(); 
   setState(() { 
      booksCount = books.length; 
      books = books; 
}); }  

6. Override the initState() method, calling an instance of the BooksHelper class and calling the initialize() method that we've just created, like this:

@override 
void initState() { 
   helper = BooksHelper(); 
   initialize(); 
   super.initState(); 
} 

The build() method will be very similar to the build() method in the MyHomePage class: it will share the same menu and will check whether the screen is small or large, and, depending on that, it will choose whether to show a Table or a ListView for the favorites. Note that the isFavorite parameter of the BooksList and BooksTable is set to true from now on.

7. The following snippet shows the code for the build() method of the Favorites screen. Add it to your project:

@override 
Widget build(BuildContext context) { 
   bool isSmall = false; 
   if (MediaQuery.of(context).size.width < 600) { 
     isSmall = true; 
   } 
   return Scaffold( 
      appBar: AppBar(title: Text('Favorite Books'), 
      actions: <Widget>[ 
         InkWell( 
            child: Padding( 
            padding: EdgeInsets.all(20.0),  
            child: (isSmall) ? Icon(Icons.home) : Text('Home')), 
            onTap: () { 
               Navigator.push(context,  
               MaterialPageRoute(builder: (context) =>
                MyHomePage()) 
          ); }, ), 
         InkWell( 
            child: Padding( 
            padding: EdgeInsets.all(20.0),  
            child:(isSmall) ? Icon(Icons.star) :
            Text('Favorites')), 
    ) , ],), 
      body: Column(children: <Widget>[ 
         Padding( 
            padding: EdgeInsets.all(20), 
            child: Text('My Favourite Books') 
         ), 
         Padding( 
            padding: EdgeInsets.all(20), 
            child: (isSmall) ? BooksList(books, true) :
            BooksTable(books, true) 
         ), 
   ],),  
); } 

From here, we can easily navigate to the HomePage, but we also need a way to get from the home page to the Favorites screen.

8. Get back to the main.dart file, and, in the InkWell that contains the star icon or the 'Favorites' text, add the code to navigate to the FavoriteScreen, as follows:

InkWell( 
   child: Padding( 
   padding: EdgeInsets.all(20.0), 
   child: (isSmall) ? Icon(Icons.star) : Text('Favorites')), 
   onTap: () { 
      Navigator.push(context, 
         MaterialPageRoute(builder: (context) =>
         FavoriteScreen())); 
   }, 
), 

Try the app in your browser, add favorites to your list, change the size of the window to see how the UI responds to the available space, and think of the (many) ways you could make this app better, including building a details page with the description of the book, which we retrieved from the API but never used.

Also, congratulate yourself, as this completes this app and the last project of this book!