FlutterFlow Course: Local Storage/Notes App

hello everyone in today's video I'll be teaching you how to save data locally in reduction we'll be creating a note-taking app and saving the data locally in the phone and it will require no internet connection this video is actually a part of my filter flow course if you want to learn more you can check out the link in the description and start learning from scratch for Notes app first we will be building our user interface of our Notes app we will require two screens for a Notes app so let's create a new screen and name it add notes so now we have two screens over here this will be your main screen and this will be our screen to add new notes to our application so let's add an app bar to our main screen and add a title in the main screen so the title will be notes app and we'll be coloring it as white okay so we don't need the default button so we remove the default button from over here on the other screen we'll be adding the default button which will be used to navigate back to our home page and the text will be add new note okay so these are or two screens over here so in the main screen we'll add a floating action button to navigate to our add node screen and we'll be writing our note over here and we'll be saving it and the node will appear over here okay so for that let's add a floating action button okay so now we have added a floating action button will also be adding an icon for floating action button and icon will be a plus sign and the color of the icon will be white so let's take a look at the theme of our application so as you can see there is a option to explore themes we can set the primary color and secondary color of our app to a different color for example if I select this color as you can see that the app color has been changed to this uh grid this this yellowish color uh now we'll be changing it to a black color for our application okay so as you can see that the color of the app bar and The Floating Action button is now black and it will make the changes in all the screens of our application so let's click on Save changes now what we need to do you need to when when we click on sorting action button we need to navigate to our second screen for that we'll add an action over here and action will be navigate to add node screen so whenever the floating Account button will be clicked it will navigate to our add node screen so in this add node add new node screen we'll be adding a text field to create a new node so let's add a text field over here so as we already know to decorate the text we will be wrapping it inside a container and and we'll be giving it a height of weight of 90 percent and we'll be wrapping the column inside a row and row will be main XL alignment center okay so now uh we we will decorate the container we'll set the Border radius to 20. as you can see that the Border it is 20 now other than that will be Auto uh also adding uh padding at the top of the text field so as you can see that we have added padding at the top of the text field other than that we'll remove the height of the container and here is the another option we have to set the max line of our text field we'll set the max line to 5 as we can see that the text field size has been increased so five flights can be added at a single time so you'll be setting it to 10 okay so it looks good now as you can see I'll be also adding a leading icon to a text field let's have a look at an icon so we'll be setting this as our icon and we'll color the icon as black and we'll also be adding a hint text forward text field enter not here okay so here we'll be adding the notes over the application let's add a padding over here we'll add a padding of 20 and we'll remove the padding from detox field we actually needed to add the padding for the container so here we'll be adding the new nodes and we'll add another button over here to save the new node so for that we'll be adding a new button we'll set the padding of the button to 20. and we'll be decorating the button by setting the Border radius to 20 okay so as you can see that circular button Okay so now that we have built the user interface over app we need to add uh some local storage to save one nodes for that we'll be clicking on local state and we'll add a new static variable and the variable name will be nodes and the nodes will be a list of strings and we'll set the persisted property to 2 which means that the data will be saved locally in the storage of our mobile phone so when the website or app is refreshed the data will be saved in our application and it will retrieve the data into the app okay so now that I have added a new local state over here I'll add a list view over here so listview is basically used to display a list of content so let's deploy a list over here so as you can see that I've applied a list view over here so in the list view I will add a container and inside the container I'll be adding some text okay so as you can see that I have added a container with some text inside a container we will set some properties of the container so for that select container from over here and set the height of the container to empty so as you can see there is another container is taking the space of the text inside so now we need to set some padding to left side and right side so I've set it a padding of 10 . the left and the right side of the container also add some padding at the top and bottom as well so now what do we need to do next so you'll have to add some padding to the text as well so let's have add some padding over here I'll set the adding or padding of 20. okay so as you can see that it looks much better we'll add some border radius to our container set the Border radius to 20. as you can see that in the container is circled now okay so now how can we get data from the local storage to our Notes app so for that click on list View and there will be an option for Generate Dynamic children click on that option and write a variable name I'll write it as nodes and set a variable from local state and nodes after that we'll set the option to map list items so when we click on map list items it will get all the items inside the list and show it inside our app now click on confirm and as soon as we click on confirm it will regenerate children's inside the list okay so click on the text now and set the value from the variable and select notes item from over here and now it will show the item inside the in the list of nodes so now what do we need to do next now we need to add some notes inside our app so for that we'll set some properties in the button so we'll rename the name of button set it as add note mm-hmm so whenever the button is being clicked we'll set that update local state and we'll add the field the notes list and set as add to list and what do we want to add inside the list we want to add the data which we have written inside the text field so select it from variable and the variable will be widget state and enter node here so all the text which we have written over here will be added inside the list okay so as we are done from over here so what else we can add over here we need to add another thing first wrap this text inside Arrow and now we need to add an icon button to delete the notes item so click on row and select as space between and click on icon button and select the icon type to delete so as you can see that it appears over here set icon size to 20. so when the icon button is being clicked we need to add an action to remove this specific item inside the list We'll add an action over here we'll update the local state what do we need to do we need to remove from list a specific value or from variable we need to remove a value form variable and which is the nodes item so it will remove the notes item from delete whenever this icon button is being clicked so let's remove this section from over here and use it inside on long press so whenever the button is being long pressed the item will be removed okay so let's try our application now thank you okay so now the app is running here so first of all we need to turn off the Dark theme from over here and now we need to refresh save the project and instant reload the application we'll set up the Dark theme in the future okay so as you can see our Notes app now we need to add a new node over here now so click on add note and write a new note over here one thing that we have been missing is that we need to navigate back whenever we add a note so click on action through editor and add a new action and set it to navigate back so when the node button when a new node has been added it will navigate back to the home screen so save it and instant reload the application again okay so now that our application is fully ready let's add a new note for example I am adding this node over here as you can see that the node is appearing over here but there will be an issue over here the issue will be that when the text will exceed this place it will overflow as you can see over here this is one of the most common issue in flutter flow and to fix this issue we need to go to home page select a test and wrap it inside a container [Music] and what do we need to do we need to remove the height we need to remove the color of the container and after that we need to set the width of the container to 70 percent so it doesn't exceed this place over here or okay so now that we have added the weight over here now click on Ctrl save and instantly load the application so let's add a new note over here so as soon as we add a new note you can see that now the text does not exceed the specific area and stacks below into an into a new line so it works completely fine let's add another note over here so we are adding another note as soon as we click on add note you can see the note over here so we have three nodes now so let's try to delete a node to delete a node we need to press and hold the delete button so as you can see if you hold the delete button the node will be removed from the application so as we have made this persisted if we click on refresh for instant reload so you will be seeing that the text over the node will not remove from the list because the data is persisted and saved okay so now let's add another thing over here we need to add a counter for notes over here so for that let's add a text over here and wrap the text inside a container and other than that we'll set the text inside a row and align it into Center using a series hello world is in the center now and we'll set the value from the local state and the number of items and we click on confirm other than that we'll also add will also remove the weight and the height of the container so it will take the height and weight inside the text okay so other than that we'll add some padding on the left side and the right side and plus we add at the top and the button okay so now that we have added these properties we'll also select some border radius power over counter to set the Border radius to 20 as you can see that it shows now the border radius okay so let's save it and try to instant reload our application see the changes okay so as soon as it get loads you can see the counter over here and it show it which it basically shows number two but because there is a debug Banner over here you can not easily see that let's add another note and you will see that the value is 3 now and we can add new values and it will show four now and it will increase time by time and as soon as we remove an item from the list it will remove on number form over here so this is our Notes app we have used local storage to create our nodes app in the future video we'll be using Firebase to connect this application with the file store and internet and we'll add some more of new features inside our Notes app in the future videos okay so thank you goodbye

Channel: Development Hub

Views: 9,267

Keywords: FlutterFlow, Flutter Flow, Dart, Flutter, No Code, Local Storage Flutterflow, Flutterflow teach, flutterflow course

Id: zMb4KdJLBZw

Length: 19min 19sec (1159 seconds)

Published: Sun Jan 01 2023