The home page (or main screen) of our app will contain a list of volumes. In previous projects in this book, whenever we had a list of data to show to our users, we used the ListView widget with vertical scrolling. This is ideal on smartphones, where the height of the device is usually larger than its width, and the user takes for granted scrolling as the default way to view data.

On a notebook or a desktop, the width of the screen is generally larger than its height, and large amounts of data are generally placed in tables that leverage the available space, dividing several pieces of data into rows and columns. Things can only get more complicated when you think about tablets, with their various sizes, resolutions, and orientations.

So, the question is, where should we put our data: in a scrolling ListView or in a Table?

The answer is… both: if the screen is small, we'll show a ListView; otherwise, we'll show a Table.

Before we design the UI, there's also another issue. In our app, there are two pages: one to look for books, and another to show the favorites. If you think about it, both pages share the same kind of content: a list of books. What's different is the source of data (web or internal storage) and the actions the user can perform. On the home page, the user will be able to add a book to their favorites; on the favorites page, the opposite is true: they will be able to remove books from the favorites list. The origin of the books does not change the layout, but the action does.

What might work for us is trying to use the same layout for both pages, and only changing the action button in the table or list, and we'll do that next.