State Management in Nylo 5 | Flutter Framework

Summary

In this video, the host introduces the concept of State Management, focusing on its use in managing the state of a widget in a Nano project. The video demonstrates building a simple shopping cart application with two pages (product detail and account), showcasing how State Management works under the hood. The host walks through creating widgets, updating state across multiple widgets, and handling state persistence through local storage. Viewers learn how to use state functions, update widgets dynamically, and implement controllers for better state management across the app.

Takeaways

• 🚀 The video introduces state management in the context of a Nano project, focusing on its application and benefits.
• 🛒 The example used is a shopping cart widget, demonstrating how state management can dynamically update the number of items in the cart across different pages.
• 📝 State management is crucial for maintaining and updating the state of a widget without needing to reload the entire page.
• 💻 The video provides a step-by-step guide on creating a state-managed widget using the command 'state for widget' in the console.
• 🔗 The 'init' function is highlighted as essential for initializing the widget's state when the app first starts.
• 🔄 The 'state updated' function is key for handling updates to the widget's state from other parts of the application.
• 📊 The video shows how to update the state from different sources, including directly from a variable and from local storage.
• 🔗 The 'update state' function is used to update the state, which can be triggered from various parts of the application, such as a controller.
• 🛠️ The script includes a practical demonstration of creating a button that updates the shopping cart's state, showcasing the reactivity of state management.
• 🌐 The video concludes by emphasizing the ease of creating state-managed widgets in Nano and the flexibility it offers in managing app state across different components.

Q & A

What is the main topic of the video?

The main topic of the video is State Management in the context of a Nano project, specifically how to use it to manage the state of a widget.

What is State Management and why is it important?

State Management is a system that allows developers to manage and track the state of a widget within an application. It's important because it helps in maintaining and updating the state across different parts of an application without needing to reload the page.

What does the video suggest to do before starting with State Management?

The video suggests downloading the Nano project from N.D to get started with State Management.

How many pages does the example application in the video have?

The example application in the video initially has two pages: a product detail page and an account page.

What is the purpose of the shopping cart widget created in the video?

The shopping cart widget is created to display an icon representing the number of items in the cart and to demonstrate how State Management works across different pages of an application.

What command is used to create a state-managed widget in the video?

The command used to create a state-managed widget is 'state for widget' followed by the widget's name, in this case, 'shopping cart icon'.

How does the video demonstrate updating the state of the shopping cart widget?

The video demonstrates updating the state by using the 'updateState' function within the widget and passing in the new state data, which then updates across all instances of the widget without reloading the page.

What role does the 'init' function play in the state management example?

The 'init' function plays a crucial role in initializing the state of the widget when it is first created, setting the initial value that the widget will use.

How is the state of the shopping cart widget updated from the account page in the video?

The state of the shopping cart widget is updated from the account page by calling the 'updateState' function and passing in the new quantity, which then reflects across all instances of the widget.

What is the significance of the 'State data' variable mentioned in the video?

The 'State data' variable holds the last value that was set to the widget, allowing the widget to retrieve and display the most recent state even after the application has been navigated away from and returned to.

How does the video show the use of local storage for state management?

The video demonstrates using local storage for state management by saving the cart's quantity to a collection in local storage and then updating the state of the widget to reflect the changes stored there.

Outlines

00:00

🛒 Introduction to State Management in N

The video begins by welcoming viewers back to the channel and introducing the topic of State Management, which has been highly requested. The host explains that State Management is about managing the state of a widget and that N provides an easy way to do this. They encourage viewers to download the N project from N.D to get started. The video then demonstrates how to build a simple application with a shopping cart feature, which includes a widget displaying the number of items in the cart. The host guides viewers through creating two pages, a product detail page, and an account page, and then adds a state-managed widget to these pages. The widget is created using a command alias 'Metro', which simplifies the process. The video concludes this section by showing the initial setup of the application with the shopping cart widget displayed on both pages.

05:01

🔗 Linking Pages and State Management

