Theory
๐ฑ๐งฉ 5. Bucket list App
๐ What is this app about?
- This app is like your digital shopping list, helping you keep track of what to buy.
- You can easily add items to your list and remove them when they’re in your cart.
- The app’s design is fresh and friendly, with colourful buttons to make shopping fun.
โ๏ธComponents used in this app
List View:
- ๐ The List View component in App Inventor is like your toy chest’s list of treasures, showing all your cool toys in one glance!
- ๐ It’s super easy to use โ just tap on an item in the list, and it’s like choosing which toy to play with.
- โจ You can make the list look pretty by changing its colors and making the words big or small.
- ๐ Like a bookshelf, it keeps everything organized so you can find what you’re looking for really fast.
- ๐ And the best part? You can update it anytime, adding new items just like new toys to your collection!
๐ฉโ๐ป Designing the App:
- Set Up the Screen
- Start a new project in App Inventor and you’ll see ‘Screen1’.
- Drag ‘HorizontalArrangement1’ to the top of your screen.
- ๐ ๏ธ Add Buttons and a Textbox
- Inside ‘HorizontalArrangement1’, place an ‘Add Button’, a ‘TextBox1’ for typing items, and a ‘Remove Button’.
- Set the ‘Width’ of ‘HorizontalArrangement1’ to ‘Fill Parent’ and stretch it across the screen.
- ๐จ Customize Your Buttons
- Change the background colour of ‘Add Button’ to light blue (#b2ffbff) and text to “Add”.
- For ‘Remove Button’, choose a soft pink (#ffb99eff) background and label it “Remove”.
- โ๏ธ Style Your Text Box
- Set ‘TextBox1’ font size to 15, making it easy to see what you’re typing.
- ๐ Create the List View
- Below the ‘HorizontalArrangement1’, add a ‘List View’ component named ‘Market List View’.
- Set ‘Market List View’s background colour to a soft grey (#c8ffff) and height to ‘Fill Parent’ to fill up the rest of the screen.
- ๐ฎ Test It Out
- Now it’s time to play with your app in the emulator or on your phone.
- Try adding and removing items to see how your shopping list works!
๐ฉโ๐ป Coding the App:
- ๐งโโ๏ธ First up, we’ve got a magic spell called initialize global carry Bag which creates an invisible backpack to hold all our items. It’s empty at first because we haven’t collected any items yet.
- โ๏ธ When we press the “Add” button, here’s what happens:
- ๐ Our invisible backpack (carry Bag) opens up.
- ๐ฅ Whatever we wrote in the Text Box (that’s the space where we type stuff) gets put into our backpack.
- ๐ Then, our app’s list (called Market) gets updated so we can see everything we’ve put inside the backpack.
- โ Now, when we press the “Remove” button, it’s like using a magic eraser:
- ๐ It finds the item we selected in our Market
- ๐๏ธ Then, poof! It takes that item out of our backpack.
- ๐ And just like before, it updates the Market list so that item isn’t on our list anymore.
So, every time we add something, it shows up on our list, and every time we remove something, it disappears from our listโlike a magic show with our shopping! ๐๐๏ธ
๐ What Other Apps Can You Build?
- ๐ A homework tracker app where you add subjects and cross them off when done.
- ๐ A star-gazing app where you list constellations to find and check them off as you spot them.
- ๐ฎ A party menu app where you add dishes for your party and remove them as they’re ready to serve.
With App Inventor, you’re the artist and the screen’s your canvasโgo ahead and paint it with your ideas!