Complete Diary App with Flutter and SQLite | Flutter Sqflite | Flutter Tutorials | Flutter SQLite

hello guys assalam alaykum in today's lecture we are going to learn how to build a diary app in fletter right first of all we will create our new fletter project project name will be diary app platforms will be only Android and iOS and uncheck others so Android Studio is going to create a new fletter project here you can see the basic uh fletter project is ready let me remove some extra quotes and comments now we will create our home screen uh let me add new directory screens here here inside another directory name as home inside home directory we will make a new. file home screen and inside home screen let me remove uh let me import material package and then we will create State full widget home screen we will here we will return scaffold right inside scaffold uh first of all we will uh uh create our AB bar uh title will be my diary right let me Center it right now here we will uh pass our home screen right right the title uh let me change uh my diary and let me remove debug Banner so keep in mind our application uh will be totally offline right uh it means uh the user when user will write any note and click on save button the note will be saved in local storage of the device right it will not uh store any data online so for this purpose we will use SQ light SQ light database in a fletter uh there is a package sqf light let me show you uh this is a package sqf light we will use this package and in order to use this package we also need another package uh name it as path right now we will add these two package in our project first of all let me add sqf light FL Pub add sqf light this package has been added now let me add path package flutter Pub add path for now we just added these two packages and then and later we will see how to use these packages I Will Show You official documentation now first of all now we will focus on our front end right let me run the application and test it here you can see application has been launched so first of all let me change this uh Color theep Purple to Indigo indigo right now inside home screen we just added this AB bar now I will add uh Floating Action button with plus icon let me add Floating Action button on press for now it will be an amp function and in child I will add uh an icon of add right right you can see here Floating Action button let me uh change its background background color will be primary color theme of context of color uh color scheme not primary right and uh foreground color will be white white no it is looking good nice now uh we will create a body part and a body I will add list view right with padding uh 15 and in child here we will add items uh for example when user click the this button add button it will open a new screen add note screen that we will create later right and when user will enter any uh um note and click on Save button now here the diary app will show here it will show the all the notes here now we will create uh item of the notes how it will look like so inside home I will create a new directory vets inside widget I will create item note item no uh let me import material state less widget item note right with container here inside container uh I will add a row and inside row at the left side I will create a box uh with round cor corner and inside that box I will show uh date right uh month day and year right there will be a container I I will design it later and inside this one I will add another column here I will add at the top I will show uh month name right month name uh December DC right after the month here I will show the date and date will be two and inside date I will show here for now I am just adding as a dummy and later we will design it right so it was the uh box of the date right after that we will add our expanded widget and inside expended widget I will add another column right inside column I will add uh title for the not title this is the title and after this title I will add a description here is the description of this note right now let me add these notes Here item note I'm just uh showing it for front end right you can see it is showing as a dummy right now I will design it so it will look a better right let me give the decoration on this date box box decoration border radius of 10 right and uh for now let me give a red color as a background you can see this is showing nice now I will give a padding let me add padding symmetric horizontally 15 and vertically 5 right now let me update uh text styles for each text box um let me change [Music] it it will show a good so [Music] tole text Style color will be white uh White 70 right for this one so stle will be theme of text theme title large copy with color will be white and font weight will be bold now you can see it is looking better now we will change its text style so stle text stle color will be white 70 nice now we will add uh a space between these text her sized box with height of three and just copy and paste it below here now it is looking good now this part is complete for now now we will give style to our title and description right for this first of all we need to give some space between this date box and this expanded widget right con sized box width of 15 right it is enough you can see our uh column inside our column it is showing in Center everything in Center so we need to show everything uh here inside left side right we need to align this one in left side so there is a property cross AIS alignment we uh set it start now it is showing in start right so let me give a style to the our title style theme of context uh do text theme. title medium nice you can see it is looking good now let me give a a stle to our description let me give me a style to our description uh text stle with font weight of uh w300 height will be 1.5 right it is okay for now uh there is one thing is missing uh we need to give a time here right you can see date at the left side this box is the date box and after the title here at the right uh right top Corner we will add time right so for this one uh we need to wrap our title with row with row so inside this row we will add our a text box right here we will G give a time uh for example 12:30 p.m. and style will be theme of context do text theme do body smal right so we will show it at the end let me add property main space between right you can see it is looking good now there is uh another main thing let me show some main points for example this is a title you can see for now this is uh only on one line for example let me add some extra text in title you can see here no here you can see it is creating an overflow issue let me add uh WRA this with expanded widget expanded you can see still issue is same right our title is uh taking two lines and we want uh to fit this title on one line so there is a property inside text uh the max lines one right so it will take only one line only one line but you know there is a text that has been cut but we want to show three dots at the end of last character to it will show that our text it is uh carry on right to show this uh there is a property overflow and overflow uh we can add ellipses right now you can see it is showing three dots it means I will our title is carryon right so it is good now let me add same thing for the uh description so you can see for now our description is short for example this uh let me add add it I am adding uh a long description uh just for showing you now you can see it is not looking good it is taking uh multiple lines but we want that we want to show only three lines here right in order to show three lines here you can see set a property Max lines three right right that after that there is we can add overflow ellipses right now it is looking good uh one thing is remaining to add margin here you can add margin G symmetrical vertically vertically we will add margin of 10 now everything is looking good you can see our home screen is ready now we will uh create our add not screen right let me add here new screen name it as add note inside add node I will create a do file add node screen import material State full widget add node screen return scaffold right and here inside I will create AB bar AB bar title will be text add not right now when we will open this let me add here inside Floating Action button then user will click this button then add not screen will be open material add not screen right let me click this button now you can see our add not screen has been opened now we will Design this screen so here inside body we will add a column and inside this column we will add two text Fields one for title and one for description let me add text field for title decoration input decoration hint will be uh title right border we will uh give a border outlined input bar right here you can see let me add padding wrap this column with padding padding will be f 15 right now it is looking good let me uh give some b b radius B radius circular 10 now it is looking good this is our uh text field for title now let me just uh copy and paste this for description uh start typing here [Music] right right let me give some space 15 no space is good now we want to expand this uh second text field on whole screen right whole remaining part we will add expanded wrap this one with with expanded widget expanded now you can see it has been expanded on all the remaining part of the screen but it is not showing right uh let me add uh lines inside Max lines if we add Max lines 15 then it will show on whole screen you can see here right title and description it is showing everything right it is looking good now we will add a button here at the top right of the uh Corner save button when user write a note and click on save button uh nodes will be saved so uh we can add here inside AB bar there is a property actions inside actions we can add icon button on pressform now it will will be empty function icon icon here uh icon name done there is an icon done here you can see when user will click this button the note will be saved right so one thing is missing uh we need to uh give controllers to each text field right we will create here two controllers uh uh title and description let me add final title text text editing controller final description text editing controller right let me assign to uh this is title text field controller will be title and this is description controller View will be description right so our front end part is ready right now we will move toward our backend part right so for the back end part we will create a new directory here repository name it as repository repository and inside this repository we will create create our nod repository nod repository here we will create a class nod repository right this is our nod repository in here inside we will create our database our local database right and insert delete update all the operations we will make uh create all the functions to perform each operations right so here we will create some variables like uh database name uh column name uh static constant DB name database name data base name will be Nots database NS database. DB and our uh table name will be table name will be n right let me open the documentation how to use uh sqf light here you can see the official documentation how to use sqf light right here you can read everything they are showing an example of a uh dog right they will create a dog table in their database and uh here you can see create the dog's table insert a dog into the table retrive the list of dogs update a dog in database uh delete a dog from the database right so instead of dog we will use our not right keep in mind here they are showing how to add uh dependencies we already added these packages sqf light and path right so here uh we need to create a model class they have created a model class for the dog but we will create model class for our note right here we will create a new folder uh directory models inside models we will create note a class name note right here we will uh uh Define the attributes of notes right first of all we will create uh ID right you know if you have any experience your previous experience in uh any database you know the ID is a very important thing right we can say it as primary key right I will create it uh it will be null able ID right after that uh you can uh see in our design we have two things title and description right so in string there will be a title and description right and you can see here uh we have date time date and time right uh we need to show here date and time here right in order to use this uh in adult there is a class date time date time class we can name it as created at right there will be an uh date time variable created at it will store the date and time of the notes when it was created right here we will make Constructor R the node Constructor here this do ID requir this dot title requir this dot description requir this dot created you can see we use uh a key word required on all these three but not with this ID why because when we will create our new note right we need to pass uh these three these three attributes right the these three attributes are are mandatory right but this ID will be created in a database we don't need to pass this ID right I hope you got it I hope you all got this right for now this is enough right uh let me see the documentation uh here we have created our model class now we will create our database right in order to create database uh first of all we need to add this line in main function here before R there we will add this one right now this is uh a method we can create our database right if you see here this this one this is all the code right how to create a database and inside database we will create a new table right let me copy this one here open the nod repository function uh class let me create a new function uh name it as database because this function will return us a database here we will create database let me import the packages right let me remove this documentation extra [Music] comments and at the end we need to return this database this database right here we will use a future database right now you can see here we need to give our database name but we already created a variable DB name here we will give DB name DB name right here you can see um db. execute cury here we will write our query it will create our uh first table right here you can see our table name is nodes right here we will use notes this table name uh color symbol with table name right table here there will be an ID primary key right this ID is uh here you can see integer ID this is the ID right after that there is uh we will use here title title and its type will be text and and then we will use a description the it its type will be text right here you can see in note we add these two things right now we will add our created ad but this is not a string or text this is a date time so before uh storing it into the database we will convert this one into text it also will be a text right here let me add created at right it will be also a text now here our database has been created now let us move forward this is a method how to add uh how to insert uh into the database uh in order to add the data into our uh database we first of all we need to convert this data into map right we can convert our DOT object into map by this method right here let me copy and paste it inside our note like this no here by this way we can convert our uh dot object into map we don't need ID we just uh we will just use our title title will be title description description will be description right no created at right okay here this is important step so our created ad you can see this is uh our date time right date time object we will convert it into string do to string right now we are done for now now we will see uh how to insert uh data into our table here we will uh create our function insert insert function this will be an sing function right first of all we will get the instance of our database uh final DB is equal to a wait database right we are going to access this function right by this way right so when user will call this insert function it need to pass uh not object right here let me add required not not here so when user will call this insert function he will pass a note object right here you can see here there is an insert dog function here user pass a dog right so here uh by this way we can add data into table let me copy and paste it here here uh the table name uh our table name is uh table name is nodes let me add change the table name table name notes we need to add here note not do two map right this two map function is here right you can see it will convert our DOT object into map right key value pairs let me make these functions static static insert also will be a static function static means uh for example this insert function is a static function we can call it here by using its names class names nod repository do insert right we don't need to create the object of this nodes repository we can call it directly this is the benefit of static function right now our insert uh function is ready now we will open our add not screen and call this function and we'll pass our data right first of all here we will create a new function name it as insert a note right and inside this we will call our insert function not repository do insert this is insert function here we we need to pause our not here we will create our not not we need to pause three things right title description and created at right let me formate this here the title is title do text right description will be description. text right and here uh created it we need to give current date right current date and time date time do no right it will uh give us current date and time right here we will pass this note and we are done right it will add our date into the table this is uh let me add a weight because this is an sing function right our insert uh node function is ready now let me add this here here you can see there is a button um let me open this this is a button right uh this is save button here we will call our insert function insert start not function right well let me uh run the application right let me try this uh title will be this is first title and inside description here is the description of this note right let me click the button let me see here if there is any error you can see there is no error here it means our nod and not has been added successfully right now our next step is we will fetch all the notes from the database right here you can see retrive the list of dogs right but in our case we will rety the list of no right this is function we will first of all we will make a function let me copy it here inside no repository we will create a new function static uh name it as get nod right sing function right here we will paste all the code here let me remove something this will be like database will be right this is a way to fetch all the data from the table here table name our in our case table name will be table name right now this uh Maps variable has all the data from this table name this table right now you can see our whole data is in a Maps right but we need our data in list of notes right here you can see uh there is a method to convert our uh our list of map into list of note right in this case you can see there is a dog but we have not not right ID will be remain same but here here we have a title Title Here we will use Title Here uh the same Keys as we have used here right title description created at right here uh will be [Music] description description as string it because this is a string right and third one uh is important right created at because this is date time right we need to convert our uh this string into date time right there is a method date time. par right here we will give uh Maps I created at right as date time right I hope you all got this uh let right it will convert our list of maps into list of notes Here we will use [Music] future uh list of note it will this function will return not list of not right now let me implement this in our home screen you can see inside our home screen uh in a body part we just use a dummy uh data here now I will remove everything here right I will use a new widget there is a new wiget future Builder right uh let me add future here here there is a property name future here we will call a function or anything that uh will take time right uh you can see notes repository dog notes right because get not function is a future function right future it means it will take a time you can see a wait here is await right it will take some time right so that is why uh let me open home screen in our future Builder another parameter is the a builder here inside there is a function first parameter is context second one is Snapshot right so here we can return a vet by using any condition right for example our we have got we got a notes list of notes right then we will show all the notes here and for example there is no data then we will show a message empty first of all let me check if snapshot do connection state is equal equal to done connection state do done right here we will check another condition if snapshot do data is equal equal to null it's uh data is null or snapshot. data do is empty in this condition we will check if there is no data or a list is empty right then we will show I have return aidet center child text empty right it means when there is no data right it will show empty right and for example there is a data right then we will show a list list view list view right a padding will be 15 inside child right here we will use uh for Loop to add the wigets right right for the note in snapshot do data right here we will add item note right I hope you all got this and if you can see this condition if if this condition is false then we will return a size box right nothing here you can see this part is important right you know we already created an item not right this one this widget right here uh we need to pass not in order to show the actual data Final note not let me add here uh required this dot do not right now instead of this uh dummy data we will uh show actual data uh first of all we will add we will show here this is title instead of this we will show not. title right uh and here a description for now we are showing only title and [Music] description not. description right right now here we need to pass the not here we can pass our note right now you can see it is showing the data right it is showing actual data right because we have only one note in our table so it is showing here right now our title and description part is okay but we need to show uh the date right date and time here right how we can show let me open item not right here uh there is a package FL package Intel this package is used to formate the date and time right you can see uh read uh the documentation here right now we will add this package in our project flutter Pub add Intel right now we will uh use this package to formate our date and time let me use it here you can see uh here we just hardcoded this this number DEC right now here we will use our uh date time uh date format function date format so this is a function of date format here we will use for format do formate here we will pass our date not do created ad now here we can pass our string to formate the ad date right here we can use date time dot uh abbreviation month a month abbreviation right so in this way uh we can formate the date and time uh let me add here let me add dat format let me add date for me here we need to show uh uh day of month [Music] month day right do formate not. created at you can see we are formating our date and time with the help of this created ad uh variable here you can see [Music] right right here uh this is a year let me date formate date for me. [Music] year here we don't need to formate we can write directly no do created at do share do2 string right right you can see uh here it is showing December two but we need to show only we want to show only two okay right now you can see is okay one thing is remaining this is time right here we can format this time also date format date format DOT hours hours minutes do format node do created at now you can see it is also showing time let me add another note give any title and description and click add here you can see it is not showing so we need to restart the app in order to show updated notes let me restart now you can see it is showing another note so we need to refresh each time to show updated notes Here we can add a button and icon button in actions icon button on press in unpressed uh let me give set state right icon refresh right so here we can update the notes refresh the notes by clicking this button let me try this add a new note and click save now let me check right you can see it is showing updated noes no one thing is remaining when user will Click on each node it should open the uh same screen with content here inside this one let me wrap this with G gester detector gesture detector on Tab here inside on Tab here we will move toward not screen add not screen but we need to pass the current note inside this screen let me add another an optional an optional not null able right it's null able mean it is not mandatory to pass this note this dot not right after that let me add a new function init function this is in it it will called when uh we will open this screen so here we will check if uh vget do not vget do not not is equal to right widget do notes means this note if this note is not null then we will uh update the text title. text is equal to Jet do not. title right description. text is equal to wiet do not. description right now let me test it if I click this button let me add here note note let me click on this note you can see it has opened a not screen with content right now we need to add another function in nod repository to update this was insert function now we will add update function let me open the documentation here by using this uh way we can update our note let me copy [Music] it static update required note not I think right database uh here table name will be table name dog in uh place of dog we will add a not not. map not do ID right let me remove comments so this function will update our note right here in add not screen let me add new function here let me copy and paste insert function right Update note here we will create uh same but in created that we will add our wiget do not do created at right because we are going to update the Note right so the previous date will be used previous date uh actual date of the notes here instead of insert we will use update so it will update our note here here we can use it in on pressed we can use a condition if uh digit do not is equal to null it means we are going to create a new note right we will use insert node and if it is not null then we will use update node right in this way it will update our nodes let me test this there is an exception uh let me remove this right no it will work here this is First Title let me change it to this is second title now let me update this now we will check if it is updated or not so here you can see it is showing an exception because we don't pass an ID uh here inside at note update note we need to pass ID here ID will be widget. not. ID right no it will work you can see there is no error no it will update our note Let me refresh here you can see the note has been updated right now we have insert update right now we will add a new function to delete delete we want to delete this uh note right here we can create a new function delete delete here we will pass not asnc if you see the documentation here is Method how to delete uh how to delete data from database let me copy and paste it here uh database will be database uh here table name will be table name here ID will be node. ID right no here inside uh item note here inside add not screen we can add new function delete Note S sync function here we can call uh nod repository do delete here we will pass our widget do not right and then when this node will be deleted we will use here and then function and inside this function we will close this uh screen Navigator dop right this is a way now if you open this screen here we will add our delete icon here before save button let me add new button on press icon delete right uh let me use it before this one here you can see no for example a user create click on this button plus then it should not be show here right it will only be show when user click here right so we can check the condition here uh if vdet do note is equal equal to null not is equal to null then this button will be show otherwise it will show size box right I hope you got it now if we click here in order to create new note then delete button will be height right and if you click already uh existing noes then delete button will visible now when user click delete button button let me show a dialogue show dialogue context context alert dialogue here inside alert dialogue let me add content cont text are you sure you want to delete this note right here in action we will add two buttons text buttons first uh function will be no [Music] child no when user will click this button it will show a dialogue here we just add no right no when user will click No it should uh disable this dialogue right uh this here user can Navigator dop right in this way dialog will be right right no and okay now we will create a button for yes here uh yes right here after uh this line here we need to call our delete function delete note function right in this way now let me delete this note when user will click uh delete button and click yes it will delete the note this note has been deleted but we need to refresh in order to see the changes Let me refresh it right you you can see uh our app is working nicely only one thing is missing we did not use uh State Management in our app so that we need to refresh each time in order to see changes right if you are interested uh to learn State Management so uh tell me in comments I will uh create new lectures new tutorials on State Management right I hope uh you all got it how to create diary app using SQ light right okay good luck

Channel: Spread Coding

Views: 2,473

Keywords: flutter, flutter ui, flutter design, flutter development, flutter tutorial, flutter ui design, flutter app developer, learn flutter, learn flutter development, flutter ios, flutter android, flutter frontend, flutter course, flutter coding, dart programming, flutter dart, flutter custom design, flutter awesome design, flutter beginners course, flutter beginners tutorial, diary app, diary app flutter, sqlite flutter, sqflite flutter, diary app sqlite flutter, sql flutter

Id: PLzX8lu4PRY

Length: 62min 32sec (3752 seconds)

Published: Sat Dec 02 2023