State Management in Nylo 5 | Flutter Framework
Summary
TLDRIn 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
🛒 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.
🔗 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.
💾 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.
Mindmap
Keywords
💡State Management
💡Widget
💡N.D
💡Metro
💡State Updated Function
💡LocalStorage
💡Controller
💡Product Detail Page
💡Account Page
💡Init Function
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
Посмотреть больше похожих видео
Learn Redux Toolkit in under 1 hour
useState Hook | Mastering React: An In-Depth Zero to Hero Video Series
Vuex State Management Introduction & Create Store | #35 | Vuex State Management Vue js 3 in Hindi
Redux - Complete Tutorial (with Redux Toolkit)
State Update Batching in Practice | Lecture 133 | React.JS 🔥
What are React updater functions? 🔄
5.0 / 5 (0 votes)