The second paragraph delves into linking the product detail page to the account page and creating a simple UI with a button that navigates to the account page. The host then focuses on State Management, explaining how to update the state of the shopping cart widget from another widget without reloading the page. They introduce a new variable 'C value' and demonstrate how to use the 'state updated' function to update the state. The video shows how changes made on the account page are reflected in real-time on the product detail page, thanks to State Management. The importance of the 'init' function for initializing the widget's state and the 'state updated' function for handling state changes are emphasized. The host also illustrates how to persist the state across page navigations by using the 'State data' variable.

10:02

💾 Updating State from Local Storage

In the third paragraph, the host explores updating the state from local storage rather than from a variable. They introduce a 'cart storage key' in the config section, which is responsible for storing the cart's value. The video demonstrates how to implement this storage key and update the 'init' function to retrieve the state from local storage. The host then shows how to save the cart's state to local storage using a button and a function that writes to the collection. They explain that the state is managed outside the class and can be updated from any part of the project, such as a provider or a controller. The video concludes with a demonstration of updating the quantity from a controller, showing the power and ease of managing state in N.

Keywords

💡State Management

State Management refers to the process of managing the state of a widget or application, ensuring that changes in one part of the application are reflected across all relevant components without the need for manual updates. In the video, State Management is central to the theme as it allows for dynamic updates of the shopping cart icon's state across different pages of the application, such as the product detail and account pages, without reloading the entire page.

💡Widget

A widget in the context of the video represents a reusable component within a user interface. The video focuses on creating a 'shopping cart icon' widget, which displays the number of items in the cart. This widget is state-managed, meaning its state can be updated and reflected across the application, demonstrating the utility of widgets in creating modular and maintainable UI components.

💡N.D

N.D is mentioned as a platform or framework where the project is being developed. It seems to be a part of the development environment where the state management and widget creation are being demonstrated. The video encourages viewers to download the project from N.D to follow along, indicating that it's a key resource for the tutorial.

💡Metro

Metro is introduced as an alias for a longer command used in the development environment. It simplifies the process of creating state-managed widgets by allowing developers to use a shorter command instead of a full one. This is showcased in the video where the presenter uses 'Metro' to create a shopping cart widget, highlighting the efficiency it brings to the development process.

💡State Updated Function

The 'state updated function' is a crucial part of the state management process in the video. It is used to update the state of a widget from another part of the application. For instance, the video demonstrates how to update the shopping cart icon's state from the account page, showing how this function allows for state changes to be propagated across the application seamlessly.

💡LocalStorage

LocalStorage is a web storage mechanism that allows data to be stored locally within the user's browser. In the video, LocalStorage is used to persist the state of the shopping cart across sessions. The script shows how to save the cart's state to LocalStorage and retrieve it when the application is loaded, ensuring that the user's cart remains consistent even after the browser is closed and reopened.

💡Controller

A controller in the context of the video is a component that handles the logic and data flow of the application. The video demonstrates moving the state update logic into a controller, which then manages the state updates for the shopping cart widget. This illustrates the concept of separating the UI from the business logic, a common practice in modern application development for better maintainability and scalability.

💡Product Detail Page

The 'Product Detail Page' is one of the pages created in the application to demonstrate state management. It is where users can view details of a product and is equipped with the shopping cart icon widget. The video uses this page to show how state changes in one part of the application, such as updating the cart's item count, can be reflected in real-time on this page without a page reload.

💡Account Page

The 'Account Page' is another page in the application used in the video to illustrate state management. It is where users can manage their account settings, including updating the quantity in their shopping cart. The video demonstrates how changes made on the Account Page, such as updating the cart's quantity, are instantly reflected on the Product Detail Page, showcasing the cross-page state synchronization capabilities.

💡Init Function

The 'init function' is mentioned in the context of initializing the state of a widget when it is first created. The video explains that this function is important for setting the initial state of the shopping cart icon from LocalStorage. It is used to retrieve the last known state of the widget, ensuring that the application starts with the correct data, even after a browser refresh.

