Component Parameters, Callbacks, and Expressions to Display Water Log History (WaterApp Part 3)
Hey Builders, welcome to the 3rd video in our Building a Water Tracker series! In this video, Anas will guide you through *creating a screen to display the history of water logs*, where users can view and delete entries.
Here’s what you’ll learn:
How to create parameters of custom types in a UI component to accept data passed from outside.
How to display data passed into a component using custom expressions.
How to handle nullability and show specific outputs when data is null.
How to connect a ListView to a list variable stored in the global state.
How to pass elements from a list to a UI placeholder inside the ListView.
How to pass callbacks from the ListView to each UI component for handling actions like deleting a value
Sections:
00:00 - Introduction
01:02 - Navigating Between Screens
02:50 - Previewing a Component in the File Viewer
03:10 - Creating a logEntry Parameter
04:25 - Setting a Default Value for the Parameter
05:08 - Binding Text to the Amount in the Parameter
05:30 - Using a Custom Expression to Append 'ml' to the Amount
06:40 - Linking Minute:Hour to a DateTime Object in the Parameter
08:26 - Adding Tap Functionality to the Delete Icon
08:44 - Using OnTap as a Callback for the Delete Icon
10:22 - The Issue of Non-Constant Default Values in Parameters
11:59 - Handling Nullability in Expressions
15:26 - Connecting a ListView to a List from Global State
16:55 - Passing Elements to a Placeholder Component in the ListView
19:02 - Creating a deleteEntry Function to Remove Items from the List
22:43 - Passing a Callback from the ListView to Delete an Item
24:18 - Testing the Complete Feature
👉 Sign up and start using Nowa for free: https://nowa.dev/
💡 What is Nowa?
Nowa is the first app-building studio for building *professional-grade Flutter apps*! With Nowa, you can visually build stunning UI and advanced logic for production-ready apps, all with clean, optimized, and scalable code.
✨ Take your Flutter app-building skills to the next level. Be more creative, efficient, and powerful without sacrificing quality or performance.
We’d love to hear your thoughts! Share your feedback in the comments below. 🚀
👋 Join our official community: https://community.nowa.dev/
👋 Connect with us on Discord: [ / discord ]( / discord )
🔗 Follow us on Twitter: [ / nowa_dev ]( / nowa_dev )
🔗 Check us out on Instagram: [ / nowa.dev ]( / nowa.dev )
#flutter #fluttertutorial #mobileapp #mobileappdevelopment #flutterdev #flutterwidgets #AppDevelopment #VisualDevelopment