📱🧩 4. Choose city App

🌟 What is this app about?

• This app is like a quick tour guide in your pocket.
• It lets you tap a button and pick your dream city from a list.
• The app’s design is simple, with just a label and a button to get you started.

⚙️Components used in this app

List Picker:

• 📜 The List Picker component in App Inventor is like a treasure chest that opens to show you a list of gems, which are actually choices like your favourite ice cream flavours!
• 👆 You tap on it, and whoosh! A list pops up, and you can pick one, just like choosing a toy from your toy box.
• 🎨 You can make it look cool by changing its colour or adding a picture, making it your style.
• 🔧 It’s super handy when you want to give someone options, like picking a superhero in a game!
• ✨ With a List Picker, making decisions in your app is fun and just a tap away, like picking a candy from a bunch!

Vertical Arrangement:

• 🚀 The Vertical Arrangement component in App Inventor is like your own personal stack of blocks, letting you build up instead of across.
• 📚 It stacks things like buttons, pictures, or text on top of each other, just like you would stack your favourite books.
• 🎈 You can play with its size and colour, and make it look just right for your super cool app.
• 🌟 Whether you want your stuff snug or spaced out, Vertical Arrangement is your secret tool.
• 🌈 With this, you can make your app look like a rainbow, with all parts neatly lined up like colors in the sky!

👩‍💻 Designing the App:

1. 📱 Start with Your Screen
   • Open your project in App Inventor and look at the blank ‘Screen1’.
2. 📐 Add a Vertical Arrangement
   • Drag a Vertical Arrangement from the layout section to the middle of your screen.
   • Set the Background Colour of VerticalArrangement1 to light grey to give it a sleek look.
3. 🏷️ Place a Label Inside
   • Drag a Label component into VerticalArrangement1.
   • Set the Text property of Label1 to “City:” to indicate what users are choosing.
   • Make the Text Colour blue, Font Size 20, and Font Bold to make it stand out.
4. 🌐 Add a List Picker Below the Label
   • Drag a List Picker component below the Label.
   • Change the List Picker’s Text to “Choose City” for clarity.
   • Jazz it up with a cyan Background Colour, make the text bold, and set the Font Size to 18.
5. 🎯 Centre Everything
   • Ensure neatness by setting Align Horizontal and Align Vertical to Centre for both Screen1 and VerticalArrangement1.

🚀 Test Your App

• Use the App Inventor emulator or connect a phone to try out your app.
• Tap the “Choose City” button to see if you can pick a city from your list (cities to be added in the Blocks Editor).

👩‍💻 Coding the App:

• 📱 When you pick something from a list on your phone (like choosing an ice cream flavour from a menu), this code comes to life.
• ✍️ It remembers what you picked (like remembering you chose chocolate) and writes it down in a special place so it doesn’t forget.
• 👆 When you press down on the list with your finger (like pressing a button), the code makes the list’s background colour change to yellow, like the sun.
• 🤚 After you lift your finger up, it changes the background colour back to normal, just like nothing happened.

🚀 What other similar apps you can create?

• 🍔 A foodie app where you can pick your favourite snack and it shows you recipes or restaurants.
• 📚 A reading app where you choose a genre and it suggests a book to read.
• 🎨 An art project app where you select a colour and it shows you art supplies to use.

Just like building with Lego’s, you can make all sorts of apps with different pieces in App Inventor. It’s all about playing around and having fun with your ideas!