Highlights

State Management allows managing the state of a widget easily in NLO.

The shopping cart icon is created as a state-managed widget and displayed on both product detail and account pages.

Using Metro simplifies command execution for project management in NLO.

State Management enables seamless updating of widget data without reloading pages.

State updated function is used to update the state of a widget dynamically from another widget.

State data retains the last value set to the widget, allowing continuity between page navigations.

The account page allows updating the shopping cart quantity, reflecting the changes in both pages.

Widgets can display in multiple locations simultaneously, reflecting synchronized state updates.

The init function is crucial for initializing widget state during the first app launch.

State Management is extended with local storage to persist shopping cart data across sessions.

The cart data is saved in local storage using a unique key and retrieved during widget initialization.

Local storage integration enables persistent state even after app restarts, enhancing user experience.

The update quantity function is abstracted into a controller, separating logic from the UI components.

The state can be managed outside the widget, like in controllers or providers, for modular design.

Creating a state-managed widget is simplified with the make command in NLO, which handles initialization and customization.

Transcripts

hello and welcome back to the channel in

today's video we're going to take a look

at State Management uh this has been

quite a requested topic on the channel

so we'll do our best to explain what it

is and how you can use it in your Nano

project so just to give you a recap or

an overview of what it is um State

Management allows us to manage the state

of a widget and um in N under the hood

we have an easy way for you to do that

so if you haven't already definitely

head over to N.D and download the

project to get started and if we head

over to the project uh and just build

and run you should get the same example

here so uh with that done um let's take

a look at like an example so let's build

an application that has a shopping cart

and this shopping cart is going to have

a icon of how many items are actually in

the cart and we'll just have two pages

at the moment just to kind of

demonstrate how it works and we're go

into some more examples in the video but

yeah let's first create those pages so

from the console let's just create our

first page so we'll create like a

product detail

page and then let's also create a

account page as well like an account

page and then the next thing we'll do is

create our widget so this is going to be

State managed in NLO uh all we need to

do is run state for widget and then yeah

we can just add the name so this is

going to be the shopping cart Widget

icon um and you can see it's created

that for us here just by the way if

you're wondering what this is Metro um

Metro is essentially uh this long

command here um you can actually just

run the same commands from the console

using this but uh I've created an alias

so that I can just use Metro um there's

some documentation on the N website if

you want to just use Metro like I am in

the video so yeah let's start adding the

widget now to our page pages so this

icon is going to be displayed in the

yeah top left hand corner so let's go

over here and just like add it as like

an action so here we can just add like

shopping

cart there we go and yeah we'll just do

the same for the other page so on the

account page we're just going to also

add shopping

cart just like

that so what we'll do is we'll set the

product detail page as the initial page

so if we build and run now you should

see yeah the product detail page and we

also have our widget being displayed in

the top right hand corner but uh yeah

let's just customize the look of this so

it will be like a really simple

widget so from the product detail page

what we also want to do is connect it to

the account page so we created a page

previously here account page and what

we'll do is just create like a simple UI

um I'm just going to create like one

button just say go to let me just call

it

account account

page and then we'll just do

untap and then we'll just route to the

account page so if we just try this you

can see it takes us to the account page

and we can also come back as well so you

can see that's working and we also

seeing the other widget that we created

so the widgets are um both the

same so now let's take a look at some

State Management so inside our widget uh

at the moment this is hardcoded and if

we set it to five you see updates and if

we do it to one um but what we want is

to update it from another widget so what

we can do is use the state updated

function here and this is where all the

magic happens so

uh let's create a new variable inside

here let's just call it C value and

let's just set this equal to zero for

now and inside here what we're going to

do is just set the the value equal to

data for now and we'll just update this

equal to that

value just do a pass and say it like

that so at the moment it's working as

you can see we have zero here and if we

go to the account page we also have zero

but um yeah let's imagine we want to

update the cart now from the account

page and we want also and we also wanted

