Making the Escapists Crafting Guide App — Foundation
Tags: dart, flutter, python, guide
Published: 2020-12-17 09:44:45

**Original Post**: https://aldnav.com/blog/making-the-escapists-crafting-guide-app/

This is a part of a series of my journey into mobile application development. I am learning Flutter and I enjoy using it to make apps. The widgets are just amazing. Right off the bat, one can easily focus on creating apps, and making it beautiful, with very minimum learning curve.

Revisiting Steam games I bought but played only a little, *I know I'm not the only one*, I scroll through my library and found __The Escapists 2__. TE2 is a surprisingly fun game. You play as a prisoner making plans to escape. You also do daily routine as an inmate, jobs, and favors included. And of course, find the right tools to help you escape. Some items can be bought from shops while others can be looted, and crafted to make more sophisticated tools.

In game, you can view the crafting menu under your profile. Most of the times, I list down which tools I need to craft and the take note of the intelligence level required. I found an opportunity to write an app for it so it's easily accessible to me while I go around looting. It will save me time to not drop off items only to realize I need it at a later time, or found it on a desk and ignore it. Eventually, I would memorize all the components. _Naah, seriously I just want to create the app also while learning Flutter_.

Things the app should do:

1. List all tools that can be crafted

2. Searching by entering some keyword matching the name

3. View details of the tool

That should be fine for now. Remember, I am just saving some papers.

## 1. All tools

I won't be building the whole library but will build on top of [Gamepedia's The Escapists Wiki on Crafting](https://theescapists.gamepedia.com/Crafting). A python script scrapes this page for the info found on the table and crawls on the individual tool's pages to scrape more information. The output is a JSON file which our app will be reading for data.

![Wiki page as input and JSON file as output](https://dev-to-uploads.s3.amazonaws.com/i/9o25kibo0yqbciv99ge8.png)


What the script will do is to save information about the tool/item, and the requirements, and the intelligence required. The tables are not at all uniform but more info is good. For each tool, the scraper will also fetch some more information on the individual pages.

The script will improve as I get more information or fix issues.

{% gist https://gist.github.com/aldnav/d1ff2d12953351c88ca8dde0b09a3f88 file=script.py %}

I can now use this as a data asset.

![Using our scraped data in the assets](https://dev-to-uploads.s3.amazonaws.com/i/2mwo7dv7qep66bxsmrjf.png)

## 2. Search

For this functionality, I will be using two widgets. A `ListView` and a `TextField` with a ``TextEditingController``.

The `ListView` will display the list of items. This is suitable for small as well as long lists as the widget uses lazy loading.

{% gist https://gist.github.com/aldnav/d1ff2d12953351c88ca8dde0b09a3f88 file=listview.dart %}

Now I need a text field for search, and update the list while the text is being typed.

{% gist https://gist.github.com/aldnav/d1ff2d12953351c88ca8dde0b09a3f88 file=searchtextinput.dart %}

Here's what the list view looks like.

![List view](https://dev-to-uploads.s3.amazonaws.com/i/cbiixldnrnpninpqlvur.jpg)

## 3. Details

Now the app needs to add a detail screen of the tool where we display the information.

First, update the `ListView` to navigate to the detail screen when tapped.

{% gist https://gist.github.com/aldnav/d1ff2d12953351c88ca8dde0b09a3f88 file=listview_2.dart %}

Then make the actual detail page. It's just a simple `SingleChildScrollView` with many text field.

{% gist https://gist.github.com/aldnav/d1ff2d12953351c88ca8dde0b09a3f88 file=detail.dart %}

Above is just a sample and not styled yet. Here's what the app looks like with some styling.

![Detail view](https://dev-to-uploads.s3.amazonaws.com/i/9dghx276avfywwstad6u.jpg)


## Conclusion

The app is far from complete. Improvements I am considering:

- A separator between categories on the list view
- Improve the scraper to parse and get more of the details correctly
- Improve the data structure to include relationships between components
- Ability to view a component tree on the detail page using the relationships from the aforementioned improvement
- Tapping the image of a component from the detail page to also navigate to it's own detail page

- Use Firebase and fetch updates to data over the network
- Transitions, animations, and theming!



On the next part, I will be sharing what I learned while making improvements to The Escapists Craft app. ¡Hasta la próxima!



#### References

- Gamepedia The Escapists Crafting Guide https://theescapists.gamepedia.com/Crafting
- Flutter cookbook: Handle changes to a text field https://flutter.dev/docs/cookbook/forms/text-field-changes
- Flutter cookbook: Working with long lists https://flutter.dev/docs/cookbook/lists/long-lists