RIOT Games Merch — Mobile Version

I’m trying to create an Android application for Riot Games merchandise using Flutter.

Rasyiqal Fikri
3 min readSep 7, 2023

User Flow

Here, I have created a User Flow for the mobile version of the Riot Merch application. I have designed a user flow that is commonly found in online shopping applications.

user flow

UI Design

After creating the User Flow, the next step is to design the user interface (UI) using Figma software. This is done to identify design issues before starting actual development, thus saving time and resources.

Here, I have created the five main pages of this application, including the Splash Screen, Home Page, Featured Page, Item Detail Page, and Checkout Page, as well as the Login Page and Register Page.

Creating a Local API

Because I couldn’t find an open API from Riot regarding the merchandise they sell, that’s why at this stage, I created a manual database containing images, prices, and descriptions of the items that will be sold in this mobile version of the RIOT Merch.

Converting Data to JSON

In Flutter application development, converting data to the JSON format is an essential step that plays a crucial role in various aspects of development. JSON format is a commonly used way to represent and exchange data within applications.

This process is used to present an accurate list of products from the e-commerce server to the users and is applied in various contexts, including data retrieval through APIs.

Slicing

This is the result of slicing and fetching data for the mobile version of Riot Games Merch.

For the complete code, you can check it out on my GitHub.

Thank you … :D

--

--

Rasyiqal Fikri
0 Followers

Mobile Developer | UI/UX Enthusiast