to update the product detail page

without having to reload the whole page

so um let's take a look at that example

so on the account page here let's just

add a new

button so GitHub copilot helped me out a

little bit there but um essentially

what's important is that you use the

update State function like this and then

just pass in the state that you want to

update so this will be for your widget

so we just need to pass in yeah shopping

car icon. state and then here where

we're setting the data so let's just try

that so yeah if we go to the account

page and update quantity you'll see we

get two if we head back you'll see that

we also see two as well so that's

matching up but um if we go to the

account page again you'll see that that

value is now reset back to zero and

that's because we're not setting this

value um so so in this init function

what we need to do is call State data

like this and uh State data is going to

contain the last value that was set to

the widget so in our case it would be

like number two if we build and refresh

and we set this to two now and then if

we go back to the page you can see now

it's setting the data correctly uh if we

just print this out just to show

you uh run it in the console let's just

build and run so at the start we have

null this is the first time the user

would boot up our app this value would

be null um cuz we haven't set any data

to it but if we go to the account page

and then just update the quantity so now

it's two go back and head over again now

you can see it's setting equal to two so

that's all working

um and yeah that's like one example of

using State Management in N so from any

widget now uh head back over to the

account page and set this equal to let's

just do like 9 or eight uh update

quantity you can see update across our

widgets and we could display this widget

in as many places as we wanted we could

even add multiple of the same widget

here uh just to go a bit crazy and um

let's just update the quantity one more

time so let's just do it hardcoded for

now like this and if we update four and

you can see it's updated the state of

all those widgets so yeah this is kind

of like an easy example just to help you

see how it works um the inip function is

important for when the widget is first

initialized for the first time and state

updated is important when you're using

the update State function cuz uh any

data that you pass into here is going to

be passed into here and that value can

also be retrieved using the data uh the

state data variable there so let's take

a look at another example for updating

State um let's update it from local

storage instead of getting the data from

this variable um what we're going to do

is just go over to config so in here

I've created a new cart storage key and

all it's going to do is be responsible

for storing the the value for the cart

so uh let's just Implement

that

so with that done I'm also just going to

update the init function as well because

this is going to have to change slightly

since we're getting it from local

storage now so here what we'll do is

just do the exact

same and uh that's all we need to do so

now we can just start adding stuff to

our local

storage um and we'll just keep the same

Button as well so let's go head over to

here and instead of using data like we

are here

let's just write a quick function to

save it to the

collection okay so with this done um

anytime we click the button now we're

going to be saving this object to the

collection that is in local storage and

essentially it's going to build up an

array of this this object so it's going

to end up something like this but yeah

it'll be one at a time so and below here

we're just updating the state like

before but this time we're not passing

in that data parameter we're just

calling update State and all that's

going to do is just call the exact same

function here so uh let's give that a go

and see what

happens so on the account screen if we

update cart and the moment we have one

now we have two if we go back you can

see we have two as well if we head back

over to the account page we still have

two so the state is being managed uh

from outside the class and um it makes

you can kind of see how easy it is to to

handle that and for example this code

could be anywhere in your project so it

could be in one of your providers it

could be in a controller we could do

that now as well just create a quick

controller and yeah let's just add that

controller and now let's just move this

piece of code into the

controller so let's call it

update quantity

so yeah this will be doing the exact

same as what we was doing before but

we're just doing it from a controller

now so now we can just run on uh

widget controller just say update

quantity like so and if we build and

refresh over here update quantity you

see it's been updated and that's all

happening from our controller which is

outside of our widget so um you can see

updated here as well so really powerful

and really easy to kind of get started

um so in N the easiest way to create a

state manage widget is just by calling

make and then state for widget and then

here we can specify the name of it just

like we did before uh let's just call it

maybe like like icon like that and then

it's just going to appear in your

resources. widgets like so and you can

see we get the same structure as we did

before so so we can start to then

customize uh what happens when the state

is updated but yeah I hope you've

enjoyed and I'll see you in the next one