CATalog App: Info Page

TannerHornsby7 — Sat, 09 Jul 2022 00:57:59 +0000

The Idea

In my last post, I built the basic homepage UI for the CATalog. Today, I plan on expanding the app by adding info pages for each cat.

The Process

Writing the Base CatInfo Class

To begin today's work, I build a CatInfo class which displayed a cat, its name, its info, and its stats. I used a rating package I found online that is really good, Flutter Rating Bar! Special thanks to Sarba Gyastha for creating this great package. I implemented a basic stat bar for Health, and plan to add two more for Stamina, and Strength. Here is what the basic CatInfo Page was looking like!

Navigation Station

The implementation of navigation was way easier than I thought it would be. I simply placed a Navigator.push function inside of the onPressed attribute as shown below:

Navigator automatically adds a pop method to the CatInfo class, which meant that my work was done when it came to navigation. With this final addition of code, I had a working framework for navigating from the home page to a cat page:

Next Steps

Next time, I want the cat image, stats, and descriptions to be unique to the selected cat. To do this, there are two methods I thought of. I can either use provider for a short term solution to the changing state, or use Firebase to create a basic back end which I can pull the cats from.

For now, I am thinking of using Firebase and integrating provider where needed, but if you guys know of a better method, please let me know!

Thank you for reading. Feel free to comment with tips/suggestions and follow if you want to join me on this flutter journey!

Github Repo: https://github.com/TannerHornsby7/CATalog

CATalog App: First Steps

TannerHornsby7 — Wed, 06 Jul 2022 23:50:03 +0000

The Idea

For my first public flutter app, I decided to do something meaningful. Something that could actually change the world. I decided to make a catalog.

But this wasn't going to be just any catalog. No, this was to be the CATalog. A directory for all cats, listing their images, names, and stats. But to do this, I need to work on my Flutter skills.

The Process

UI Diagram

In order to turn my idea into a reality, I first came up with a diagram of how the homepage and navigation would occur. I decided upon the following structure:

... yea I'm a bit of an artist what can I say ...

Initial Roadblocks

At first, I wanted to pull the cat images from Purina's Cat Breeds Site; however, I only knew how to use the http request and response library for JSON data directly. The data on their site was formatted with html, giving me this weird error when I tried to implement the list builder:

Composing the List

So instead I began by downloading pics of my favorite cats and saving them in an asset folder that I added to my pubspec.yaml file. Only the studs got selected, but eventually I want to include all breeds.

one of the studs selected

I then created the ListView builder with tiles composed of these images and their respective names. I also added a button for more info which would implement a Navigator.push method in its onPressed attribute when I finish the CatInfo class.

As you can probably tell, the pictures were pretty wanky. But this was an easy fix. I simply added a fit attribute to the image giving it the BoxFit.fill tribute. This, along with an added favorite IconButton, concluded my changes to the UI for the day. This is what it is looking like so far!

Next Steps

All in all, today was a pretty fun day. I created the initial catalog with some cool lookin' cats. But there is much work to be done. Next time, I will implement the Cat Info Page.

Creating the Cat Info Page Class

The next stage of this project is to implement my Cat Info Page class, which contains an in depth view of a specific cat from the catalog, listing their stats/special abilities.

In order to do this, I need to create a Stateless class which takes a cat name and returns its formatted jpg image and randomized stats. I will finish this in my next post

Thank you for reading. Feel free to comment with tips/suggestions and follow if you want to join me on this flutter journey!

Github Repo: https://github.com/TannerHornsby7/CATalog

DEV Community: TannerHornsby7

CATalog App: Info Page

The Idea

The Process

Writing the Base CatInfo Class

Navigation Station

Next Steps

CATalog App: First Steps

The Idea

The Process

UI Diagram

Initial Roadblocks

Composing the List

Next Steps

Creating the Cat Info Page Class