SLC S23W4 - Building an E-Book Library App in Flutter

Assalamualaikum my fellows I hope you will be fine by the grace of Allah. Today I am going to participate in the steemit learning club season 23 week 4 by @mohammadfaisal, @kafio, @alejos7ven under the umbrella of steemit team. It is about the technology and development. Let us start exploring this week's learning club.

Made with Canva

I have worked with Flutter in last season. And today I will develop an electronic book which will provide books to the users on different categories. I will use an API provided by Google. This is the wide and trusted source of different books. It allows reading and downloading of the books. It will act as a pocket book library system for the users. This is the need of every user.

In my this project of weather forecast there will be these features:

• Category Screen
• Home Screen
• Details Screen
• Reader Screen
• Dynamic Search Bar
• Download Feature via Google

These will be the major screens and features of my this Ebook application.

For all the development I need to use these packages from pub.dev:

• cached_network_image: ^3.4.1
• http: ^1.3.0
• url_launcher: ^6.3.1
• flutter_inappwebview: ^6.1.5

I want to show you the model for the books to fetch different elements of the books from the API. I have defined 7 attributes title, author, thumbnail, previewLink, downloadLink, category, and keywords. All the attributes are required.

I have used a factory constructor of the class book to create the instance of the class using the json data. This constructor is mapping the values from the API to the objects of the Book class. It checks for the available data before assigning to the objects. It properly handles the errors and exceptions in the json data.

This is the home screen of the application. By following the background design used by the mentor I am also using gradient background with the blend of two colours. The gradient is starting with purple colour and ending with light purple colour. In the body there are different categories. I used ListTile to display the categories. In the ListTile I have used icon, category title and then an icon button to move to the next screen to get the books of that category.

• Leading includes an icon.
• Title has the category name.
• Trailing has an icon button.

The ListTile widget 7 times to include 7 categories of books.

This is the list categories to map the name of the category and icons to the category according to their index. Instead of defining separately I have used a list of items for the ease of the use.

This is the next screen which shows the available books in the category. This screen design is common for all other categories. The appBar is dynamic which changes on the basis of the selected category of books. It has gradient background colour.

In the body the first element is an elevated search bar. This is dynamic search bar. As soon as we enter any keyword the search bar dynamically fetches books and display them.

The books are displayed in the grid layout. 2 books are displayed in each row. Each book is displayed in a card widget. It displays the image of the book, the title of the book and at the end the name of the author. This format is same for all books. Each book is clickable. When the click on book the details of the book are opened.

This is the book API service code which helps to load the books on the screen by contacting with the model of the books which I created already. In this there are different variables according to their purpose. There is a controller to pass the textfield data. There is a list of books to store the fetched books from the API. A string to store the search query and then use it to search the books from the API endpoint.

This is the working of search bar. You can see I entered war in search bar. It fetched all the related books and displayed them on the screen. This dynamic search bar automatically fetched books as the keywords change in the search bar.

This is the search logic. The search bar takes the search query as a new value and it is passed to the variable searchQuery. It brings all the relevant books and displays them dynamically.

This is the book details screen. The appBar of this screen is also dynamic. The appBar shows the title of the book.

Then for the display of the image in a good style I used ClipRRect. I fetched the cover of the book and displayed in the card widget. This screen display the title of the book and the writer of the book.

It displays two buttons Read Online and Download. The user can download book or read online according to the priority. To download the user must have a Google account.

This is the logic of these two buttons. Each button is specific for its functionality. The first button checks if the previewLink is avialble for the book then it proceeds to the reader screen. The second button is to download the book. The logic checks if the download link is available and the download url can be launched and then it displays the download screen as shown below.

If user wants to download book user clicks on download button. It checks if the download link is available for this book by Google. If link is available it opens the download link and asks to sign in or if you are already sign in it asks you to confirm your account to download.

When the user click to read online the application opens the direct download page within the application without going outside to the external browser to read the book. The user can avail all the features of Google books library. The books pages came be zoom in and out. User can use full screen and also explore similar or other editions of the book.

In this screen I added two buttons. One is to refresh the screen and the other is to go back from this screen to previous screen.

This screens has the linear progress indicator to show the loading of the page and the linear progress indicator progresses as the page loads.

This is the complete working of my project. The application starts from the list of the categories. When the user selects any category then the books are displayed. In each screen of the books there is a search option which allows to search the different books dynamically. The search result changes as the user types the keywords in the search bar. When user chooses any book the book details are shown with the two buttons (Read Online, Download). You can see everything works smoothly in the application.

---

I have uploaded all the files in the GitHub Repository.

---

I invite my friends @ulfatulrahmah, @maarnio, and @chant to show their capabilities in this technology and development learning club.