Lists of Data :memo:

:dart: What We'll Learn Today

Today's adventure is all about lists! Just like how you might have a list of your favorite games or a shopping list, apps can use lists too! We'll learn how to:

• Create lists to store lots of information :clipboard:
• Pick items from our lists :dart:
• Add new things to our lists :emoji:
• Make a cool ListPicker button :emoji:
• Remove items we don't need anymore :emoji:️

Let's Get Started! :rocket:

What Are Lists? :emoji:

Definition: A list is like a magical box :package: that can hold many pieces of information all in one place!

:bulb: Did you know? :star2:

Lists are everywhere in apps! Your favorite music app uses lists to store all your songs, and game apps use lists to keep track of high scores!

Creating Your First List :art:

Let's make our very first list! It's as easy as building with blocks!

Step One: Find the initialize global variable block (it's like naming your list!)

Step 2: Connect it with a make a list block

Step 3: Click the blue icon to add more spaces (we call them "sockets") for your items

Creating Lists with Make a List Block

:information_source: Remember! :bulb: You can put ANY type of information in your list - numbers, words, colors, anything you want!

Picking Items from Your List :dart:

Now that we have a list, how do we get things out of it? It's like reaching into your backpack to grab exactly what you need!

We use the select list item block - it's like a magic hand that can grab any item you want! :emoji:

Selecting Items from Lists

How it works:

• First socket: Tell it which list to look in :clipboard:
• Second socket: Tell it which item number you want (1 for first, 2 for second, and so on!)

:bulb: Fun Fact! :video_game:

Video games use this all the time! When you select a character or level, the game is picking from a list!

Dynamic Lists - Lists That Grow! :emoji:

Here's where it gets really exciting! Dynamic lists are lists that can change while your app is running. They're like a notebook where you can keep adding new pages!

Examples of dynamic lists:

• A to-do list where you add new tasks :memo:
• A high score list that updates when you beat your record :trophy:
• A shopping list that grows as you think of more items :emoji:

Starting with an Empty List :package:

Sometimes we want to start with an empty list and fill it up later. It's like getting a brand new notebook!

Step One: Use the create empty list block

Creating Empty List

Adding Items to Your List :emoji:

Now for the fun part - making your list grow! When someone uses your app and types something new, you can add it to your list!

Step One: Create a text box where users can type Step 2: Add a Submit button Step 3: When they tap Submit, add their text to the list!

Adding Items to List - Form Input

Here's the magic block that adds new items - the add items to list block! 🪄

Add Items to List Block

:information_source: Remember! :bulb: Every time someone adds something, it goes to the END of your list - just like adding a new page to the back of your notebook!

The Amazing ListPicker! :dart:

Definition: ListPicker is a super cool button that shows a menu of choices when you tap it! It's like a dropdown menu in your app!

:bulb: Did you know? :star2:

ListPicker is used in many apps you use every day! When you select your country, choose a language, or pick a difficulty level in a game - that's often a ListPicker!

ListPicker's Super Powers :muscle:

The ListPicker has many special abilities (we call them properties). Let's learn about the three most important ones!

One. Elements - The Choices! :clipboard:

Elements are all the options your users can pick from. It's like the menu at your favorite restaurant!

ListPicker Elements Property

Let's see it in action:

Example of how to use Elements property

2. Selection - What They Picked! :white_check_mark:

Selection tells you exactly what the user chose. It gives you the actual text they selected!

ListPicker Selection Property

Here's how to use it:

Example of how to use Selection property

3. SelectionIndex - The Position Number! :emoji:

SelectionIndex tells you WHICH NUMBER the user picked (1st choice, 2nd choice, etc.)

ListPicker SelectionIndex Property

See it in action:

Example of how to use SelectionIndex property

What's the Difference? :emoji:

Let's see how these three properties are different with a fun example!

Differences between Elements, Selection, SelectionIndex

In this example, if the user picks 'Mcd':

• Elements = The whole menu (KFC, Mcd, BurgerKing, PizzaHut)
• Selection = "Mcd" (what they picked)
• SelectionIndex = 2 (because Mcd is the 2nd item!)

:information_source: Remember! :bulb: The first item in a list is always number 1, not 0! So if you pick the first item, SelectionIndex = 1!

ListPicker Events - When Things Happen! :emoji:

Events are like triggers that make things happen in your app. ListPicker has two super important events!

One. BeforePicking - Getting Ready! :rocket:

BeforePicking happens RIGHT when someone taps your ListPicker button, before they see the choices!

BeforePicking Event

When to use it: This is the perfect time to load your list with fresh choices!

Step One: Wait for the button tap Step 2: Set the Elements (choices) for your ListPicker Step 3: The list appears!

BeforePicking Example

2. AfterPicking - They Made a Choice! :tada:

AfterPicking happens RIGHT after someone picks something from your list!

AfterPicking Event

When to use it: This is when you do something with their choice!

Example: If they pick "Krispy Kreme", you can show a message saying "You have chosen Krispy Kreme!" :emoji:

Example of AfterPicking event usage

:bulb: Cool Idea! :bulb:

You could use AfterPicking to:

• Show different screens based on their choice
• Play a sound when they pick something
• Add their choice to another list
• Keep score in a game!

Removing Items - Cleaning Up! :emoji:

Sometimes we need to remove things from our list - like crossing off items from a to-do list when they're done!

We use the remove list item block - it's like an eraser for your list! :pencil2:

Remove List Item Block

How it works: This example removes the 2nd item from a list called "notes"

Let Users Choose What to Remove! :dart:

Want to let your users pick which item to delete? Here's the smart way to do it:

Step One: Use a ListPicker to show all the items Step 2: When they pick one, use SelectionIndex to know which number they picked Step 3: Remove that item!

Using SelectionIndex property to select items for removal

Here's the complete example:

Complete example of removing selected item from list

:information_source: Remember! :bulb: When you remove an item, all the items after it move up one spot! So if you remove item 2, the old item 3 becomes the new item 2!

---

You Did It! :star2:

Amazing job learning about lists! You now know how to:

• :white_check_mark: Create lists to store information
• :white_check_mark: Pick items from your lists
• :white_check_mark: Add new items dynamically
• :white_check_mark: Use the awesome ListPicker component
• :white_check_mark: Remove items you don't need

You're becoming a real app developer! Lists are super powerful and you'll use them in almost every app you make. Keep practicing and have fun creating! :rocket:

:bulb: Next Adventure! :video_game:

Try making a simple to-do list app or a favorite foods list! The possibilities are endless!