meet again on the flutter tutorial with idrcorner
in this tutorial will discuss, how to manipulate data on firebase database
such as adding data, reading data, changing data and deleting data
as an example for this CRUD
I will make an app of activity schedule, or Task
as in a demo video I published earlier
we will start from scratch
starting with creating a project on our firebase
now we open firebase site
here I click add project
for example I made here "Flutter"
select a country
and create project
okay, it's done, I press next
here we add firebase to android
I named com.idrcorner.task
short names emptied only
here is the field for the SHA1 certificate
here optional, can be used or not used
well, on the application that I will create
I will use login
means we use Firebase Auth
and to use firebase auth we must use SHA1 certificate
but if you only use the database
you can skip this certificate
ok, now we will use this SHA1 certificate
actually the tutorial that I give this I have ever discussed
on the flutter login tutorial using Google
to make this tutorial not separate
then I will repeat again
how to get SHA1 certificate
I click see this page
here is command to get it
but, first of all I've created a new flutter project
I named MyTask
and here is still the standard template flutter code
so the result is still like this
we will use the terminal, for that command
if here we immediately copy everything
I often have errors
because there is a slash that makes 2 lines
for that i will merge into one line
so, I copy this part first
Paste
then I copy this line
paste
so we do not use slashes
ok, next
on USERPROFIL, we customize it with user name on our PC
delete
ok, enter
it asks for keystore password
the default password is android
I type 'android'
enter
ok this is it, SHA1 certificate
Copy it
back to Firebase
paste here
Next, register the application
we download this google service json
this file I move directly
the location
this I will put on
andoid - app folder
and, we move on this app folder
I just grag it
to app folder
this is the json
ok,, next
I will add a classpath
so, I copy first
open at android folder
Here, there is build.gradle
I add here
nexe I add apply plugins
copy it
we open app folder
at build.gradle file
so here there are 2 build.gradle
for now, I open which in app folder
I put at the bottom of file
ok, save
well, next
this is required to connect to the application
but, I skip it
ok
next we will set it up for authentication
click develop
set up login method
I will use google
enabled
login with google
save
next, we open database
choose cloud firestore beta
select the testing method
so anyone who connects to this database, can change the data
ok, its done
now back to our flutter project
i close this build.gradle
next, open pubspec.yaml
we add new package
I did not use the version
so it looks for a suitable version
or a new version
save
is there an error here?
okay, no errors
next on this pubspec file
I've written the assets that will be used
the image is this image
this is for the background
next, this is a png file, transparent
in addition to the assets for image
I already added a font too
here, I add fonts folder
this is the font I will use
now, I open main.dart
this is still default code template
I clear the comments
this homepage I delete all
I will start from here
for theme color
I use purple
for MyHomePage I use statefull widget
here, I will create a login page
save, to see the result
full restart maybe
ok, here is a background
next I create application logo and sign in button
I will make it centred
ok, next, button for Login
seem to large
here I make the distance
next, to make the button clickable
I will use InkWell
you can use GesturDitector, or other
we will call signIn method
now, we create signIn method at the top
ups, here there is an error
oh, there are still settings I have not yet completed
we open again this build.gradle
at app folder
I have not changed the applicationId
this should be the same as our firebase application name
this one
ok. now, import our firebase
we continue that here
before it, above here I create the variable
next, after signing it will go to the Task page
it will open MyTask page
now, I create this MyTask class, at another file
ok, here I use statefull widget
at this page, we need user name and the login status
so I create that valiable here
upst, there is no suggestion here
oh right, I have not imported the google
back to main.dart
I will try to display the user name
at Container
I use this email
ok, superb, this appear the username
ok until here we've managed to create a login using google
for next we will design this my task
open mytask.dart
on return
I use Scaffold
ups, it does not show up
oh yes, this picture is white and transparent
so this container should be colored
so that the white color is visible
so I add for color
next I will give the shadow
ok, there is shadow now
next I will display the profile photo, and username
here I will use a small container
for the Image, we use the user photo
from this variable
I will give padding at this row
next beside this there is a user name
it's mean second children, after container
I will create welcome text, and below it, there is a user name
so I use Column first
next, the username
ok it's here
next, I will make it centerd
next, make it left-handed
next, create left padding
at the end here I created the signOut button
after Padding I use Icon Button
at onPress empty for now
to get it shifted sideways
I expanded the Column
Next, the bottom of here, I will create aplication name. "My Task"
so, this is first row, and the Aplication name is second
it mean I wrap this row with column
then after padding
I add column setting here
I will use my font asset for this text
for the next I will make the function of this signOut button
I create SignOut method at top
at child, I will display the photoProfile using ClipOval
under ClipOval I asked the question, would it be SignOut
for that I use Column
Wrap clip oval with Column
this is not working yet, because the alert has not been shown yet
at bottom of here
I add Showdialog
I give padding may be
next, I will create a line and buttons for confirmation
it looks like this container should be lengthened
now we create the buttons function
if "Yes", we do SignOut
after SignOut it will back to login page
next, I will create a button at bottom here for adding data
I minimize this SignOut, so not too long
at here
now I move this to the middle
underneath I will give a purple
next, what is this?
onpressed. Ok. floatingActionButton need onPressed
if onPressed it will open AddTask page
now, I create addTask class at another file
ok, now, I will design addData page
open addtask.dart
on return here, I use Material
first, I will design the header
ups, it must height
next, at here I create application name and Add data icon
for this style, to make it faster, I will copy the style at here
ok, copy this
next make it centerd
under this text, I give Icon
maybe before it I give text first
only top
I change this icon with list icon
next we create Textfield here
after this container
no border
next, style for the text
I give padding for this textfield
next we make a date for the deadline
due date
so, first of all we create settings for DateTime
for calendar
at top of here I create new variable
we use current time
below here we check, whether the user has selected date or not
next we create String for display the date
will appear here
I create a variable first
ok
so this text will appear here
then I will specify its datetext, when this page is opened
it will display today's date
next beside this there is its date
I use row
fot this we use datetext
I give padding for this row
so that this date becomes sideways,
we expanded the first text
next, when this date is clicked it will show calendar
for that, I use flatButton here
ok, good
This calendar displays today's date
next, befor this text I give Icon
next we create Textfield again, for note
I just copy this textfield
next at bottom of here I create Icons, for add and cancel
I'm using row
give padding between note and icons
next, this X button
it will cancel addData
try full restart
this is not requesting email again
because we have not signedout yet
so this goes straight in
next when the check button is on tap
then new data will enter on our database
at firebase
the data will grow here
so, when a user types a new task,
the task will be stored in a string variable
as well as notes
so at the top I create Variables again
when there is data being typed
then this will update this variable
with the data we type
we fill with the input text
as well as note, I copy this
this change to note
next, I create
when check button is on tap
it will call _addData method
now, we create addData method
I create here
it seems we have not imported yet
next, our document name
next, the fields
the first one we need an email
so any existing data, can be known to whom
so the email must be saved
I create variable to get email
the first is email
ok, after added data
it will back to Task page
this is it our task
here, back to my task page
try once again
ok, until here we've managed to add data on firebase
next we will read the data
the data will be displayed on the list here
back to our flutter project
at my task
I will use stack widget
so the list is under this header
for the list, I create here
collection that will be taken is the task, this one
as long as the email is the same as the login email
so the data corresponds to who is logged in
as long as the email is the same as the login email
then we taken the data
if there is no data
indicator loading will be displayed
next, if has data
now we create this tasklist
here, we need the document
I will try to display the title first
ups, there is no data here
oh yes, actually the data is already here
but the data is behind this header
for that, I give top padding here
now, lets try another user, I logOut first
ok, no data here
idr corners data not available
I add one
Next, I will design this list view for the better
to be left align
I add one more
this second note, I make it longer
I make it longer
here I do not use letter spacing
next, before te text, I give an Icon
this one too
I add padding here first
because the note is longer then the error appears
ok, for that
Expanded this note
this icon becomes to the middle
I want this to stay on top
I set back the distance here
I add padding for this title
next, I will create edit Icon here
means all this I put into the row
it looks like this container should be expanded
I give color here
next, I will create edit process
when icon edit in tap
it will open editData page
now I createeditData at a new file
for the edit page I will equate to adddata page
like this
so I just copy it
and I will make a few changes
delete this addData
its class name do not forget to be replaced
with editTask
next I want when pressed editTask
the data directly appear here
ok,, for that
these data should be sent to editTask
at editTask.dart
because this editData, we do not need to change email
because the data to be edited, is definitely the property of the user, who is logged in
for due date, I do not use this dudate
because this is string
while on editTask asks for Datetime
I just copy it
not change to String
next, for the text, I use controler
next, at Textfield we use the controller
ups, lets see the date
we not use this email
oh, it turns out the mistake from here
here when we add data
here's the String type
therefore when we take it
this is String
while duedate is DateTime
therefore there is this error message
so type String can not be used on duedate
this error occurs, when we add data
this should not be a string
but, DateTime
ok, now open addTask
oh yes,, here we save _dateText
should be this duedate
copy,,,, paste
now we try to add a data again
well this is just right
so the data here is all wrong, because the duedate is a string
for that I delete All document
lets try edit
now appears here
the date display is now long
I will fix it letter
now try edit
ok, the date is displayed here
now I fix the look here, on MyTask
now back to our edit task
when press edit, the data already appear here
next, i will create update process
it will call _updatetask method
now create updateTask method
Here, we need an identity to be edited
we need index
? ? ?
should not be slim like this
I use edit
next the index
get this means, we will edit which data
when it is there, then the data is updated
we did not update the email
if it is updated, back to MyTask Page
now I try
ok, the data is updated
ok, updated
ups, the note goes missing
when the data is not changed
I try again
okay, it turns out that way
if not changed, then the original data disappears
means something to be fixed
ok, so when the user does not change the data
the original data is stored here
directly ok
ok, the data is not lost
try again, edit
directly ok
whether missing
ok it's safe
try another user
it seems there is no data
because we have deleted all of them
ok, the last one, we will make sweep to delete
to delete the data
I add data first
add one more
ok, now we create sweep to delet
on my task
at the list
All of these
wrap the padding with Dismissable
documentId we use as key
we immediately delete here
await index to be deleted
after deleted we show snackbar
I add one more here
ok, works
ok, we've managed to use CRUD in firebase
such as adding data, reading data, changing data and deleting data
well, if you have any questions
you can write in the comment field
if you like this video
and useful for you
please give like to this video for support me
and for next tutorial
we will release this app to apk
and we will add on google play store
do not forget to subscribe for those who have not
so do not miss the next tutorial
That is all from me, thanks for watching
see you in the next tutorial
Không có nhận xét nào:
Đăng nhận xét