Shopping List App
Create a shopping list app that allows users to add and delete items.
In this tutorial, we will create a shopping list app using lists and a ListView. To ensure the list doesn’t disappear after restarting the app, we will save it to a TinyDB.
You can download the source code from the download section at the bottom of the page.
From the [Projects] menu, select [Start new project] and name it “ShoppingList".
See this page for details on the Designer and Blocks Editor.
What You Will Learn in This Tutorial
- How to use Lists
- How to use ListView
- How to use Notifier
- How to use TinyDB
Components Used
Label, ListView, TextBox, Button, Notifier, TinyDB
Blocks Used
Global Variable, If then else, List
Designer
Set the title of Screen1 to “Shopping List".
From the User Interface palette, add one of each of the following components to the Viewer: a Label (Label1), a ListView (ListView1), a TextBox (TextBox1), and a Button (Button1).
Set their properties as follows (component names are in parentheses).
- Label1: FontBold=Checked, FontSize=20, Text="List"
- ListView1: BackgroundColor=Gray
- TextBox1: Width=Fill parent, Hint="Enter shopping item"
- Button1: Text="Add"
As non-visible components, add one Notifier (Notifier1) from the User Interface palette, and one TinyDB (TinyDB1) from the Storage palette.
